Hur man skapar en vertikal navigeringsmeny i WordPress

En väl utformad navigeringsmeny är viktig om du vill skapa en positiv användarupplevelse på din WordPress-webbplats.

Medan horisontella menyer är vanliga, erbjuder en vertikal navigeringsmeny ett unikt och effektivt sätt att organisera din webbplats innehåll, särskilt för webbplatser med många sidor eller komplexa strukturer.

Dessa menyer kan förbättra tillgängligheten eftersom de passar bättre i din webbplats sidofält och är lättare att navigera på mobila enheter.

I den här artikeln visar vi hur du enkelt skapar en vertikal navigeringsmeny i WordPress.

Vad är en navigeringsmeny?

En navigeringsmeny är en lista med länkar som pekar på viktiga områden på en WordPress-webbplats. Denna meny presenteras vanligtvis som en horisontell stapel med länkar högst upp på varje sida.

Navigeringsmenyer ger din webbplats struktur och hjälper besökare att hitta det de letar efter. Du kan lägga till länkar till dina viktigaste sidor, kategorier eller ämnen, WordPress-blogginlägg och till och med lägga till anpassade länkar som din profil på sociala medier.

Men även om du ofta ser dem placerade horisontellt högst upp på en webbplats, har vertikala navigeringsmenyer många användningsområden och fördelar.

En vertikal navigeringsmeny tar upp mindre plats på sidan, är lättare att skanna och navigera, och kan placeras i din sidofält, sidfot eller till och med som ett popup-fönster, vilket gör den mer flexibel.

Till exempel, om du har en onlinebutik, då kan du med en vertikal navigeringsmeny visa mycket fler produktkategorier och produkter utan att ta upp för mycket plats.

Med det sagt, låt oss titta på ett antal sätt att skapa en vertikal navigeringsmeny i WordPress. Här är de ämnen vi kommer att täcka i den här artikeln:

• Prova olika platser för menyvisning
• Lägga till en vertikal navigeringsmeny till sidopanelen
• Skapa en vertikal navigeringsmeny på ett inlägg eller en sida
• Lägga till en vertikal navigeringsmeny med Full Site Editor
• Skapa en vertikal navigeringsmeny med ett tema-byggarplugin
• Skapa en responsiv vertikal navigeringsmeny för mobila enheter
• Skapa en rullgardinsmeny i WordPress
• Skapa en Mega-meny i WordPress
• Bonus: Skapa en klibbig flytande navigeringsmeny i WordPress

Prova olika platser för menyvisning

När du lägger till en navigeringsmeny på din webbplats kommer den att visas antingen vertikalt eller horisontellt. Detta beror på ditt tema samt den menyplats du väljer.

Antalet tillgängliga menyplatser beror på temat du använder. Du kanske upptäcker att några av dessa platser visar menyn vertikalt.

För att testa detta med ditt tema, navigera till sidan Utseende » Menyer från WordPress-administratörsidomen. Här kan du experimentera för att se vilka platser som är tillgängliga på din webbplats och hur de visas.

Till exempel erbjuder Twenty Twenty-One-temat inga vertikala platser, medan Twenty Twenty-temat erbjuder en som kallas 'Desktop Expanded Menu'.

Du kan helt enkelt välja den meny du vill visa vertikalt och sedan markera rutan ‘Desktop Expanded Menu’ längst ner på skärmen.

Därefter måste du se till att klicka på knappen ‘Spara meny’ för att lagra dina inställningar. Så här ser det ut på vår demosida.

För mer information om att redigera menyer och menyplatser kan du se vår nybörjarguide om hur man lägger till en navigeringsmeny i WordPress.

Lägga till en vertikal navigeringsmeny till sidopanelen

Oavsett vilket tema du använder är det enkelt att lägga till en vertikal navigeringsmeny i sidofältet med en widget.

Först måste du skapa en navigeringsmeny som du vill visa om du inte redan har gjort det. Sedan måste du besöka sidan Utseende » Widgets från WordPress-instrumentpanelen.

Härifrån klickar du helt enkelt på ‘+’-knappen i det övre vänstra hörnet av sidan och drar Navigationsmeny-blocket till sidopanelen.

Därefter kan du ge widgeten ett namn och välja den meny du vill visa från rullgardinsmenyn. Klicka slutligen på knappen 'Uppdatera' högst upp för att spara dina inställningar.

Här är hur den vertikala sidofältsmenyn ser ut på vår demo WordPress-blogg.

Skapa en vertikal navigeringsmeny på ett inlägg eller en sida

Du kan lägga till en vertikal navigeringsmeny till inlägg och sidor på ett liknande sätt.

Först måste du skapa ett nytt inlägg eller redigera ett befintligt.

Därefter klickar du på ‘+’-knappen högst upp på sidan och drar sedan Navigationsblocket till sidan.

Välj sedan vilken meny som ska visas. Klicka helt enkelt på knappen ‘Välj meny’ i verktygsfältet och välj önskad meny.

Slutligen måste du titta på blockinställningarna i panelen till höger.

Där hittar du två knappar för menyns orientering. Du måste klicka på nedåtpilknappen för att orientera menyn vertikalt.

När du är klar klickar du på knappen 'Publicera' eller 'Uppdatera' för att spara dina inställningar.

Lägga till en vertikal navigeringsmeny med Full Site Editor

Om du använder ett blockbaserat tema, kan du enkelt lägga till den vertikala navigeringsmenyn på din webbplats med hjälp av fullständig webbplatsredigerare.

För att göra detta, gå till skärmen Utseende » Redigerare från din WordPress-instrumentpanel. När du är i redigeraren, klicka på den navigeringsmeny som visas högst upp i webbplatsens sidhuvud.

Klicka sedan på knappen 'Välj navigering' i verktygsfältet.

Nu ser du olika alternativ för att anpassa navigeringsmenyn i panelen till höger.

Ett av dessa alternativ är om menyn ska visas med en horisontell eller vertikal orientering. Klicka helt enkelt på nedåtpilen för vertikal orientering för att skapa en vertikal meny.

För mer information, se vår guide om hur man lägger till en navigeringsmeny i WordPress.

Klicka slutligen på knappen ‘Spara’ för att lagra dina inställningar. Du har nu lagt till en vertikal navigeringsmeny på din webbplats.

Skapa en vertikal navigeringsmeny med ett tema-byggarplugin

SeedProd är den bästa WordPress sidbyggaren och plugin för anpassade teman på marknaden. Det gör att du enkelt kan skapa vertikala menyer var som helst på din WordPress-webbplats.

Först måste du installera och aktivera pluginet SeedProd. För mer information, se vår nybörjarguide om hur man installerar ett WordPress-plugin.

Vid aktivering måste du ange din licensnyckel. Du hittar denna information på ditt konto på SeedProd-webbplatsen.

Därefter kan du använda SeedProd för att skapa ett anpassat WordPress-tema.

Skapa ett anpassat WordPress-tema

Du hittar SeedProd tema-byggaren genom att navigera till sidan SeedProd » Theme Builder. Här kommer du att använda ett av SeedProds färdiga teman som utgångspunkt. Detta kommer att ersätta ditt befintliga WordPress-tema med en ny, anpassad design.

Du kan göra det genom att klicka på knappen 'Teman'.

Du kommer sedan att visas en lista över professionellt designade teman för olika typer av webbplatser. Till exempel finns det mallar som heter 'Modern Business', 'Marketing Agency' och 'Mortgage Broker Theme'.

Titta igenom alternativen och välj ett som bäst matchar dina behov genom att klicka på kryssikonen.

När du väl har valt ett tema genererar SeedProd alla temamallar du behöver. Du kan lära dig hur du anpassar dessa mallar i vår guide om hur du enkelt skapar ett anpassat WordPress-tema.

Lägga till en vertikal navigeringsmeny till dina webbplatsmallar

Nu kan du använda SeedProd för att lägga till en vertikal navigeringsmeny till någon av dina temamallar. I den här handledningen lägger vi till en meny till bloggindexmallen.

Du måste föra muspekaren över den mallen och sedan klicka på länken 'Redigera design'.

Detta öppnar SeedProds dra-och-släpp-sidbyggare, där du ser en förhandsgranskning av din webbplats till höger och en blockpanel till vänster.

Skrolla ner bland blocken tills du kommer till avsnittet Avancerat.

När du har hittat Nav Menu-blocket, bör du dra det till din sidopanel eller var som helst där du vill visa navigeringsmenyn. Som standard finns det bara ett objekt i menyn, ‘Om’.

Nu måste du ändra menyinställningarna. För att göra det, klicka på menyn, så visas de tillgängliga alternativen i den vänstra kolumnen.

För närvarande är menyposttypen ‘Enkel’ vald. Detta gör att du kan bygga din egen navigeringsmeny i SeedProd.

För den här handledningen klickar vi dock på typen ‘WordPress Menu’ för att istället använda WordPress navigeringsmeny.

Slutligen måste du klicka på fliken 'Avancerat'. Här hittar du ett alternativ för att orientera listlayouten vertikalt eller horisontellt.

När du klickar på knappen ‘Vertikal’ kommer du att märka att förhandsgranskningen omedelbart ändras till en vertikal navigeringsmeny.

Glöm inte att klicka på knappen ‘Spara’ högst upp på skärmen för att spara din vertikala meny.

Skapa en responsiv vertikal navigeringsmeny för mobila enheter

Det kan vara svårt att trycka på en standardmeny när du använder den lilla skärmen på en smartphone. Därför rekommenderar vi att du förhandsgranskar mobilversionen av din WordPress-webbplats för att se hur din webbplats ser ut på mobila enheter.

Vertikala menyer är mycket lättare att navigera, särskilt när du använder en responsiv meny i helskärmsläge som automatiskt anpassar sig till olika skärmstorlekar.

För att lära dig hur du gör din navigeringsmeny enklare att använda på mobila enheter, se vår guide om hur man lägger till en responsiv helskärmsmeny i WordPress.

Skapa en rullgardinsmeny i WordPress

En rullgardinsmeny ser ut som en vanlig horisontell navigeringsmeny högst upp på skärmen. Men när du för muspekaren över ett av objekten visas en vertikal undermeny.

Om du har en webbplats med mycket innehåll, låter en rullgardinsmeny dig organisera menystrukturen efter ämnen eller hierarki. Detta visar mer innehåll på en begränsad yta.

För att visa en rullgardinsnavigeringsmeny på din webbplats måste du välja ett tema med stöd för rullgardinsmenyer. Därefter måste du skapa navigeringsmenyn och sedan lägga till underposter till några av menyalternativen.

Du kan lära dig hur du gör det steg för steg i vår nybörjarguide om hur man skapar en rullgardinsmeny i WordPress.

Skapa en Mega-meny i WordPress

En megameny listar flera menyer vertikalt över sidan. De liknar rullgardinsmenyer, förutom att alla undermenyer visas samtidigt, vilket gör det möjligt för användare att snabbt och enkelt hitta ditt allra bästa innehåll.

Megamenyer är mycket engagerande och interaktiva eftersom de kombinerar det bästa av horisontella och vertikala menyer för att visa en hjälpsam översikt över din webbplats innehåll på en enda skärm.

Vi lade nyligen till en megameny på WPBeginner för att förbättra upptäckbarheten av innehåll. Vi förklarar hur vi gjorde detta i vår bakom kulisserna-översikt av vår nya webbdesign.

Du kan lära dig mer i vår guide om hur man lägger till en mega-meny på din WordPress-sida.

Bonus: Skapa en klibbig flytande navigeringsmeny i WordPress

Du kan också skapa en klistrig flytande navigeringsmeny för din webbplats för att förbättra användarnas engagemang. En klistrig meny förblir synlig på din skärm även när användare skrollar ner på din sida, vilket gör den lättillgänglig för användare.

För att göra din navigeringsmeny klistrig måste du installera och aktivera pluginet Sticky Menu & Sticky Header. För detaljer, se vår steg-för-steg-guide om hur man installerar ett WordPress-plugin.

Efter aktivering, gå till sidan Inställningar » Klibbig meny och skriv #main-navigation bredvid alternativet 'Klibbigt element (krävs)'. På så sätt kan du till och med göra din vertikala navigeringsmeny klibbig.

När du är klar klickar du på ‘Spara ändringar’ för att spara dina inställningar. För fler instruktioner kan du se vår handledning om hur man skapar en klibbig flytande navigeringsmeny i WordPress.

Vi hoppas att den här handledningen hjälpte dig att lära dig hur du skapar en vertikal navigeringsmeny i WordPress. Du kanske också vill lära dig hur man döljer en mobilmeny i WordPress eller vår guide om hur man lägger till ikonbilder med navigeringsmenyer i WordPress.

Om du gillade den här artikeln, prenumerera då på vår YouTube-kanal för WordPress-videoguider. Du kan också hitta oss på Twitter och Facebook.