Share
Så du har sett dem på andras webbplatser och du vill veta hur du kan ha en också? Den rullande navigationsmenyn som ses på många webbplatser är verkligen lätt att replikera i WordPress. Hjälp dina läsare, låt dem klicka på menyn från vilken punkt som helst på sidan. Här är hur…
Första är först, du behöver en meny att existera för att visa den på sidan. Låt oss skapa en ny kallad "Topnavigation'. Här är den mest grundläggande koden för att ställa in den menyn i din functions.php fil:
Accentsconagua
register_nav_menus (array ('topnavigation' => __ ('Top Navigation', 'DIN TEMA NAME GOES HERE'))); Om du redan har en register_nav_menus funktionen inställd, lägg till "Topnavigation'menyrad till den funktionen.
Gå in i instrumentpanelen, öppna menyns flik. Skapa en ny meny och tilldela den till det utrymme som du just kallat Top Navigation. Fyll sedan upp menyn med sidor. Jag har just gått till ett hem, butik, evenemang och blogg - du använder vad du vill.
Du måste ringa din meny längst upp i din kropp i header.php fil. Det är väldigt viktigt att du sätter ihop den menyn i en omslag div av eget val. Jag har valt a div kallad Topnavigation. Vi måste göra allt i detta div flytta med sidan senare. Detta är det enklaste sättet att göra det.
Använd följande kod i header.php:
"topnavigation")); ?>
Det borde ge dig något som ser ut så här på din sida:
Självklart kommer ditt tema att vara annorlunda. Mine är bara en grundläggande underscores.me installeras med ett enkelt galler från Get Skeleton.
Därefter kan vi börja styling. Så att vi kan se vad vi gör, låt oss börja med att lägga till lite CSS för att ge den en bakgrundsfärg och vi vill att den ska vara 100% bredd så att det inte ser konstigt ut när vi gör det bläddra i ett ögonblick.
Använd följande kod i style.css eller vad ditt stylesheet heter:
#topnavigation width: 100%; bakgrundsfärg: # 999;
Uppdatera din sida och du kommer (om du har följt) se detta:
Nu vill vi se till att våra länkar går in i den grå baren. Så vi skapar ett nav-element runt navigeringsmenyn:
Då måste vi ge den nya naven en stil. Det kan vi göra så här:
#topnavigation nav width: 940px; // Bredden på din container div kan vara olika marginal: 0 auto; #topnavigation li display: inline; vaddering: 10px; marginal: 20px 0;
Dessa två saker tillsammans gör nav-menyn på din sida så här:
Slutligen är vi redo att få det att bläddra. Det bästa sättet att göra det är att fixa det till toppen av fönstret och sedan göra det "sväva" över alla andra element på sidan.
Uppdatera din #topnavigation stil att se så här ut:
#topnavigation width: 100%; bakgrundsfärg: # 999; position: fast; // Stick den till toppen av fönstret z-index: 1; // Gör det flytande över alla andra element höjd: 50px; // ger oss en referenspunkt för den sista saken
Men om du laddar om ditt fönster ser du det eftersom navigationen är flytande, det har gjort det möjligt att allt annat innehåll går under det.
För att komma runt det, lägg till en marginal överst i behållaren div med allt annat i det. I min mall, det div kallas #sida. Så lägger jag till den här i min CSS-fil:
#page padding-top: 60px; // Höjden på min toppnavigations div plus lite extra vaddering för visuellt nöje
Det kommer att lämna dig med detta:
Därefter kan du känna sig fri att stryka navigeringen till ditt hjärtans innehåll!
