Hur man skapar en rullgardinsmeny i WordPress (nybörjarhandbok)

Vill du skapa en rullgardinsmeny och lägga till den till din WordPress-webbplats?


En rullgardinsmeny visar en lista med länkar när du tar musen över ett objekt på menyn.

Vi använder en rullgardinsmeny på WPBeginner, fortsätt och ta musen över navigationsmenyn ovanpå.

I den här nybörjarguiden visar vi dig hur du enkelt kan skapa en rullgardinsmeny i WordPress med steg för steg-instruktioner.

Skapa en rullgardinsmeny i WordPress

Varför använda rullgardinsmenyer i WordPress?

WordPress kommer med ett inbyggt menyhanteringssystem som gör att du enkelt kan lägga till navigationsmenyer på din WordPress-webbplats.

Navigationsmenyer är länkar till huvudsidorna på din webbplats som vanligtvis visas överst som en horisontell rad bredvid webbplatsens logotyp.

Typisk navigationsmeny med en horisontell rad med länkar

Om du startar en blogg eller skapar en webbplats med bara några sidor kan du lägga till dem i en rad.

Men om du driver en onlinebutik eller en stor webbplats, kanske du vill lägga till fler länkar till navigationsmenyn.

Listruta-menyer hjälper dig att lösa problemet med begränsat utrymme genom att bara visa menylänkar när användare tar musen över till ett överordnat objekt. De tillåter dig också att organisera menystrukturen efter ämnen eller hierarki.

Exempel på rullgardinsmeny

Slutligen ser de också ganska trevliga ut.

Med det sagt, låt oss nu titta på hur du enkelt kan skapa WordPress-rullgardinsmenyer och lägga till dem på din webbplats.

Videohandledning

Prenumerera på WPBeginner

Om du inte gillar videon eller behöver fler instruktioner fortsätter du att läsa.

Steg 1. Välja ett tema med rullgardinsmenysupport

WordPress kommer med ett inbyggt menyhanteringssystem men visning av dessa menyer är helt beroende av ditt WordPress-tema.

Nästan alla WordPress-teman stöder rullgardinsmenyer som standard. Vissa teman kanske dock inte har korrekt menysupport.

Du måste se till att du använder ett WordPress-tema som stöder rullgardinsmenyer.

Hur vet du om temat du använder stöder rullgardinsmenyn?

Du kan helt enkelt besöka temas webbplats där du hittar en länk till tematets demo. Därifrån kan du se om demon visar en rullgardinsmeny i navigationsmenyn.

Om det inte är det, måste du hitta ett WordPress-tema som gör det.

Se vår guide om hur du väljer det perfekta WordPress-temat för din webbplats.

Här är några utmärkta teman som stöder rullgardinsmenyn ur rutan.

  • Astra – Det är ett mångsidigt WordPress-tema som kommer med flera startsidor och massor av funktioner.
  • StudioPress-teman – Dessa professionella teman är byggda utifrån ramverket för genesis-temat och är mycket optimerade för prestanda.
  • OceanWP – Ett populärt WordPress-tema som passar alla typer av webbplatser.
  • Ultra – Powered by Themify builder. Detta drag-and-drop WordPress-tema kommer med vackra mallar och flexibla temalternativ.
  • Divi – populärt tema av eleganta teman som använder Divi-sidbyggaren och kommer med massor av drag & släppfunktioner inklusive rullgardinsmenyer.

Med det sagt, låt oss nu titta på hur du skapar en nedrullningsbar WordPress-meny.

Steg 1. Skapa en navigationsmeny i WordPress

Om du redan har skapat en navigationsmeny på din webbplats kan du hoppa till nästa steg.

Låt oss skapa en enkel meny först.

Gå till Utseende »Menyer och klicka på länken “Skapa en ny meny” längst upp.

Skapa en meny

Därefter måste du ange ett namn för din navigationsmeny. Detta namn kommer inte att synas offentligt på din webbplats. Syftet med menynamnet är att hjälpa dig att identifiera menyn i WordPress admin-området.

Menynamn

Ange ett namn på menyn och klicka sedan på knappen “Skapa meny”.

WordPress skapar nu en ny tom meny åt dig.

Låt oss lägga till de översta länkarna till navigationsmenyn. Dessa objekt visas i den övre raden på din meny.

Välj bara de sidor du vill lägga till från vänster kolumn och klicka på knappen “Lägg till i menyn”. Du kan också välja blogginlägg, kategorier eller lägga till anpassade länkar.

Lägg till sidor i menyn

Du kommer nu att se dessa sidor visas i den högra kolumnen under din nya meny.

Steg 2. Lägga till underobjekt till en meny

Underobjekt är de objekt som kommer att visas i rullgardinsmenyn. Beroende på hur du vill organisera dina menyer kan du lägga till dem under någon av de befintliga artiklarna.

För denna tutorial kommer vi att lägga till kategorier under blogglänken.

Välj bara de objekt du vill lägga till från vänster kolumn och klicka sedan på knappen “Lägg till i menyn”. Dina artiklar visas nu i den högra kolumnen.

Nya menyposter lagt till i menyn

Dessa länkar kommer dock att visas som vanliga artiklar. Vi måste göra dem till ett underobjekt i en överordnad meny.

Du kan helt enkelt dra och släppa ett menyalternativ och placera det under överordnade objekt. Flytta den något åt ​​höger, så blir den en underpost.

Lägga till undermenyobjekt för att skapa en rullgardinsmeny

Upprepa processen för alla länkar som du vill visa under rullgardinsmenyn.

När du är klar, glöm inte att klicka på knappen “Spara meny” för att lagra dina ändringar.

Steg 3. Publicera din rullgardinsmeny

Om du redigerar en meny som redan finns på din webbplats kommer den att börja visas på din webbplats direkt.

Men om det är ett nytt menyalternativ, måste du nu välja en temaläge för att visa denna meny.

WordPress-teman kan visa menyer på olika platser. Varje tema definierar sina egna menyplatser, och du kan välja vilken meny du vill visa där.

Det här alternativet hittar du i den högra kolumnen under ‘Menyinställningar’. Välj ett alternativ bredvid inställningen ‘Visa plats’ och klicka på knappen ‘Spara meny’.

Välj temaläge

Du kan nu besöka din webbplats för att se din rullgardinsmeny i aktion.

Förhandsvisning av rullgardinsmenyn

Tips om hur du skapar interaktiva rullgardinsmenyer

Navigationsmenyer är viktiga eftersom det här är första platsen som dina användare kommer att se om de vill se specifik information.

Att använda dem korrekt hjälper dina användare att hitta sin väg runt din webbplats. Det hjälper dig också att få fler sidvisningar, omvandlingar och försäljning på din webbplats.

Här är några tips för att göra dina navigationsmenyer mer interaktiva med rullgardinsmenyer.

1. Du kan skapa rullgardinsmenyer på flera nivåer

Att göra en länk till ett underobjekt i en annan länk får den att visas i rullgardinsmenyn. Du kan också lägga till ett underobjekt under ett annat underobjekt för att skapa rullgardinsmenyer på flera nivåer.

Menyer på flera nivåer

Ditt tema visar dem automatiskt som en undermeny i rullgardinsmenyn.

Menyn på flera nivåer

2. Du kan också skapa flera rullgardinsmenyer

Du kan skapa en rullgardinsmeny under valfri topplänk i menyn. Du kan till och med lägga till flera rullgardinsmenyer i din huvudnavigeringsmeny.

Flera rullgardinsmenyer i huvudmenyn

3. Skapa menyer med en direktförhandsvisning

Om din meny blir för komplicerad kan du växla till den visuella förhandsvisningen. Gå till Utseende »Anpassa för att starta anpassningen av live-tema.

Därifrån klickar du på fliken ‘Menyer’ och väljer sedan navigationsmenyn. Nu ser du en dra och släpp menyredigerare i den vänstra kolumnen med en direkt förhandsvisning av din webbplats i den högra panelen.

Anpassa WordPress-menyer med en direktförhandsvisning

4. Skapa en stor mega-meny som dropdown i WordPress

I rullgardinsmenyerna visas bara en rullgardin i taget. Vad händer om du ville visa hela webbplatsens struktur som en mega-meny som bara visas när användare håller muspekaren på huvudmenyn?

Exempel på Mega-meny

Mega-menyer visas som en rullgardinsmeny, men de kan visa mycket fler länkar, undermenyer och mer. För detaljerade instruktioner, se vår steg-för-steg-tutorial om hur du skapar en mega-meny i WordPress.

Vi hoppas att den här artikeln hjälpte dig att lära dig hur du enkelt skapar en rullgardinsmeny i WordPress. Du kanske också vill se vår guide om hur du skapar en klibbig flytande navigationsmeny i WordPress och hur du lägger till bildikoner till navigationsmenyerna i WordPress.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map