Så här skapar du en vertikal navigation menu i WordPress

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

Även om horisontella menyer är vanliga, erbjuder en vertikal navigeringsmeny ett unikt och effektivt sätt att organisera webbplatsens 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 in i webbplatsens sidofält och är lättare att navigera i på mobila enheter.

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

Vad är en navigation menu?

En navigation menu är en lista med länkar som pekar på viktiga area på en WordPress website. Menyn presenteras vanligtvis som en horisontell stapel med länkar högst upp på varje page.

Navigation menus ger din site struktur och hjälper besökarna att hitta vad de letar efter. Du kan lägga till länkar till dina viktigaste pages, categories eller topics, WordPress blogginlägg och även lägga till customizers som t.ex. din profil på sociala medier.

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

En vertikal navigation menu tar upp mindre plats på page, är lättare att läsa av och navigera i och kan placeras i sidebar, footer eller till och med som ett popup-fönster, vilket gör den mer flexibel.

Om du till exempel har en butik på nätet kan du med en vertikal navigation menu visa många fler kategorier och produkter utan att det tar upp för mycket utrymme.

Med detta sagt, låt oss ta en titt på ett antal sätt att skapa en vertikal navigation menu i WordPress. Här är de ämnen vi kommer att täcka i den här artikeln:

Prova olika platser för displayen på menyn

När du addar en navigation menu till din website kommer den att visas antingen vertikalt eller horisontellt. Detta beror på ditt theme samt vilken location du väljer för menyn.

Antalet available menu locations beror på vilket theme du använder. Du kanske upptäcker att menyn visas vertikalt på vissa av dessa locations.

För att testa detta med ditt theme, navigera till sidan Appearance ” Menus från WordPress admin sidebar. Här kan du experimentera för att se vilka locations som är available på din website och hur de visas.

Till exempel erbjuder temat Twenty Twenty-One inga vertikala locations, medan temat Twenty Twenty erbjuder en som heter ”Desktop Expanded Menu”.

Du kan helt enkelt selecta den meny som du vill visa vertikalt och sedan kontrollera boxen ”Desktop Expanded Menu” längst ner på vyn.

Efter det måste du se till att klicka på knappen ”Save Menu” för att lagra dina settings. Så här ser det ut på vår demo website.

För mer information om att edit menyer och menu locations, kan du se vår beginner’s guide om hur du lägger till en navigation menu i WordPress.

Lägga till en vertikal navigation menu i sidebaren

Oavsett vilket theme du använder är det enkelt att add to en vertikal navigation menu till sidebaren med hjälp av ett widgetar.

Först måste du skapa en navigation menu som du vill visa om du inte redan har gjort det. Sedan måste du besöka sidan Appearance ” Widgets från WordPress dashboard.

Härifrån klickar du helt enkelt på knappen ”+” högst upp till vänster på sidan och drar blocket Navigation Menu till sidebaren.

Efter det kan du ge widgeten ett namn och välja den meny du vill visa i rullgardinsmenyn. Slutligen klickar du på knappen ”Update” högst upp för att store dina settings.

Så här ser menyn med vertikala sidebar ut på vår demo WordPress blogg.

Skapa en vertikal navigation menu på en post eller page

You can add a vertical navigation menu to posts and pages in a similar way.

Först måste du skapa en new post eller editera en befintlig.

Därefter klickar du på knappen ”+” högst upp på sidan och drar sedan blocket Navigation till sidan.

Därefter väljer du vilken meny som ska visas. Klicka bara på knappen ”Select Menu” i toolbaren och välj önskad menu.

Slutligen måste du titta på inställningarna för block i panelen till höger.

Där hittar du två knappar för orientering av menyn. Du måste klicka på knappen med nedåtpilen för att orientera menyn vertikalt.

När du är klar klickar du på knappen ”Publicera” eller ”Update” för att lagra dina settings.

Lägga till en vertikal navigationsmeny med hjälp av hela Site Editor

Om du använder ett blockbaserat tema kan du enkelt add to den vertikala navigation menu till din site med hjälp av hela Site Editor.

För att göra detta, head över till skärmen Appearance ” Editor från din WordPress dashboard. När du är i Editorn går du vidare och klickar på navigationsmenyn som visas högst upp i webbplatsens header.

Klicka sedan på knappen ”Select Navigation” i toolbaren.

Nu ser du olika alternativ för att customize navigations menyn på panelen till höger.

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

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

Slutligen klickar du på knappen ”Save” för att spara dina Settings. Du har nu add to en vertikal navigation menu till din site.

Skapa en vertikal navigation menu med ett tillägg till Theme Builder

SeedProd är den bästa WordPress page bu ilder och custom theme builder plugin på marknaden. Det tillåter dig att enkelt skapa vertikala menyer var som helst på din WordPress website.

Först måste du installera och aktivera SeedProd plugin. För mer detaljer, se vår guide för nybörjare om hur man installerar ett plugin för WordPress.

Vid aktivering måste du enter din license key. Du hittar den här informationen i ditt account på SeedProds website.

Efter det kan du använda SeedProd för att skapa ett customize WordPress theme.

Skapa ett Custom WordPress Theme

Du hittar SeedProd theme builder genom att navigera till SeedProd ” Theme Builder page. Här kommer du att använda ett av SeedProds färdiga themes som utgångspunkt. Detta kommer att ersätta ditt befintliga WordPress theme med en new, custom design.

Du kan göra det genom att clicka på knappen ”Themes”.

You will then be shown a list of professionally designed themes for different types of websites. Det finns till exempel templates som heter ”Modern Business”, ”Marketing Agency” och ”Mortgage Broker Theme”.

Ta en titt på alternativen och välj ett som bäst matchar dina behov genom att clicka på checkmark-iconen.

När du har valt ett theme kommer SeedProd att generera all templates som du behöver. Du kan lära dig hur du customize dessa templates i vår guide om hur du enkelt skapar ett custom WordPress theme.

Lägga till en vertikal navigation menu i templates på din site

Nu kan du använda SeedProd för att add to en vertikal navigation menu till någon av dina theme templates. I denna tutorial kommer vi att add to en menu till blogg index template.

Du måste hålla musen över den templaten och sedan klicka på länken ”Edit Design”.

Detta öppnar SeedProds drag-and-drop page builder, där du ser en preview av din website till höger och en block panel till vänster.

Härifrån rullar du ner i blocken tills du kommer till Advanced section.

När du har lokaliserat Nav Menu-blocket ska du dra det till din sidebar eller var som helst där du vill visa navigationsmenyn. Som standard finns det bara ett objekt i menyn, ”About”.

Nu måste du ändra inställningar för menyn. För att göra det, click på menyn och de tillgängliga alternativen kommer att visas i den vänstra colonnen.

För närvarande är typen ”Enkel” meny vald. Detta allow you att bygga din egen navigation menu i SeedProd.

I den här tutorialen kommer vi dock att klicka på typen ”WordPress Menu” för att använda WordPress navigation menu istället.

Slutligen måste du clicka på tabben ”Advanced”. Här hittar du ett alternativ för att orientera listans layout vertikalt eller horisontellt.

När du clickar på knappen ”Vertical” kommer du att notice att previewen omedelbart ändras till en vertikal navigation menu.

Glöm inte att klicka på knappen ”Save” högst upp på vyn för att spara din vertikala menu.

Skapa en responsiv vertikal navigation menu för Mobile Devices

Det kan vara svårt att tapa på en standardmeny när man använder den lilla vyn på en smartphone. Därför rekommenderar vi att du previewar den mobila versionen av din WordPress site för att se hur din website ser ut på mobila enheter.

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

För att lära dig hur du gör din navigation menu lättare att använda på mobila enheter, se vår guide om hur du lägger till en fullskärms responsiv meny i WordPress.

Skapa en dropdown-meny i WordPress

En dropdown-meny gillar en vanlig horisontell navigation menu högst upp på vyn. Men när du hoverar med musen över ett av objekten visas en vertikal undermeny.

Om du har en website med mycket content, så tillåter en dropdown-meny dig att organisera menystrukturen efter ämnen eller hierarki. Detta kommer att visa mer content på ett limit utrymme.

För att kunna displayed a dropdown navigation menu on your website, you will need to choose a theme with dropdown menu support. Därefter måste du skapa navigationsmenyn och sedan add to sub-items till några av menu-items.

Du kan lära dig hur du gör det steg för steg i vår guide för nybörjare om hur du skapar en dropdown-meny i WordPress.

Skapa en Mega Menu i WordPress

En megameny listar flera menyer vertikalt över hela page. De liknar dropdown-menyer, förutom att alla undermenyer visas på en gång, vilket gör det möjligt för användare att snabbt och enkelt hitta ditt allra bästa content.

Megamenyer är mycket engagerande och interaktiva eftersom de kombinerar det bästa från horisontella och vertikala menyer för att visa en användbar översikt över innehållet på din website på en enda vy.

Vi har nyligen addat en mega menu till WPBeginner för att förbättra möjligheten att hitta content. Vi förklarar hur vi gjorde detta i vår titt bakom kulisserna på vår nya site design.

Du kan läsa mer i vår guide om hur du lägger till en mega menu på din WordPress site.

Bonus: Skapa en sticky flytande navigation menu i WordPress

Du kan också skapa en sticky flytande navigation menu för din website för att förbättra engagemanget hos användarna. En sticky menu förblir synlig på vyn även när användarna rullar ner på din page, vilket gör den lättåtkomlig för användarna.

För att göra din navigation menu sticky måste du installera och aktivera Sticky Menu & Sticky Header plugin. För detaljer, se vår Step-by-Step guide om hur du installerar ett plugin för WordPress.

Efter aktivering, head över till Settings ” Sticky Menu page och skriv #main-navigation bredvid alternativet ’Sticky Element (obligatorisk)’. På så sätt kan du även göra din vertikala navigation menu sticky.

När du är klar klickar du på ”Save Changes” för att lagra dina inställningar. För mer instruktioner kan du se vår tutorial om hur du skapar en sticky flytande navigation menu i WordPress.

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

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.