Kaip sukurti „JQuery“ išskleidimą „WordPress“

Nors galite koduoti visą išskleidžiamąjį meniu HTML ir CSS („Cascading Style Sheets“), jQuery leidžia jums pridėti kai kurias animacijas, veikiančias naršyklėse. JQuery yra biblioteka, kuri papildo „JavaScript“ ir palengvina scenarijų rašymą programuotojams, kurie yra mažiau susipažinę su programavimu, nors kai kurie programavimo įgūdžiai padeda. CSS ir jQuery efektų taikymas HTML WordPress generuoja tinklaraščiams, kad rašytumėte liesą, lanksčią CSS ir patikrinkite, ar jQuery yra sukurtas.

Meniu stilius su CSS

1.

„WordPress“ temai atidarykite failą „style.css“, naudodami kodų redaktorių arba „Notepad“. Pradėkite suteikdami visam meniu santykinę padėtį:

.menu {pozicija: santykinis; }

Santykinė padėties nustatymas leidžia suteikti absoliučią poziciją submeniu, neperplėšus į naršyklės lango kampus. Naudokite „meniu“ klasės pavadinimą, kad nukreiptumėte į bet kurį „WordPress“ temos meniu. WordPress prideda šią klasę automatiškai.

2.

Plaukite kiekvieną sąrašo elementą meniu, kad kiekvienas išsidėstytų į kairę nuo kito, sudarant horizontalią juostą. Taip pat pridėkite santykinį padėties sąrašo elementus:

.menu li {float: kairėje; pozicija: santykinis; }

3.

Stiliuokite inkaro žymes, kurios sudaro jūsų meniu nuorodas. Suteikite nuorodas, pašalinkite tekstą ir pridėkite fono spalvą. Taip pat pridėkite „ekranas: blokas“, kad priverstumėte bloko lygio stilių prijungti prie nuorodų, leidžiančių pridėti polių:

.menu a {fonas: juoda spalva: balta; šrifto dydis: 18px; šrifto svoris: paryškintas; teksto apdaila: nėra; paminkštinimas: 10px; ekranas: blokas; }

„Teksto apdailos“ savybė pašalina akcentus.

4.

Nustatykite nuorodų būseną, naudodami „: hover“ pseudo klasę:

.menu a: Pakimba {fonas: # aa0000; }

Šiame pavyzdyje naudojamas šešioliktainis spalvos kodas tam, kad būtų sukurta tamsiai raudona spalva. Kai naudotojas perkelia pelės žymeklį virš meniu elemento, jo fonas pasikeis.

5.

Slėpti submeniu perkeliant visus įdėtus „

„Žymės turinys kairėje naršyklės ekrano pusėje:

.menu ul {pozicija: absoliutus; kairėje: -9999px; }

Nors „ekranas: niekas“ taip pat veikia, šis metodas yra labiau prieinamas akliesiems lankytojams, naudojantys ekrano skaitytuvus.

6.

Jei norite, kad jie būtų vertikalūs, į submeniu pridėkite „aiškus: abu“. Pateikite submeniu nustatytą plotį:

.menu ul li {clear: abu; plotis: 200px; }

7.

Atgal į priekį, kai vartotojas perkelia pelę į savo tėvų elementą, viršutinio lygio nuorodą meniu juostoje:

.menu li: hover ul {left: 0; }

Parašykite jQuery scenarijų

1.

Atidarykite savo temos failą „header.php“ ir patikrinkite, ar jis sukuria „jQuery“:

Įtraukite šį kodą aukščiau „“ ir „“ žyma, jei jis dar nėra.

2.

Atidarykite „footer.php“ scenarijų ir suraskite „

3.

Pasirinkite submeniu ir naudokite CSS funkciją, kad juos paslėptumėte:

4.

Savo meniu pasirinkite sąrašo elementus ir naudokite „hover“ įvykį, jei norite pridėti išskleidžiamąjį animaciją:

jQuery ('. menu li'). Hover (funkcija () {jQuery (this) .find ('ul') .stop (true, true) .slideDown ('slow');});

Šis kodas yra žemiau pirmojo „});“, kuris yra jūsų scenarijuje. „JQuery“ „jQuery (this)“ yra selektorius, kuris nukopijuoja pirmosios funkcijos funkciją, šiuo atveju „.menu li“. Funkcija nustato kiekvieną „

„Žymė, įterpta į paminėtą sąrašo elementą, sustabdo bet kokias kitas animacijas, kurios vyksta, ir tada skaidomos įdėtą sąrašą - submeniu - žemyn.

5.

Pakeiskite slinkties funkciją, kad pridėtumėte animaciją, kai vartotojas nukreipia pelės žymeklį toliau nuo meniu elemento. Jūs galite pridėti išnykimo animaciją ant lėktuvo:

jQuery ('. menu li'). Hover (funkcija () {jQuery (this) .find ('ul') .stop (true, true) .slideDown ('slow');}, funkcija () {jQuery (tai ) .find ('ul') .stop (true, true) .fadeOut („slow“);});