Så här lägger du till en mega-meny på din site i WordPress (steg för steg)

Med megamenyer kan du visa en mängd olika länkar och innehållskategorier i en strukturerad layout som är lätt att navigera i.

Det kan förbättra besökarnas upplevelse avsevärt genom att göra navigeringen på webbplatsen mer intuitiv och lättillgä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 visar ytterligare viktiga länkar. Denna inställning har gjort det möjligt för oss att skapa en ren och organiserad navigationsmeny 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 kan add to en mega menu till din WordPress website, Step-by-Step.

Varför lägga till en Mega Menu på din site i WordPress?

WordPress levereras med en dra-och-släpp-byggare som du kan använda för att skapa alla typer av menyer, inklusive rullgardinsmenyer, huvudmenyer och mycket mer. Det finns även plugins som gör att du kan skapa anpassade navigeringsmenyer i WordPress-teman.

Om din site har mycket content kan du dock behöva skapa en mega menu istället. Detta allow you to add multi-column dropdowns to the standard WordPress menu structure.

Du kan använda mega-menyer för att organisera ditt content under olika headings och subheadings, så att besökarna snabbt kan hitta det de letar efter. Om du till exempel skapar en marknadsplats online kan du ordna alla dina produktkategorier och underkategorier i en megameny.

Mega menus kan också visa rikt innehåll för dina besökare, till exempel videoklipp, text, search och senaste inlägg.

Du kan också add to images, vilket gör mega-menyer lättare att skanna.

Med detta sagt, låt oss se hur du enkelt kan add to en mega menu till din WordPress website.

Så här skapar du en Mega Menu för din site i WordPress

Det enklaste sättet att add to en mega menu till din site i WordPress är att använda Max Mega Menu. Detta plugin allow you to add rich content to your mega menus, including videos, image galleries, search, and more.

På så sätt kan du skapa mer engagerande och användbara menyer.

Du kan också ändra stilen på menyn genom att lägga till olika färger, ändra storleken på fonten och använda olika icons.

Först måste du installera och aktivera pluginet. Om du behöver hjälp kan du vänligen läsa vår guide om hur du installerar ett plugin för WordPress.

Aktivera Mega Menus på din website i WordPress

Efter aktivering, gå till Mega Menu ” Menu Locations page från WordPress dashboard för att se alla de olika area där du kan add to en mega menu.

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

Till att börja med måste du aktivera mega-menyer på alla locations där du vill använda dem.

För att göra detta klickar du bara för att förstora en location och kontrollerar sedan dess ”Aktiverad” box.

Efter det kan du ändra den händelse som öppnar mega-menyn.

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 den ska aktiveras. Detta fungerar bra för de flesta WordPress-webbplatser, men du kan också öppna rullgardinsmenyn ”Effekt” och välja ”Hover” eller ”Click” istället.

Om du väljer ”Click” måste besökaren klicka för att utforska megamenyn. Det här kan vara användbart om du är orolig för att besökarna ska råka klicka på menyn av misstag, vilket kan vara frustrerande.

Med ”Hovering” öppnas din mega-menu så snart besökaren för musen över den. Detta kan uppmuntra visitorerna att utforska olika area på din site, så du kanske vill använda ”Hover” på landing pages eller på din websites homepage.

När du har fattat detta beslut kan du ändra hur menyn öppnas med hjälp av inställningarna för ”Effekt”.

Max Mega Menu har olika animationer som du kan prova, inklusive fade och slide up. You can also change the animation’s speed. Genom att prova olika animationer kan du skapa en mega menu som fångar besökarens uppmärksamhet.

Om du inte vill använda några animationer öppnar du helt enkelt den första dropdown och väljer ”None”.

Som standard använder Mega Menu inte animationer på mobila enheter, eftersom smartphones och surfplattor vanligtvis har mindre processorkraft. Men om du vill skapa en unik animation för mobila besökare kan du använda settings i ”Effect (Mobile)” area.

Om du vill testa dina mega-menyer på mobilen kan du kontrollera vår guide om hur du kan viewa mobilversionen av WordPress webbplatser från en stationär dator.

Om du valde ”Click” från dropdown-menyn ”Händelse”, se till att du väljer tabben ”Avancerat” härnäst.

Här kan du använda ”Click Event Behavior” för att definiera vad som händer när besökaren klickar på din megameny. Till exempel kan det andra clicket stänga menyn eller öppna en new link.

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

När du är nöjd med hur pluginet är konfigurerat klickar du på ”Save Changes”.

För att aktivera megamenyer för fler locations följer du bara samma process som beskrivs ovan.

Customize hur mega-menyer ser ut på din website

Nästa steg är att konfigurera hur megamenyerna ska se ut på din website.

Detta gör du genom att välja tabben ”Menu Themes” till vänster på vyn.

På den här vyn kan du ändra riktningen på pilens icons, använda en annan line height, add to en skugga med mera.

När du är nöjd med dina settings, glöm inte att clicka på ”Save Changes”.

Om du vill ta bort dessa ändringar när som helst kontrollerar du bara boxen ”Reset Widget Styling” och klickar sedan på ”Save Changes”.

Därefter kan du customize menyfältet, som är det fält som besökarna ser när menyn är i sitt standardläge, minimerad.

För att göra dessa ändringar klickar du på tabben ”Menu Bar” och använder sedan settings för att ändra bakgrundsfärg, padding, border radius med mera.

Du kan även skapa en färggradient genom att välja två olika färger i section ”Menu Background”.

Om du rullar nedåt kan du ändra hur menyn högst upp ser ut.

Det här är den första row med objekt som syns när megamenyn är minimerad.

Eftersom de är så viktiga kanske du vill få meny-items på högsta nivån att sticka ut.

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

I ”Hover State” section kan du markera det valda menu-item på högsta nivån.

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

Detta kan hjälpa besökaren att se var de befinner sig i menyn, vilket gör det viss användbart för webbplatser som behöver ha stora megamenyer.

Om du addar en hovering, rullar du längst ner på vyn och kontrollerar boxen ”Highlight Current Item”.

Efter det kan du ändra hur undermenyn ser ut.

Det här är den menu som visas under en parent på högsta nivån, som du kan se i följande image.

Om du vill customize undermenyn klickar du på tabben ”Mega Menus”.

Du kan nu använda dessa settings för att ändra bakgrundsfärg för undermenyn, öka radius för att skapa böjda hörn, add to padding med mera.

Du add to content till dina mega menus med hjälp av widgets. Du kan till exempel add to en widget för Gallery och displayed your most popular WooCommerce products, eller embed a tag cloud inside the mega menu. Dessa widgetar kan ge extra information eller uppmuntra besökare att clicka på vissa menu-items.

Du kan customize hur dessa widgets kommer att se ut genom att rulla till ”Widgets” section. Du kan till exempel ändra färgen på widgets rubrik, öka storleken på fonten, add to padding och justera inriktningen.

På den här vyn kan du också customize hur menyobjekten på andra nivån och menyobjekten på tredje nivån ska se ut på din website, blogg eller marknadsplats online. Dessa är child till menu-items på den högsta nivån.

När du bygger dina menyer är det möjligt att add to fyra eller fler nivåer för att skapa en nästlad megameny. Om du gör detta kommer WordPress helt enkelt att använda den tredje nivåns Styling för alla efterföljande nivåer.

Du kan se detta i action i följande image. Den andra nivån har röd text och både den tredje och fjärde nivån använder samma blå text.

När du är nöjd med hur menyn är uppbyggd, glöm inte att clicka på ”Save Changes”.

Så här lägger du till en Mega Menu på din site i WordPress

När du har slutfört customize av megamenyn är det dags att add den till din website.

Bara head över till appearance ” Menus page från admin sidebar.

Om du vill göra en befintlig meny till en megameny öppnar du dropdown ”Select a menu to edit” och väljer den från listan. Tänk bara på att den meny du väljer måste tilldelas en location där du har aktiverat funktionen megameny.

Om du vill börja från scratch klickar du på ”Create a new menu” och skriver sedan in en titel för din nya megameny.

Du kan sedan välja den location du vill använda och klicka på ”Create Menu”. Återigen måste detta vara en location där du har aktiverat mega-menyer.

Add content till din WordPress-meny

Därefter lägger du till alla sidor, inlägg, WooCommerce-produkter och allt annat innehåll som du vill inkludera i megamenyn.

Steg-för-steg-instruktioner hittar du i vår przewodnik för nybörjare om hur du lägger till en navigeringsmeny i WordPress.

Därefter måste du ordna dina objekt i de parents och undermenyer som du vill använda i mega-menyn. För att skapa en undermeny drar du ett objekt under föräldern och drar det sedan något åt höger innan du släpper det.

För att skapa flera nivåer drar du helt enkelt objekten åt höger så att de visas indragna under varandra. Detta liknar hur man skapar en dropdown-meny i WordPress.

Aktivera funktionen Mega Menu

När du är klar klickar du på för att förstora ”Max Mega Menu Settings” och kontrollerar boxen bredvid ”Enable”.

I den här boxen kan du också åsidosätta standardinställningarna för megamenyn. This allows you to create unique mega menus for different areas of your WordPress website, so go ahead and make any changes you want.

Efter det klickar du på ”Save”.

Skapa layouten för Mega Menu

Nu, hovera musen över det första objektet på högsta nivå och du kommer att se en new ”Mega Menu” knapp. Gå vidare och ge knappen ett click.

Du kommer nu att se all settings för detta objekt på högsta nivån.

Som standard kommer Max Mega Menu att använda flyout-stilen, där undermenyerna ”flyter ut” från sidan. Om du vill skapa en megameny istället öppnar du dropdown-rutan ”Sub menu display mode” och väljer antingen ”Standard Layout” eller ”Grid Layout”.

I standardlayouten visas alla undermenyer i Column.

Samtidigt, grid layout allows you to organize submenu items into columns and rows.

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

När du har valt standard- eller grid layout ser du alla undermenyer som är tilldelade denna parent.

Nu kan du gå vidare och ändra hur dessa objekt är ordnade i mega-menyn.

Om du använder standardlayouten kan du ändra antalet Column med hjälp av dropdown-menyn i det övre högra hörnet.

Om du använder en grid layout kan du add to columns och rows med knapparna ”+Column” och ”+Row”.

När du är nöjd med layouten kan du ordna objekten i undermenyn i olika Column och Row med hjälp av drag and drop.

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

Till exempel i Följer image tar båda Column upp hälften av det tillgängliga utrymmet.

Om du vill ändra storleken på ett objekt klickar du bara på pilknapparna för att göra bråkdelen större eller mindre.

Skapa en mobilvänlig mega-meny (endast grid layout)

Som standard kommer Max Mega Menu att visa samma content på stationära och mobila enheter. Detta kan vara ett problem med grid layouts, eftersom smartphones och surfplattor vanligtvis har mindre vyer och det kan vara svårt att rulla horisontellt.

Om du använder layouten grid kan du skapa olika megamenyer för mobila enheter. Du kan till exempel använda färre Column så att användarna inte behöver rulla horisontellt. På så sätt kan du skapa en mobilanpassad WordPress menu.

Du kan dölja hela Column eller Row med hjälp av ikonen ”Hidden on mobile”, som gillar en liten mobiltelefon.

Det är bara att toggle ikonen på och av för att dölja och visa olika content på dator och mobil.

Add to Rich Content med widgetar för Mega Menu

När det är gjort kan du börja lägga till widgetar i mega-menyn. Detta allow you att visa extra content i undermenyn, till exempel senaste kommentarer, videoklipp, gallerier med mera.

You kan till exempel använda images för att främja en rea i din store eller lyfta fram dina senaste produkter.

För att add a widget, click för att öppna ”Select a widget….” dropdown.

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

WordPress addar widgeten till en column eller row automatiskt, men du kan flytta den till en new location med drag and drop.

För att konfigurera widgeten går du vidare och klickar på dess lilla skiftnyckel icon.

Detta öppnar en popup där du kan add to content till widgeten och ändra dess Settings.

Du kommer att se olika alternativ beroende på vilken typ av widget du skapar. Om du till exempel addar en widget för en ljud- och musikspelare till mega-menyn kommer du att se inställningar där du kan uploada ett ljud track.

Alla widgetar har ett fält för ”Rubrik” där du kan add to text som kommer att visas ovanför widgeten.

När du är klar klickar du på ”Save” för att spara dina ändringar och väljer sedan ”Close”. För att add to fler widgetar till mega-menyn följer du bara samma process som beskrivs ovan.

Review av standardinställningarna för Mega Menu

Därefter klickar du bara på tabben ”Settings”.

Här kan du använda checkboxes för att dölja eller visa olika content i undermenyn.

Du kan också dölja eller visa undermenyn på mobila enheter och stationära datorer och ändra inriktningen så att undermenyn öppnas till vänster eller höger om den översta parent-nivån.

Om du gör några ändringar i standardinställningarna, glöm inte att clicka på ”Save Changes”.

Add Image Icons till WordPress Mega Menu

Imagely icons hjälper besökarna att förstå vad ett menu-item handlar om, utan att de ens behöver läsa navigationsetiketten. Detta är viss nytta för stora menyer där en visitor kanske föredrar att snabbt skanna av innehållet i stället för att läsa varje navigation.

Du kan använda icons för att få det viktigaste innehållet att sticka ut. Du kan till exempel uppmuntra visitorerna att slutföra sitt köp genom att lägga till en cart icon i menyn ”Checkout”.

För att add to image icons till din navigation menu, click on the ”Icon” tabs.

You can now choose any dash icon from the built-in library or use your own image. Om du upgraderar till Max Mega Menu Pro får du också tillgång till andra fonts för icons, Genericons och FontAwesome.

Slutför konfigurationen av Mega Menu på din site i WordPress

När du har arbetat dig igenom alla dessa settings kan du stänga popup-fönstret för att återgå till huvudsidan Appearance ” Menus.

Du kan nu upprepa denna process för varje parent på den högsta nivån.

När du är nöjd med hur megamenyn är inställd klickar du på knappen Save Menu för att aktivera den.

Nu är det bara att besöka din website front-end för att se mega-menyn i action.

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-przewodnik om hur du lägger till en knapp i din rubrikmeny i WordPress och vår poradnik om hur du skapar en flytande navigationsmeny 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.