En rullgardinsmeny är ett grafiskt användargränssnitt (GUI) element på en webbplats som avslöjar ytterligare navigeringsalternativ när en användare klickar på eller håller muspekaren över ett menyalternativ. Dess primära syfte är att förhindra röran samtidigt som man håller en webbplatss menyer organiserade, tillgängliga och användarvänliga.
För att skapa rullgardinsmenyer för WordPress (WP) måste du först skapa en huvudnavigeringsmeny – vilket vanligtvis är din webbplats huvudmeny, men det kan också vara en sidfotsmeny eller en annan extra meny.
När du har fått det på plats finns det tre enkla sätt att skapa en rullgardinsmeny i WordPress: via hela webbplatsredigeraren, via WP Admin-menyn och via plugins.
Hur man skapar rullgardinsmenyer i WordPress med den fullständiga webbplatsredigeraren
Obs: Det här exemplet använder ett gratis WordPress-tema som heter Twenty Twenty-Three, som är kompatibelt med den senaste versionen av WP och även stöder fullständig webbplatsredigering (FSE).
Först, navigera till Utseende > Redaktör från vänster sida av din WordPress-instrumentpanel.
Tänk på att om du ser Utseende > Menyer i stället för Utseende > Redaktörbetyder det att ditt huvudsakliga WordPress-tema inte stöder fullständig webbplatsredigering (FSE). I så fall kanske du vill gå vidare till avsnittet nedan för att skapa en klassisk WordPress-rullgardinsmeny.
Hur som helst, för att börja lägga till en rullgardinsmeny med FSE-metoden, välj Mallar eller Mönster från blockredigerarens huvudmeny.
WordPress kommer nu att visa alla mallar, malldelar och mönster som finns på din webbplats. För att lägga till en ny meny, klicka på delen med namnet på området där du vill lägga till den. Om du till exempel vill skapa en huvudnavigeringsmeny, välj helt enkelt Rubrik del.
Redaktören kommer att visa en förhandsvisning av valfri vald del. För att redigera den klickar du på pennikonen till höger om titeln – eller i det här fallet, Rubrik.
När det är klart klickar du på plusikonen i det övre vänstra hörnet för att växla blockinfogaren.
Skriv “Navigering” i sökfältet som visas.
När Navigering blocket visas, använd dra-och-släpp-metoden för att flytta det till önskad plats på höger sida i blockredigerarens huvudarbetsområde.
Klicka sedan på det nyligen tillagda menynavigeringsblocket för att välja det och klicka på Inställningar ikonen i det övre högra hörnet. Här kan du välja Redskap ikonen för att anpassa menyns motivering, orientering, visning och mobilöverlagring.
Du kan växla Stilar i det övre högra hörnet för att ytterligare anpassa stilar, teckensnitt, färger och layout för den valda menyn.
För att lägga till objekt på toppnivå till din meny, se till Listvy är inkopplad under huvudledningen Inställningaroch klicka sedan på Plus knapp. De Listvy ikonen ser ut som tre överlappande linjer och är placerad till vänster om Redskap ikonen under huvudet Inställningar i blockredigeraren.
Klicka på när du är klar Sidlänk.
Börja skriva in namnet på sidan du vill visa som ett menyalternativ på toppnivån i din nyskapade huvudnavigeringsmeny i kortet som visas. Klicka på motsvarande titel eller URL när den visas under sökrutan.
Upprepa detta steg så många gånger du behöver tills du är nöjd med dina menyalternativ på högsta nivån. När du är klar kan du gå vidare och fokusera på att lägga till undermenyobjekt. Välj menyalternativet som du vill ska ha en undermeny, klicka på de tre prickarna till höger om den och klicka sedan Lägg till länk till undermeny.
När uppmaningskortet visas klickar du för att lägga till ditt föredragna undermenyobjekt med samma metoder som ovan.
Återigen, upprepa detta steg för att lägga till så många undermenyalternativ du vill. När du är nöjd med antalet objekt i din nya meny, klicka Spara för att spara dina ändringar.
Tänk på att om ditt FSE-kompatibla tema inte är aktivt kommer knappen att läsa Aktivera och spara istället för bara Spara. Du måste aktivera ditt tema och spara dina menyparametrar för att se ändringarna som återspeglas på din webbplats.
Använder du ett klassiskt tema? Skapa rullgardinsmenyer i WP Admin
Om du inte kan eller vill använda FSE, de flesta klassiska WordPress-teman – inklusive Astra, Neveoch OceanWP-stöd för att skapa rullgardinsmenyer via WP Admin-instrumentpanelen.
För att börja, navigera till Utseende > Menyer på vänster sida av din WordPress-instrumentpanel och klicka på hyperlänken som läser skapa en ny meny.
Nästa steg måste du skapa ett namn för din huvudnavigeringsmeny. Tänk på att det här namnet kommer att användas i området för administratörspanelen, men inte på din webbplats.
När du har namngett din nya meny klickar du på Skapa meny knapp. WordPress kommer automatiskt att skapa en ny meny åt dig. Om du avser att detta ska vara din primära meny, markera rutan bredvid Primär meny i Menyinställningar område.
Därefter måste du lägga till objekt till din nya meny. Dessa objekt kommer att visas direkt under din huvudnavigeringsmeny och kommer att fungera som överordnade länkar till alla andra angivna sidor, inlägg, målsidor, anpassade länkar och kategorier.
Från den vänstra kolumnen markerar du rutan bredvid varje objekt som du vill lägga till i din nya meny. Klick Lägg till i menyn och WordPress kommer automatiskt att lägga till dina valda objekt till den nya menyn.
Dina objekt kommer nu att visas i den högra kolumnen, men de visas som vanliga menyalternativ i den översta raden som standard. För att göra dem till undermenyobjekt, dra och släpp dem under det överordnade menyalternativet du väljer. Flytta den sedan något åt höger för att det önskade objektet ska bli ett undermenyobjekt. Glöm inte att klicka Menyn Spara för att spara dina ändringar när du är klar.
Förutsatt att du har valt den nya menyn som din primära, sekundära eller sidfotsmeny, bör du nu kunna besöka din webbplats och se hur menyn ser ut i frontend.
Bästa plugins för att skapa rullgardinsmenyer i WordPress
Ett annat enkelt alternativ för att skapa rullgardinsmenyer i WordPress kommer med hjälp av tredjepartsplugins som erbjuds direkt på plattformen. Det finns flera menyplugins att välja mellan, och du kan hitta alla som du laddar ner under Plugins på vänster sida av din WordPress-instrumentpanel.
Två solida alternativ att prova är Max Mega Menu och Responsive Menu. Om du är orolig för WordPress-prissättning, har den förra en gratisversion med grundläggande support.
Max Mega Meny
Max Mega Meny är en komplett menyhanteringslösning som låter dig konvertera dina befintliga menyer till mycket större menyer. Förutom att skapa rullgardinsmenyer kan du också lägga till valfri WordPress-widget till din meny, styla om den och justera dess beteende hur du vill.
Några av Max Mega Menus huvudfunktioner inkluderar:
- Kompatibilitet med det befintliga WordPress-menysystemet
- Stöd för flera menyplatser
- Stöd för individuella konfigurationer av varje meny
- Full anpassningsbarhet av menylayouter och stilar
- Stöd för flera menyövergångar såsom fade, fade up, slide up och slide sub
Den här menybyggaren stöder även tillgänglighetsfunktioner med inbyggd tangentbordsnavigering för följande tangenter:
- FLIK. Slår på tangentbordsnavigering och navigerar till nästa element i menyn.
- SKRIVA IN, UTRYMME. Visar eller döljer undermenyn – så länge som pilindikatorn på en undermeny är markerad.
- FLY. Stänger alla undermenyer.
För att ladda ner, installera och aktivera Max Mega Menu-plugin, navigera till Plugins > Lägg till ny > Plugins och skriv “Max Mega Menu” i sökfältet och klicka sedan Installera nu på motsvarande plugin-kort.
Gå sedan till Utseende > Menyervälj din föredragna meny och tilldela den till en av visningsplatserna som erbjuds av WordPress. Klick Menyn Spara för att aktivera insticksprogrammets inställningar.
För att aktivera menyn, markera rutan Aktivera i den vänstra kolumnen under Max Mega Menyinställningar.
Håll sedan muspekaren över objektet du vill konvertera till en megameny i den högra kolumnen och klicka på den blå Mega meny knappen som visas.
Här bör undermenyalternativen ställas in i Flyout-läge som standard. För att konvertera dem till en megameny, klicka på Mega Meny – Rutnätslayout. Detta bör göra att alla menyalternativ visas i rutnätslayoutredigeraren som helt anpassningsbara rutor – som du sedan kan dra och släppa i befintliga eller nya kolumner och rader enligt dina önskemål.
Slutligen, glöm inte att du också kan lägga till en mängd olika widgets till dina megamenyer.
Responsiv meny
Responsiv meny är ett mycket anpassningsbart menyplugin för WordPress, med mer än 150 alternativ för att skapa den perfekta navigeringen för din webbplats. Insticksprogrammet kommer med ett intuitivt användargränssnitt och det kräver inga förkunskaper om kodning för att kunna använda.
Några av funktionerna i Responsive Menu inkluderar:
- Fullständiga anpassningsalternativ för text, bakgrund och kantfärg
- Anpassbarhet för teckensnitt, teckenstorlek och textjustering
- Flera undermenyalternativ för djupvisning
- Flera anpassade menyutlösare förmågor
- Ett brett utbud av menyanimationer
För att skapa nya rullgardinsmenyer med Responsive Menu, gå till Plugins > Lägg till nya plugins och skriv “Responsiv meny” i sökfältet. Klick Installera nu på tillhörande plugin-kort.
Nästa, navigera till Plugins > Installerade plugins på vänster sida i din WP-instrumentpanel, lokalisera Responsiv menyoch klicka Aktivera.
När du har aktiverat plugin-programmet, navigera till Utseende > Menyer och välj fliken Hantera platser. Därifrån tilldelar du den nya menyn till din föredragna plats. Du kan välja vilken plats som helst bland de primära, sekundära och sidfotsalternativen så länge ditt tema stödjer det.
När det är klart, navigera till Responsiv meny > Menyer och klicka Skapa ny meny.
Välj ett menytema och klicka Nästa.
I den Menyinställningar fliken, se till att namnge din nya meny och mappa din befintliga WordPress-meny till den. Klicka slutligen Skapa meny.
Var nu medveten om att din befintliga WordPress-temameny kan överlappa din nya responsiva meny.
För att lösa detta, högerklicka på den befintliga WordPress-menyn och klicka Inspektera. Nu måste du identifiera och kopiera din befintliga CSS-menyväljare, så gå till Inställningar > Allmänna inställningar på vänster kolumn och klistra in menyväljaren i Dölj temamenyn textfält.
Den befintliga menyväljaren kommer att vara olika för varje WordPress-tema.
När du är nöjd med din nya meny klickar du Uppdatera för att spara ändringarna.
Sammanfattning
Rullgardinsmenyer kan vara ett utmärkt verktyg för att peka din webbplats besökare till rätt sidor utan att offra den befintliga designen av ditt WordPress-tema. Du kan bygga rullgardinsmenyer på WordPress på tre huvudsakliga sätt: via den fullständiga webbplatsredigeraren (FSE), via den inbyggda WP-adminmenypanelen och via WordPress-plugins från tredje part som Max Mega Menu och Responsive Menu.
Om du gillade den här guiden kanske du också skulle vilja läsa hur du bygger en WordPress-webbplats i fem enkla steg.
