Så här skapar du en dropdown-meny i WordPress (Guide för Beginner)

Vill du skapa en dropdown-meny i WordPress?

En dropdown-meny visar en lista med länkar när du hoverar musen över ett menu-item. Du kan använda dessa menyer för att visa många alternativ på en liten yta och hjälpa besökare att hitta vad de letar efter genom att organisera länkar i kategorier.

I denna guide för nybörjare kommer vi att visa you hur du skapar en dropdown-meny i WordPress.

Varför använda dropdown-menyer i WordPress?

WordPress levereras med ett built-in system för hantering av menyer som allow you att enkelt add navigation menyer till your site.

Navigation menus är links till din websites viktigaste pages och visas vanligtvis i en row bredvid din websites logga.

Om du startar en blogg i WordPress eller skapar en website med bara några pages kan det vara bra att skapa din menu som en enda row. Då kan besökarna se alla dina viktiga pages på ett ögonblick.

Men om du run en online store eller en stor website kanske du har massor av content. Att lägga till alla dessa links i menyn kan vara överväldigande och få din site att se rörig ut.

Dropdown-menyer löser detta problem genom att endast visa menylänkar när en visitor hoverar musen över det överordnade objektet. They also allow you to organize your content into topics, categories, or groups. You may even add titles to your menus.

I likhet med vertikala menyer för navigation är de perfekta för att visa mycket content på liten yta.

Med detta sagt, låt oss ta en titt på hur du enkelt kan skapa WordPress dropdown-menyer och sedan add to your website.

Video Tutorial

Subscribe to WPBeginner

Om du inte gillar videoklippet eller behöver fler instruktioner är det bara att fortsätta läsa.

Steg 1: Välja ett theme med stöd för dropdown-menyer

WordPress har ett built-in system för hantering av menyer, men hur dessa menyer ser ut varierar beroende på ditt WordPress theme.

Nästan all themes i WordPress har stöd för dropdown-menyer som standard. Vissa teman kanske dock inte har korrekt stöd för dropdown. Till att börja med måste du se till att ditt theme stöder dropdown-menyer.

Hur vet du om ditt theme stöder dropdown navigation?

Om du downloadade temat från det officiella WordPress repository, besök bara temats page och klicka på knappen ”Preview” för att se en live demo.

Du kan sedan kontrollera om demot innehåller en dropdown-meny.

Om du använder ett premiumtema för WordPress kan utvecklaren ha en live-demo på sin website. Du kan också kontrollera temats dokumentation för mer information.

Om du fortfarande är osäker kan du alltid be utvecklaren om hjälp. För mer information om detta ämne, vänligen se vår guide om hur man korrekt ber om support för WordPress och får det.

Om ditt WordPress-tema inte har stöd för dropdown-menyer måste du hitta ett tema som har det. Du hittar massor av tips i vår guide om hur du väljer det perfekta temat för WordPress.

För att hjälpa you, här är några utmärkta themes som har support för dropdown menyer:

• Astra – Ett mångsidigt WordPress-tema som kommer med flera startwebbplatser och massor av funktioner.
• StudioPress themes – Built on top of the Genesis theme framework, these professional themes should help your website load more quickly.
• OceanWP – Ett populärt theme för WordPress som passar för all slags website.
• Ultra – Detta drag and drop WordPress-tema drivs av Themify-byggaren och kommer med beautiful templates och flexibla alternativ för temat.
• Divi – Ett populärt tema från Elegant Themes som använder page buildern Divi och kommer med massor av drag and drop-funktioner, inklusive dropdown-menyer.

Med detta sagt, låt oss ta en titt på hur man skapar en dropdown WordPress meny.

Step-by-Step 2: Skapa en navigation menu i WordPress

Låt oss börja med att skapa en enkel menu.

Om du redan har skapat en navigation menu på din website kan du hoppa till nästa steg.

För att komma igång går du till Appearance ” Menus i WordPress dashboard och klickar sedan på länken ”Skapa en new menu”.

Obs/observera: Om du ser Appearance ” Editor istället, så betyder det att ditt theme stöder Full Site Editing (Redigering av hela webbplatsen). I så fall kan du hoppa vidare till avsnittet Redigering av hela webbplatsen under.

Därefter måste du skriva in ett namn för navigation menu.

Detta är bara för din referens, så du kan använda vad som helst som hjälper dig att identifiera menyn i WordPress admin area.

När du har skrivit in en rubrik i fältet ”Menu Name” går du vidare och klickar på ”Create Menu”. WordPress kommer nu att skapa en tom meny åt dig.

Därefter måste du add to de länkar som ligger högst upp i navigation menu. Det här är de objekt som kommer att visas i den översta raden i din dropdown-meny och fungera som föräldrar till alla andra inlägg och pages.

I den vänstra columnen kontrollerar du bara boxen bredvid varje page du vill add to. Klicka sedan på knappen ”Add to Menu”.

Dessa pages kommer nu att visas i den högra colonnen under ”Menu structure”.

Du kan också select blogginlägg, kategorier eller add to custom links. För mer detaljerade instruktioner, vänligen se vår guide om hur du lägger till en navigation menu i WordPress.

Step 3: Lägga till underobjekt i en meny

Därefter måste vi add to sub-items som kommer att visas i dropdown-menyn. Du kan add to en underpunkt under vilket befintligt menu-item som helst.

I den här guiden visar vi hur du addar ämneskategorier under ett ”Blogg” menu item, men stegen kommer att vara liknande oavsett vilket content du lägger till.

I den vänstra columnen väljer du all pages du vill add to som sub-items och klickar sedan på knappen ”Add to Menu”. Dina objekt kommer nu att visas i den högra colonnen.

Som standard visas dock alla dessa länkar som vanliga menu-items, vilket innebär att de läggs till i den översta row.

Vi måste göra dem till underobjekt till en parent istället.

Detta gör du genom att dra and drop ett menu-item och placera det under önskad parent. Sedan flyttar du det bara något åt höger så blir det ett underobjekt.

Nu är det bara att upprepa denna process för varje underobjekt som du vill visa i dropdown.

När du är nöjd med hur menyn är uppbyggd, glöm inte att clicka på knappen ”Save menu” för att store dina ändringar.

Steg 4: Publicera din dropdown-meny

Om du editerar en menu som redan är live på din website kommer besökarna att se dina ändringar direkt.

Men om du skapar en new meny måste du välja en location för den menyn.

Varje WordPress-tema har sina egna locations för menyn, som du hittar i ”Menu settings” section på höger sida av vyn. Kontrollera bara boxen bredvid den location som du vill använda och klicka sedan på knappen ”Save Menu”.

Alternativt kan du add to custom navigation menus i your WordPress theme.

När du har gjort det kan du besöka din website för att se dropdown-menyn i action.

Så här skapar du en dropdown-meny med hjälp av Full-Site Editor

Om du använder ett blockbaserat theme som Hestia Pro, kan du add to en dropdown-meny till vilken del som helst av din site med hjälp av full-site editor.

För att komma igång går du bara till Themes ” Editor i WordPress dashboard.

Som standard kommer hela Site Editor att visa ditt temas hemmamall.

För att add to en dropdown menu till en annan del av your website, click on either ’Templates’ or ’Patterns’.

I Editorn visas nu en lista över alla templates eller template-delar som ingår i ditt WordPress theme.

Gå bara vidare och klicka på det area där du vill lägga till dropdown-menyn. Om du till exempel skapar en main menu för navigation, kommer du vanligtvis att vilja välja Header template-delen.

WordPress visar nu en Preview av templates eller template-delar.

För att edit denna template, gå vidare och click på den lilla penna iconen.

När du har gjort det klickar du på den blå ”+” icon i det övre vänstra hörnet.

Skriv ”Navigation” i sökfältet som kommer upp.

När rätt block appear, drag and drop det på din design.

Nu klickar du bara för att selecta det blocket, och du kommer att se alla de olika settings du kan använda för att customize navigation blocket.

You can for instance change the layout, edit the display settings, change the color of the text and background, and adjust the font size.

För att add to pages på högsta nivån till din menu, click simply on the ’+’ button.

I popupen som visas börjar du skriva in rubriken eller URL:en för den page du vill add to. När rätt page dyker upp klickar du på den för att add to menyn.

Upprepa bara denna process för att add to alla objekt på högsta nivån till dropdown-menyn.

När du har gjort det kan du add to en undermeny till vilket objekt som helst.

I menyn till höger klickar du på den prickade ikonen bredvid objektet parent. Välj sedan ”Add submenu link”.

I popupen som visas skriver du in rubriken eller URL:en för den page som du vill visa i dropdown-menyn.

När rätt page visas klickar du på den för att add to den som ett objekt i undermenyn.

Nu upprepar du bara dessa steg för alla objekt som du vill visa i dropdown-menyn.

När du är nöjd med hur menyn är uppbyggd, clickar du på ”Save” för att store dina ändringar.

Nu, om du besöker din website, kommer du att se dropdown-menyn i action.

Tips för att skapa interaktiva dropdown-menyer

Navigation menyer är viktiga eftersom de är det första stället som visitorerna kommer att gå till för att hitta intressant content eller specifik information.

Om du använder dem korrekt hjälper du besökarna att hitta runt på din website. Det kommer också att hjälpa dig att få fler konverteringar och försäljningar samtidigt som du ökar antalet sidvisningar och minskar avvisningsfrekvensen.

Med detta i åtanke får du här några tips på hur du skapar användbara och användarvänliga dropdown-menyer.

1. Skapa dropdown-menyer med flera nivåer

I den här guiden visade vi you hur du skapar en row högst upp och en uppsättning underobjekt. Men du kan också add to ett underobjekt under ett annat underobjekt för att skapa dropdown-menyer på flera nivåer.

Detta kan vara användbart för webbplatser som har mycket content eller många olika kategorier.

Om du till exempel run- der en store på nätet kan du ha en kategori ”Electronics” och en underkategori ”Laptop”. You kan dock också ha ytterligare underkategorier, t.ex. ”Apple laptops” eller ”Väskor och fodral för bärbara datorer”.

I det här fallet kan det vara vettigt att skapa en dropdown på flera nivåer. För att göra detta drar du helt enkelt en page under ett underobjekt och flyttar den något åt höger.

2. Skapa flera dropdown-menyer

Du kan skapa så många dropdown-menyer som du vill och sedan visa dem på olika area på din website. Du kan till exempel skapa en dropdown-meny som bara visar produktkategorier.

Det här är bra för dina produktsidor, men du kanske också vill skapa en unik dropdown-meny för din homepage så att kunderna kan hitta olika area på din site, till exempel kontaktformuläret och bloggen.

Skapa helt enkelt en new dropdown-meny genom att följa samma process som beskrivs ovan och använd sedan inställningarna för ”Location” för att kontrollera var denna dropdown visas på din website.

3. Skapa menyer med en Live Preview

Om det blir för komplicerat att skapa din dropdown-meny i dashboarden kan du byta till WordPress customizer. Gå bara till Appearance ” Customize för att starta live WordPress theme customizer.

Klicka sedan på tabben ”Menus” och välj sedan navigation menu. Du kommer nu att se en drag and drop editor i den vänstra colonnen med en live preview av din site i den högra panelen.

Du kan nu arbeta med din menu och alla ändringar du gör kommer att visas i live preview.

4. Skapa en stor Mega Menu som en dropdown i WordPress

Om du har mycket content kan det vara svårt att organisera det snyggt med hjälp av en vanlig dropdown-meny.

Istället kan du visa hela strukturen på din website som en megameny som bara visas när användare hoverar över main menu.

Mega-menyer liknar en dropdown-meny, men de kan visa många fler links, undermenyer och andra objekt. För detaljerade instruktioner, se vår Step-by-Step tutorial om hur du skapar en mega-meny i WordPress.

4. Exportera dina dropdown-menyer

Runar du flera olika websites i WordPress? I så fall kanske du vill använda samma layout och design för menyn på all your webbplatser.

Den standard WordPress import / exportera funktionen tillåter inte att du importerar och exporterar menyer i sig, men det är möjligt att överföra dina menyer med hjälp av ett plugin.

För detaljerade Step-by-Step instruktioner, vänligen se vår guide om hur man importerar och exporterar navigation menyer i WordPress.

Vi hoppas att den här artikeln hjälpte dig att lära dig hur du enkelt skapar en dropdown-meny i WordPress. Du kanske också vill se vår guide om hur du lägger till ett sökfält i din meny, eller kontrollera vårt expertval av de bästa tutorials för att bemästra WordPress navigation menyer.

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.