Hoe een jQuery Dropdown in WordPress te bouwen

Hoewel u een volledig vervolgkeuzemenu kunt coderen in HTML en CSS (Cascading Style Sheets), kunt u met jQuery enkele animaties toevoegen die in verschillende browsers werken. JQuery is een bibliotheek die bijdraagt ​​aan JavaScript en maakt het schrijven van een script eenvoudiger voor ontwerpers die minder bekend zijn met programmeren, hoewel sommige programmeervaardigheden helpen. CSS- en jQuery-effecten toepassen op HTML WordPress genereert voor blogs vereist dat u slanke, flexibele CSS schrijft en controleert of jQuery in de wachtrij staat.

Stijl het menu met CSS

1.

Open het bestand "style.css" voor uw WordPress-thema met behulp van een codebewerker of Kladblok. Begin door het hele menu een relatieve positie te geven:

.menu {positie: relatief; }

De relatieve positionering maakt het mogelijk om absolute positionering te geven aan submenu's zonder dat deze in de hoeken van het browservenster zweven. Gebruik de klassenaam 'menu' om elk menu in een WordPress-thema te targeten. WordPress voegt deze klasse automatisch toe aan menu's.

2.

Zwevend elk lijstitem in het menu, zodat elke lijn uitgelijnd is met de linkerkant van de andere en een horizontale balk vormt. Voeg ook relatieve positionering toe aan de lijstitems:

.menu li {float: left; positie: relatief; }

3.

Personaliseer de ankertags die de links vormen in uw menu. Geef de links opvulling, verwijder onderstreepte tekst en voeg een achtergrondkleur toe. Voeg ook "display: block" toe om de styling op blokniveau op de links te dwingen, zodat u de padding kunt toevoegen:

.menu a {achtergrond: zwarte kleur: wit; lettergrootte: 18px; lettertype: vet; tekstdecoratie: geen; opvulling: 10px; weergave: blok; }

De eigenschap "text-decoration" verwijdert onderstrepingen.

4.

Stel een hover-status in voor de koppelingen met de pseudo-klasse ": hover":

.menu a: hover {background: # aa0000; }

In dit voorbeeld wordt een hexadecimale kleurcode gebruikt om een ​​donkerrode kleur te maken. Wanneer de gebruiker haar muisaanwijzer boven een menu-item houdt, verandert de achtergrond ervan.

5.

Verberg de submenu's door alle geneste "

    "Tag-inhoud links van het browserscherm:

    .menu ul {positie: absoluut; links: -9999px; }

    Terwijl "display: none" ook werkt, is deze methode beter toegankelijk voor blinde bezoekers met behulp van schermlezers.

    6.

    Voeg "clear: both" toe aan de submenu's om ze verticaal te maken. Geef de submenu's een ingestelde breedte:

    .menu ul li {duidelijk: beide; breedte: 200 px; }

    7.

    Breng de submenu's terug wanneer de gebruiker zijn muis boven het bovenliggende item houdt, de link op het hoogste niveau in de menubalk:

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

    Schrijf het jQuery-script

    1.

    Open het bestand "header.php" voor uw thema en controleer of het jQuery in de wachtrij plaatst:

    Voeg deze code toe boven "" en de "" tag als deze er nog niet is.

    2.

    Open het script "footer.php" en zoek een paar "

    3.

    Selecteer de submenu's en gebruik de CSS-functie om ze te verbergen:

    4.

    Selecteer de lijstitems in uw menu en gebruik de "hover" -gebeurtenis om uw dropdown-animatie toe te voegen:

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

    Deze code gaat onder de eerste "});" dat is tot nu toe in je script. In jQuery is "jQuery (this)" een selector die de eerste selector van de functie kopieert, in dit geval ".menu li". De functie vindt elke "

      "Tag genest binnen het zwevende lijstitem, stopt alle andere animaties die gaande zijn en schuift de geneste lijst - het submenu - naar beneden.

      5.

      Wijzig de functie omlaag om een ​​animatie toe te voegen wanneer de gebruiker haar muisaanwijzer van een menu-item af beweegt. Je kunt een fade-out animatie toevoegen aan de hover-out:

      jQuery ('. menu li'). hover (function () {jQuery (this) .find ('ul') .stop (true, true) .slideDown ('slow');}, function () {jQuery (this ) .find ('ul') .stop (waar, waar) .fadeOut ('langzaam');});

Aanbevolen