Så här lägger du till en responsiv meny i fullskärm i WordPress

Letar du efter ett sätt att add to en fullskärms responsive menu i WordPress?

När dina användare clickar eller tapar på en hamburger icon, kommer ett fullskärms överlägg av din website’s menu att visas med en beautiful animation.

I den här artikeln visar vi dig hur du addar en responsiv meny i fullskärm i WordPress utan att skriva någon kod.

Varför lägga till en fullskärms responsiv meny i WordPress?

Väldesignade menyer hjälper dina besökare att hitta rätt på din WordPress website eller WooCommerce store. Men det kan vara svårt att tapa på en standardmeny i headern när du använder en liten vy på en smartphone.

Mobila användare har redan passerat stationära användare för många websites. Därför rekommenderar vi att du previewar den mobila versionen av din WordPress site för att se hur din website ser ut på mobila enheter.

En fullskärms responsiv mobilmeny anpassas automatiskt till olika vyer. Eftersom all available yta används för menyn blir den lättare att navigera i på smartphones och surfplattor.

Låt oss ta en titt på hur du add to en fullskärms responsive menu i WordPress.

Så här addar du till en responsiv meny i fullskärm i WordPress

Det första du behöver göra är att installera och aktivera pluginet FullScreen Menu. Du kan kontrollera vår Step-by-Step guide om hur man installerar ett WordPress plugin för nybörjare för mer detaljer.

Efter aktivering bör du heada över till sidan Fullscreen Menu Options i din WordPress admin menu för att konfigurera plugin-inställningarna. Det kommer att ta dig till tabben ”Settings” automatiskt.

Kom igång genom att kontrollera checkboxen ”Activate Animated Fullscreen Menu” för att aktivera menyn.

Det är en bra idé att också kontrollera boxen ”Visa menyn endast för Admin-användare” till en början. Detta gör att du kan se ändringarna när du konfigurerar menyn, men besökare på din site kommer ej att kunna se den förrän du är slutförd.

Glöm inte att komma tillbaka och avmarkera den boxen när du är klar.

Med andra Settings kan du visa menyn endast på mobila enheter, close menyn vid click eller rulla och dölja menyn på specifika pages. I vårt exempel lämnar vi dessa inställningar avmarkerade, men du är välkommen att customize dem som du vill för din egen site.

Design och appearance för fullskärmsmenyer

Därefter kommer vi att customize designen av menyn. Lyckligtvis tillåter menu pluginet dig att göra detta utan att behöva customize CSS.

För att customize menyn måste du klicka på tabben ”Design/Appearance” högst upp på sidan. På den här page kan du välja färger, font och animationsinställningar för din menu.

Högst upp på sidan kommer du att notera två färginställningar. Den första färgen är för ikonen för hamburgermenyn. Den kommer att visas högst upp till höger på din website. När dina besökare klickar eller tapar på den visas eller döljs menyn i helskärm.

Den andra färginställningen är för bakgrunden till menyn.

När du klickar på varje box kommer en färgpalett att appear. Du kan antingen clicka på den färg du vill använda eller skriva in dess hex-kod.

När du har valt färgerna på menyn rullar du ner på sidan till Section Font/Appearance. Här kan du välja färg, familj och storlek på det font som ska användas för texten i menyn.

För denna tutorial kommer vi att hålla oss till standardinställningarna, som använder fonten från vårt theme. Vi rekommenderar den här inställningen eftersom den matchar designen på din website. Att hämta ytterligare fonts kan också påverka din WordPress-webbplats prestanda och hastighet.

Det finns också Settings för att displayed a lateral side menu on specific pages and scroll the main menu if it’s not tall enough. I den här tutorialen avmarkerar vi dessa settings, men du får gärna experimentera med dem på din egen blogg eller website i WordPress.

Efter det måste du rulla ner till sektionen ”Animation Settings”. Det finns två huvudinställningar som du kan justera.

Den första av dessa är ”Animationstyp”. Här kan du selecta animeringsriktningen när menyn aktiveras. You can choose from högst upp till ner, från vänster till höger och från höger till vänster.

Den andra settings är den effekt du får när du hoverar musen över en menu entry. Valmöjligheterna är padding line, bakgrundsfärg och bakgrundsfärg med rundad kant.

Content i fullskärmsmeny

Slutligen måste du rulla tillbaka högst upp på sidan och clicka på tabben ”Menu Content”. Här kan du selecta den WordPress-meny som ska visas i din fullskärmsmeny.

Bredvid ”Select Menu” högst upp måste du välja en meny från dropdown-listan. Om du ännu inte har skapat en navigationsmeny kan du kontrollera vår guide om hur du lägger till navigationsmenyer i WordPress.

Om du vill att ytterligare content ska visas på vyn med menyn kan du add to det i nästa section, som heter ”Free HTML / Shortcodes”. Skriv bara in ditt content type i boxen Editor och lägg till de media files som du gillar. Detta content kommer att visas under menyn.

Det finns också en checkbox som innehåller en länk till din page med integritetspolicy. Många ägare av websites föredrar dock att add to denna i footern istället för i main menu.

Därefter kanske du gillar att add to sociala icons som menu items. Dessa kommer att visas i en row längst ner i din fullskärmsmeny.

För att add to dem rullar du bara ner till ”Social Icons” section och enter en titel för iconen, till exempel ”Facebook”. Därefter väljer du lämplig icon och skriver in URL:en till din sociala page.

Du kan lägga till fler icons genom att clicka på knappen ”Add Another Icon”.

Slutligen kan du add a native WordPress search bar to the top of your responsive menu. Du måste rulla längst ner på sidan ”Menu Content” och kontrollera boxen ”Add Search Bar?”. Om du gillar det kan du också skriva in lite text som placeholder.

Slutligen klickar du på knappen ”Save Changes” för att lagra dina inställningar.

You can now visit your website to see the fullscreen responsive menu in action. Vi rekommenderar att du resizear din webbläsare för att se hur menyn beter sig på olika stora vyer.

Så här ser det ut på vår demo website.

När du är nöjd med din fullskärmsmeny, glöm inte att navigera tillbaka till Fullscreen Menu Options och avmarkera ”Show the menu only for Admin users”. När du har clickat på knappen ”Save Changes” kommer besökarna på din website att kunna komma åt menyn.

Vi hoppas att den här artikeln hjälpte dig att lära dig hur du addar en fullskärms responsive menu till din WordPress site. Du kanske också vill lära dig hur du embedar ett videoklipp på Facebook eller kontrollera vår lista över de bästa tilläggen för kontaktformulär för 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.