Hvordan bygge en jQuery Dropdown i WordPress

Selv om du kan kode en hel rullegardinmeny i HTML og CSS (Cascading Style Sheets), kan jQuery legge til noen animasjoner som fungerer over nettlesere. JQuery er et bibliotek som legger til JavaScript og gjør skriptskriving lettere for designere mindre kjent med programmering, selv om noen programmeringsferdigheter hjelper. Bruk av CSS og jQuery-effekter til HTML WordPress genererer for blogger krever at du skriver lean, fleksibel CSS og kontrollerer at jQuery er enqueued.

Stil menyen med CSS

1.

Åpne "style.css" -filen for WordPress-temaet ditt, ved hjelp av et kodeditor eller Notisblokk. Begynn med å gi hele menyen en relativ posisjon:

.menu {posisjon: relativ; }

Den relative plasseringen gjør det mulig å gi absolutt posisjonering til undermenyer uten at de flyter inn i hjørnene i nettleservinduet. Bruk klassenavnet "meny" til å målrette mot en hvilken som helst meny i et WordPress-tema. WordPress legger denne klassen til menyer automatisk.

2.

Flyt hvert listepunkt i menyen, slik at hver linje justeres til venstre for den andre, og danner en horisontal linje. Legg også til relativ posisjonering til listepostene:

.menu li {float: left; posisjon: relativ; }

3.

Stil ankeretikettene som danner linkene i menyen din. Gi linkene polstring, fjern tekst understreker og legg til en bakgrunnsfarge. Legg også til "skjerm: blokk" for å tvinge blokkeringsnivået på linkene, som lar deg legge til polstring:

.menu {bakgrunn: svart farge: hvit; skriftstørrelse: 18px; font-weight: bold; tekst-dekorasjon: ingen; polstring: 10px; skjerm: blokk; }

Egenskapen "tekst-dekorasjon" fjerner understreker.

4.

Angi en svingstilstand for koblingene ved hjelp av pseudoklassen ": svinger":

.menu a: svever {bakgrunn: # aa0000; }

Dette eksemplet bruker en heksadesimal fargekode for å lage en mørk rød farge. Når brukeren svever musepekeren over et menyelement, vil bakgrunnen endres.

5.

Skjul undermenyene ved å skifte alle nestede "

    "Merk innholdet til venstre for nettleserskjermbildet:

    .menu ul {posisjon: absolutt; igjen: -9999px; }

    Mens "display: none" virker, er denne metoden mer tilgjengelig for blinde besøkende ved hjelp av skjermlesere.

    6.

    Legg til "Clear: both" til undermenyene for å gjøre dem vertikale. Gi undermenyene en sett bredde:

    .menu ul li {clear: both; bredde: 200px; }

    7.

    Ta undermenyene tilbake når brukeren svinger musen over det overordnede elementet, topplinjen i menylinjen:

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

    Skriv jQuery-skriptet

    1.

    Åpne filen "header.php" for temaet ditt og kontroller at det enqueues jQuery:

    Legg denne koden over "" og "" taggen hvis den ikke allerede er der.

    2.

    Åpne "footer.php" skriptet og finn et par "

    3.

    Velg undermenyene og bruk CSS-funksjonen til å skjule dem:

    4.

    Velg listepostene i menyen din og bruk "hover" -hendelsen for å legge til dropdown-animasjonen din:

    jQuery ('.meny li') .vev (funksjon () {jQuery (denne) .find ('ul') .stop (sann, sann) .slideDown ('slow');});

    Denne koden går under den første "});" som er i skriptet ditt så langt. I jQuery er "jQuery (this)" en selector som kopierer funksjonens første velger, i dette tilfellet ".menu li". Funksjonen finner hver "

      "Tag nestet inne i det hovered listeposten, stopper eventuelle andre animasjoner som skjer, og skyver den nestede listen - undermenyen - ned.

      5.

      Endre nedtrekksfunksjonen for å legge til en animasjon når brukeren svever musepekeren bort fra et menyelement. Du kan legge til en fade-out animasjon på hover-out:

      jQuery ('.meny li') .overvei (funksjon () {jQuery (denne) .find ('ul') .stop (sann, sann) .slideDown ('slow');}, funksjon () {jQuery ) .find ('ul') .stop (sant, sant) .fadeOut ('slow');});

Anbefalt