Hur man lägger till en megameny på din WordPress-webbplats (steg för steg)

Mega-menyer låter dig visa en mängd olika länkar och innehållskategorier i en strukturerad, lättnavigerad layout.

Detta kan avsevärt förbättra besökarnas surfupplevelse genom att göra din webbplats navigering mer intuitiv och tillgänglig.

På WPBeginner använder vi en megameny för att visa våra viktigaste länkar högst upp på sidan. När användare klickar på den öppnas en rullgardinsmeny som avslöjar ytterligare viktiga länkar. Denna konfiguration har gjort det möjligt för oss att skapa en ren och organiserad navigeringsmeny, som presenterar ett brett utbud av alternativ utan att sidan ser rörig ut.

I den här artikeln visar vi dig hur du enkelt lägger till en mega-meny på din WordPress-webbplats, steg för steg.

Varför lägga till en mega meny på din WordPress-webbplats?

WordPress levereras med en dra-och-släpp-byggare som du kan använda för att skapa alla typer av menyer, inklusive rullgardinsmenyer, sidhuvudmenyer och mer. Det finns till och med plugins som låter dig skapa anpassade navigeringsmenyer i WordPress-teman.

Men om din webbplats har mycket innehåll kan du behöva skapa en megameny istället. Detta låter dig lägga till rullgardinsmenyer med flera kolumner till den vanliga WordPress-menystrukturen.

Du kan använda megamenyer för att organisera ditt innehåll under olika rubriker och underrubriker, så att besökare snabbt kan hitta vad de letar efter. Om du till exempel skapar en online marknadsplats kan du ordna alla dina produktkategorier och underkategorier i en megameny.

Megamenyer kan också visa rikt innehåll för dina besökare, såsom videor, text, sök och senaste inlägg.

Du kan också lägga till bilder, vilket gör mega-menyer lättare att skanna.

Med det sagt, låt oss se hur du enkelt kan lägga till en megameny på din WordPress-webbplats.

Hur man skapar en megameny för din WordPress-webbplats

Det enklaste sättet att lägga till en megameny på din WordPress-webbplats är att använda Max Mega Menu. Detta plugin låter dig lägga till rikt innehåll i dina megamenyer, inklusive videor, bildgallerier, sök och mer.

På så sätt kan du skapa mer engagerande och hjälpsamma menyer.

Du kan också ändra menyformatet genom att lägga till olika färger, ändra teckenstorlek och använda olika ikoner.

Först måste du installera och aktivera pluginet. Om du behöver hjälp, se vår guide om hur man installerar ett WordPress-plugin.

Aktivera mega menyer på din WordPress-webbplats

Efter aktivering, gå till sidan Mega Menu » Menyplatser från WordPress-instrumentpanelen för att se alla olika områden där du kan lägga till en megameny.

Du kan se olika alternativ beroende på ditt WordPress-tema.

För att börja måste du aktivera megamenyer på alla platser där du vill använda dem.

För att göra detta, klicka helt enkelt för att expandera en plats och markera sedan dess 'Aktiverad'-ruta.

Därefter kan du ändra 'Event' som öppnar megamenyn.

Standardinställningen är 'Hover intent', vilket innebär att besökaren måste hålla muspekaren över megamenyn i några sekunder för att aktivera den. Detta fungerar bra för de flesta WordPress-webbplatser, men du kan också öppna rullgardinsmenyn 'Effect' och välja 'Hover' eller 'Click' istället.

Om du väljer 'Click' måste besökaren klicka för att utforska megamenyn. Detta kan vara användbart om du är orolig för att besökare kan aktivera menyn av misstag, vilket kan vara frustrerande.

Under tiden öppnar 'Hover' din mega-meny så snart besökaren för muspekaren över den. Detta kan uppmuntra besökare att utforska olika områden på din webbplats, så du kanske vill använda 'Hover' på landningssidor eller din webbplats startsida.

Efter att ha fattat detta beslut kan du ändra hur menyn öppnas med hjälp av inställningarna för 'Effekt'.

Max Mega Menu har olika animationer du kan prova, inklusive tona ut och glida upp. Du kan också ändra animationens hastighet. Genom att prova olika animationer kan du skapa en megameny som fångar besökarens uppmärksamhet.

Om du inte vill använda några animationer, öppna helt enkelt den första rullgardinsmenyn och välj 'Ingen'.

Som standard använder Mega Menu inga animationer på mobila enheter, eftersom smartphones och surfplattor vanligtvis har mindre processorkraft. Men om du vill skapa en unik animation för mobilbesökare kan du använda inställningarna i området 'Effekt (mobil)'.

Om du vill testa dina megamenyer på mobilen, kolla in vår guide om hur man visar mobilversionen av WordPress-webbplatser från en stationär dator.

Om du valde 'Click' från rullgardinsmenyn 'Event', se till att du väljer fliken 'Advanced' härnäst.

Här kan du använda 'Klickhändelsebeteende' för att definiera vad som händer när besökaren klickar på din mega-meny. Till exempel kan det andra klicket stänga menyn eller öppna en ny länk.

Det finns fler inställningar du kan titta igenom, men detta bör räcka för de flesta WordPress-bloggar och webbplatser.

När du är nöjd med hur pluginet är konfigurerat, klicka på 'Spara ändringar'.

För att aktivera megamenyer för fler platser, följ bara samma process som beskrivs ovan.

Anpassa hur megamenyerna ser ut på din webbplats

Nästa steg är att konfigurera hur megamenyerna kommer att se ut på din webbplats.

Du kan göra detta genom att välja fliken 'Menu Themes' till vänster på skärmen.

På den här skärmen kan du ändra riktningen på pilikonerna, använda en annan radhöjd, lägga till en skugga och mer.

När du är nöjd med dina inställningar, glöm inte att klicka på 'Spara ändringar'.

Om du vill ta bort dessa ändringar när som helst, markera helt enkelt rutan 'Reset Widget Styling' och klicka sedan på 'Save Changes.'

Därefter kan du anpassa menyraden, som är den rad besökare ser när menyn är i sitt standardmässiga, hopfällda läge.

För att göra dessa ändringar, klicka på fliken 'Menyrad' och använd sedan inställningarna för att ändra bakgrundsfärgen, stoppning, kantradie och mer.

Du kan till och med skapa en färggradient genom att välja två olika färger i avsnittet 'Menybakgrund'.

Om du skrollar ner kan du ändra hur toppnivåmenyn ser ut.

Detta är den första raden med objekt, som är synlig när megamenyn är i sitt hopfällda läge.

Eftersom de är så viktiga, kanske du vill att menyalternativen på toppnivå ska sticka ut.

Till exempel, i följande bild använder vi en annan bakgrundsfärg.

I avsnittet 'Hover State' kan du markera det för närvarande valda menyalternativet på toppnivå.

Till exempel, i följande bild använder vi en understrykningseffekt.

Detta kan hjälpa besökaren att se var de befinner sig i menyn, vilket gör den särskilt användbar för webbplatser som behöver ha stora mega menyer.

Om du lägger till ett hovringstillstånd, scrolla sedan till botten av skärmen och markera rutan 'Markera aktuellt objekt'.

Därefter kan du ändra hur undermenyn ser ut.

Detta är menyn som visas under en toppnivåförälder, som du kan se i följande bild.

För att anpassa undermenyn, klicka på fliken 'Mega Menus'.

Du kan nu använda dessa inställningar för att ändra bakgrundsfärgen på undermenyn, öka radien för att skapa rundade hörn, lägga till stoppning och mer.

Du lägger till innehåll i dina megamenyer med hjälp av widgets. Du kan till exempel lägga till en Gallerividget och visa dina mest populära WooCommerce-produkter, eller bädda in en taggmoln inuti megamenyn. Dessa widgets kan ge extra information eller uppmuntra besökare att klicka på vissa menyalternativ.

Du kan anpassa hur dessa widgets kommer att se ut genom att skrolla till sektionen ‘Widgets’. Du kan till exempel ändra färgen på widgetens titel, öka teckenstorleken, lägga till marginaler och justera justeringen.

På den här skärmen kan du också anpassa hur undermenyposter och tredje nivåns menyalternativ kommer att se ut på din webbplats, blogg eller online marknadsplats. Dessa är barnen till toppnivåns menyalternativ.

När du bygger dina menyer är det möjligt att lägga till fyra eller till och med fler nivåer för att skapa en nästlad megameny. Om du gör detta kommer WordPress helt enkelt att använda stilarna för tredje nivån för alla efterföljande nivåer.

Du kan se detta i praktiken i följande bild. Andra nivån har röd text, och både tredje och fjärde nivån använder samma blå text.

När du är nöjd med hur menyn är inställd, glöm inte att klicka på 'Spara ändringar'.

Hur man lägger till en megameny på din WordPress-webbplats

När du har anpassat megamenyn är det dags att lägga till den på din webbplats.

Gå helt enkelt till sidan Utseende » Menyer från admin-sidofältet.

Om du vill förvandla en befintlig meny till en mega-meny, öppna rullgardinsmenyn 'Välj en meny att redigera' och välj den från listan. Var bara medveten om att menyn du väljer måste vara tilldelad en plats där du har aktiverat mega-menyfunktionen.

Om du vill börja från början, klicka på 'Skapa en ny meny' och skriv sedan en titel för din nya mega-meny.

Du kan sedan välja den plats du vill använda och klicka på 'Create Menu'. Återigen måste detta vara en plats där du har aktiverat megamenyer.

Lägg till innehåll i din WordPress-meny

Lägg sedan till alla sidor, inlägg, WooCommerce-produkter och annat innehåll du vill inkludera i megamenyn.

För steg-för-steg-instruktioner, se vår nybörjarguide om hur man lägger till en navigeringsmeny i WordPress.

Därefter behöver du ordna dina objekt i de föräldrar och undermenyer du vill använda i megamenyn. För att skapa en undermeny, dra ett objekt under föräldern och dra det sedan något åt höger innan du släpper det.

För att skapa flera nivåer, dra helt enkelt objekten åt höger så att de visas indragna under varandra. Detta liknar att skapa en rullgardinsmeny i WordPress.

Aktivera megamenyfunktionen

När du är klar, klicka för att expandera 'Max Mega Menu Settings' och markera rutan bredvid 'Enable.'

I den här rutan kan du också åsidosätta standardinställningarna för megamenyn. Detta gör att du kan skapa unika megamenyer för olika områden på din WordPress-webbplats, så fortsätt och gör de ändringar du vill.

Klicka sedan på 'Spara'.

Skapa megamenyns layout

Håll nu musen över det första toppnivåobjektet och du kommer att se en ny knapp 'Mega Menu'. Klicka på knappen.

Du kommer nu att se alla inställningar för detta objekt på toppnivå.

Som standard använder Max Mega Menu flyout-stilen, där undermenyerna 'flyger ut' från sidan. För att skapa en megameny istället, öppna rullgardinsmenyn 'Undermenydens visningsläge' och välj antingen 'Standardlayout' eller 'Rutnätslayout'.

Standardlayouten visar alla undermenyer i kolumner.

Under tiden låter rutnätslayouten dig organisera undermenyobjekt i kolumner och rader.

Detta är idealiskt om du vill visa mycket innehåll, som alla digitala produkter i din webbutik, eller om du har en mycket specifik layout i åtanke.

Efter att ha valt standard- eller rutnätslayouten ser du alla undermenyer som är tilldelade denna förälder.

Nu kan du fortsätta och ändra hur dessa objekt är arrangerade i megamenyn.

Om du använder standardlayouten kan du ändra antalet kolumner med hjälp av rullgardinsmenyn i det övre högra hörnet.

Om du använder en rutnätslayout kan du lägga till kolumner och rader med knapparna '+Kolumn' och '+Rad'.

När du är nöjd med layouten kan du ordna undermenyobjekten i olika kolumner och rader med dra och släpp.

Därefter är det dags att ändra hur mycket utrymme varje objekt tar upp i kolumnen. Max Mega Menu visar den aktuella storleken som en bråkdel av den totala tillgängliga bredden.

Till exempel, i följande bild, tar båda kolumnerna upp hälften av den tillgängliga ytan.

För att ändra storleken på ett objekt, klicka bara på dess pilar för att göra bråket större eller mindre.

Skapa en mobilvänlig megameny (endast rutnätslayout)

Som standard kommer Max Mega Menu att visa samma innehåll på stationära och mobila enheter. Detta kan vara ett problem med rutnätslayouter, eftersom smartphones och surfplattor vanligtvis har mindre skärmar, och horisontell skrollning kan vara svår.

Om du använder rutnätslayouten kan du skapa olika megamenyer för mobila enheter. Du kan till exempel använda färre kolumner så att användarna inte behöver scrolla horisontellt. På så sätt kan du skapa en mobilklar WordPress-meny.

Du kan dölja hela kolumner eller rader med ikonen ‘Dold på mobil’, som ser ut som en liten mobiltelefon.

Växla helt enkelt ikonen på och av för att dölja och visa olika innehåll på dator och mobil.

Lägg till rikt innehåll med Mega Menu-widgets

När det är gjort kan du börja lägga till widgets i megamenyn. Detta gör att du kan visa extra innehåll i undermenyn, som senaste kommentarer, videor, gallerier och mer.

Du kan till exempel använda bilder för att marknadsföra en rea i din webbutik eller lyfta fram dina senaste produkter.

För att lägga till en widget, klicka helt enkelt för att öppna rullgardinsmenyn 'Välj en widget...'.

Du kan nu välja en widget från listan.

WordPress kommer automatiskt att lägga till widgeten i en kolumn eller rad, men du kan flytta den till en ny plats med dra-och-släpp.

För att konfigurera widgeten, klicka på dess lilla skiftnyckelikon.

Detta öppnar ett popup-fönster där du kan lägga till innehåll i widgeten och ändra dess inställningar.

Du kommer att se olika alternativ beroende på vilken typ av widget du skapar. Om du till exempel lägger till en widget för ljudmusikspelare i megamenyn, kommer du att se inställningar där du kan ladda upp ett ljudspår.

Alla widgets har ett fält för 'Titel' där du kan lägga till text som visas ovanför widgeten.

När du är klar klickar du på ‘Spara’ för att lagra dina ändringar och väljer sedan ‘Stäng’. För att lägga till fler widgets i megamenyn följer du helt enkelt samma process som beskrivs ovan.

Granska standardinställningarna för mega menyn

Klicka sedan bara på fliken ‘Inställningar’.

Här kan du använda kryssrutor för att dölja eller visa olika innehåll i undermenyn.

Du kan också dölja eller visa undermenyn på mobila enheter och stationära datorer, och ändra justeringen så att undermenyn öppnas till vänster eller höger om toppnivåföräldern.

Om du gör några ändringar i standardinställningarna, glöm inte att klicka på 'Spara ändringar'.

Lägg till bildikoner i WordPress megameny

Bildikoner hjälper besökare att förstå vad ett menyalternativ handlar om, utan att ens behöva läsa navigeringsetiketten. Detta är särskilt användbart för stora menyer där en besökare kan föredra att snabbt skanna innehållet snarare än att läsa varje navigeringsetikett.

Du kan använda ikoner för att få det viktigaste innehållet att sticka ut. Du kan till exempel uppmuntra besökare att slutföra sitt köp genom att lägga till en kundvagnsikon i menyn ‘Kassa’.

För att lägga till bildikoner i din navigeringsmeny, klicka på fliken 'Icon'.

Du kan nu välja valfri dash-ikon från det inbyggda biblioteket eller använda din egen bild. Om du uppgraderar till Max Mega Menu Pro får du även tillgång till andra ikonfonter, Genericons och FontAwesome.

Slutför konfigurationen av mega menyn på din WordPress-webbplats

Efter att ha arbetat dig igenom alla dessa inställningar kan du stänga popup-fönstret för att återgå till huvudsidan Utseende » Menyer.

Du kan nu upprepa denna process för varje föräldraobjekt på toppnivå.

När du är nöjd med hur megamenyn är inställd, klicka på knappen Spara meny för att göra den live.

Besök nu helt enkelt din webbplats frontend för att se megamenyn i aktion.

Vi hoppas att den här artikeln hjälpte dig att lära dig hur du lägger till en megameny på din WordPress-webbplats. Du kan också gå igenom vår steg-för-steg-guide om hur man lägger till en knapp i din WordPress-sidhuvudmeny och vår handledning om hur man skapar en klibbig flytande navigeringsmeny 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.