Share
Dus je hebt ze gezien op de websites van andere mensen en je wilt weten hoe je die kunt hebben? Het scrollen-navigatiemenu dat op veel websites wordt weergegeven, is eenvoudig te repliceren in WordPress. Help uw lezers uit, laat hen vanuit elk punt op de pagina op het menu klikken. Hier is hoe…
Allereerst moet er een menu bestaan om het op de pagina weer te geven. Laten we een nieuwe maken genaamd 'topnavigation'. Hier is de meest elementaire code om dat menu in te stellen in uw functions.php het dossier:
Accentsconagua
register_nav_menus (array ('topnavigation' => __ ('Topnavigatie', 'UW THEMA NAAM GAAT HIER'))); Als je al een hebt register_nav_menus functie ingesteld, voeg de 'topnavigation'menulijn naar die functie.
Ga naar je dashboard, open het tabblad 'Menu's'. Maak een nieuw menu en wijs het toe aan de ruimte die u zojuist 'Topnavigatie' noemde. Vul vervolgens het menu met pagina's. Ik ben net op zoek naar een huis, winkel, evenementen en blog - u gebruikt wat u maar wilt.
Je moet je menu helemaal bovenaan in je lichaam oproepen in de header.php het dossier. Het is erg belangrijk dat u dat menu in een wrapper wikkelt div van uw keuze. Ik heb gekozen voor een div riep topnavigation. We zullen hier alles in moeten maken div ga later met de pagina verder. Dit is de gemakkelijkste manier om dat te doen.
Gebruik de volgende code in header.php:
'topnavigation')); ?>
Dat zou u iets moeten geven dat er zo uitziet op uw pagina:
Natuurlijk zal je thema anders zijn. De mijne is slechts een eenvoudige underscores.me-installatie met een eenvoudig raster van Get Skeleton.
Daarna kunnen we beginnen met stileren. Zodat we kunnen zien wat we doen, laten we beginnen met het toevoegen van een beetje CSS om het een achtergrondkleur te geven en we willen dat het 100% breed is, zodat het er niet vreemd uitziet als we het in een moment laten scrollen.
Gebruik de volgende code in style.css of hoe je stylesheet ook wordt genoemd:
#topnavigation width: 100%; achtergrondkleur: # 999;
Ververs je pagina en je zult (als je dit hebt gedaan) dit zien:
Nu willen we ervoor zorgen dat onze links in het midden van die grijze balk gaan. Daarom maken we een navigatie-element rond het navigatiemenu:
Dan moeten we die nieuwe navigator wat stijl geven. We kunnen dat doen zoals:
#topnavigation nav width: 940px; // de breedte van uw container-div zou een andere marge kunnen zijn: 0 auto; #topnavigation li display: inline; opvulling: 10px; marge: 20 px 0;
Deze twee dingen bij elkaar zullen het nav-menu op uw pagina er als volgt uitzien:
Eindelijk zijn we klaar om het te laten scrollen. De beste manier om dat te doen, is het boven in het venster te herstellen en het vervolgens boven alle andere elementen op de pagina te laten zweven..
Update uw #topnavigation stijl om er zo uit te zien:
#topnavigation width: 100%; achtergrondkleur: # 999; positie: vast; // Plak het aan de bovenkant van de venster-z-index: 1; // Laat het boven alle andere elementen zweven hoogte: 50px; // Geeft ons een referentiepunt voor het laatste ding
Maar als je je venster opnieuw laadt, zul je merken dat omdat de navigatie zweeft, het alle andere inhoud heeft toegestaan eronder te gaan.
Om hier omheen te komen, voegt u een marge toe aan de bovenkant van de container div met al het andere erin. In mijn sjabloon, dat div wordt genoemd #pagina. Dus ik zal dit toevoegen aan mijn CSS-bestand:
#page padding-top: 60px; // De hoogte van mijn topnavigatiegedeelte plus een klein beetje extra opvulling voor visueel plezier
Dat zal je hierbij achterlaten:
Daarna kunt u de navigatie naar hartenlust stylen!
