Share
Så du har sett dem på andres nettsider, og du vil vite hvordan du kan ha en også? Rullingnavigasjonsmenyen sett på mange nettsteder er veldig enkelt å replikere i WordPress. Hjelp leserne dine ut, la dem klikke på menyen fra hvilket som helst punkt på siden. Dette er hvordan…
Første ting er først, du trenger en meny å eksistere for å vise den på siden. La oss lage en ny som heter 'topnavigation'. Her er den mest grunnleggende koden for å sette opp den menyen i din functions.php fil:
Accentsconagua
register_nav_menus (array ('topnavigation' => __ ('Toppnavigasjon', 'DIN TEMANAMN GÅER HER'))); Hvis du allerede har en register_nav_menus funksjon satt opp, legg til 'topnavigation'meny linje til den funksjonen.
Gå inn i dashbordet ditt, åpne menyfanen din. Opprett en ny meny og tilordne den til plassen du nettopp kalte "Toppnavigasjon". Fyll deretter menyen opp med sider. Jeg har nettopp gått til et hjem, butikk, hendelser og blogg - du bruker hva du vil.
Du må ringe menyen øverst i kroppen din i header.php fil. Det er veldig viktig at du pakker inn den menyen i en innpakning div av eget valg. Jeg har valgt a div kalt topnavigation. Vi må gjøre alt i dette div Flytt med siden senere. Dette er den enkleste måten å gjøre det på.
Bruk følgende kode i header.php:
'toppnavigasjon')); ?>
Det burde gi deg noe som ser slik ut på siden din:
Selvfølgelig vil temaet ditt være annerledes. Mine er bare en grunnleggende underscores.me installere med et enkelt nett fra Get Skeleton.
Deretter kan vi begynne styling. Slik at vi kan se hva vi gjør, la oss starte med å legge til litt CSS for å gi det en bakgrunnsfarge, og vi vil at den skal være 100% bred, slik at det ikke ser rart ut når vi får det til å bla et øyeblikk.
Bruk følgende kode i style.css eller hva stilarket ditt heter:
#topnavigation width: 100%; bakgrunnsfarge: # 999;
Oppdater siden din, og du vil (hvis du har fulgt) se dette:
Nå vil vi sørge for at våre lenker går inn i midten av den grå linjen. Så vi lager et nav-element rundt navigasjonsmenyen:
Da må vi gi den nye naven noen stil. Vi kan gjøre det slik:
#topnavigation nav width: 940px; // Bredden på container div kan være forskjellig margin: 0 auto; #topnavigation li display: inline; polstring: 10px; margin: 20px 0;
Disse to tingene sammen vil gjøre navmenyen på siden din se slik ut:
Til slutt er vi klare til å få det til å bla. Den beste måten å gjøre det på er å fikse den til toppen av vinduet og deretter gjøre det "hover" over alle andre elementer på siden.
Oppdater din #topnavigation stil for å se slik ut:
#topnavigation width: 100%; bakgrunnsfarge: # 999; posisjon: fast; // Fest den til toppen av vinduet z-indeksen: 1; // Gjør det flyte over alle andre elementer høyde: 50px; // Gir oss et referansepunkt for den endelige saken
Men hvis du laster opp vinduet ditt, vil du legge merke til det fordi navigasjonen er flytende, det har tillatt at alt annet innhold går under det.
For å komme seg rundt, legg til en margen til toppen av beholderen div med alt annet i det. I min mal, det div er kalt #side. Så jeg legger til dette i CSS-filen min:
#page padding-top: 60px; // Høyden på min toppnavigasjons div og litt ekstra utfylling for visuell nytelse
Det vil forlate deg med dette:
Etter det kan du gjerne stilte navigasjonen til hjertet ditt!
