Gå till innehållet

Hur man skapar en lyhörd meny för mobil Wordpress

Divi: det enklaste WordPress-temat att använda

Divi: Det bästa WordPress-temat hela tiden!

mer 901.000-nedladdningar, Divi är det mest populära WordPress-temat i världen. Den är komplett, lätt att använda och levereras med mer än 62 gratis mallar. [Rekommenderas]

Vill du skapa en lyhörd mobilmeny på din WordPress-blogg?

Mobilanvändare är fler än stationära användare idag. Att lägga till en lyhörd mobilmeny gör det lättare för användare att navigera på din webbplats.

I denna handledning visar vi dig hur du enkelt kan skapa en lyhörd meny på WordPress.

Men tidigare, om du aldrig har installerat WordPress-upptäckt Hur man installerar en Wordpress-blogg 7 steg et Hur man hittar, installera och aktivera en Wordpress tema på din blogg 

Tillbaka till varför vi är här.

Hur man skapar responsiv mobil wordpress-meny

Här kommer det att vara en fråga om att gå djupare genom att visa dig både metoden med ett plugin för nybörjare och kodningsmetoden för avancerade användare.

Första metoden: Skapa en mobilmeny med ett WordPress-plugin

Denna metod är enklare och rekommenderas för nybörjare eftersom den inte kräver några speciella kodningskunskaper.

I den här metoden skapar vi en meny (med en hamburgare-ikon) som glider på mobilskärmen.

Responsivt WordPress-meny-plugin

Det första du behöver göra är att installera och aktivera WordPress Responsive Menu-plugin . För mer information, kolla in vår guide om hur du installerar ett WordPress-plugin .

Efter aktivering av plugin kommer plugin att lägga till ett nytt objekt på menyn med titeln " Responsive Meny ". Om du klickar på den kommer du till inställningssidan för WordPress-plugin.

WordPress-responsivt instrumentpanelmeny-plugin

Du måste först ange den storlek som mobilmenyn ska visas från. Standard är 800 pixlar, vilket borde fungera för de flesta webbplatser.

Efter det måste du välja den meny du vill använda på mobilen.

Det sista alternativet på skärmen låter dig tillhandahålla en CSS-klass för din meny. Detta gör det möjligt för pluginet att dölja din icke-responsiva meny på små skärmar.

Glöm inte att klicka på « uppdaterings~~POS=TRUNC För att spara dina inställningar.

Vi föreslår också att du upptäcker vårt 10 WordPress-plugins för att skapa menyer på din blogg

Skapa enkelt din webbplats med Elementor

Med Elementor kan du enkelt skapa en webbdesign med ett professionellt utseende. Sluta betala dyra för vad du kan göra själv. [Fritt]

Du kan nu besöka din webbplats och ändra storlek på webbläsarens skärm för att se den responsiva menyn i handling.

Site-in-action-menu-lyhörd till mobil

Plugin « Responsive Meny »Erbjuder många andra alternativ som låter dig ändra beteendet och utseendet på din responsiva meny. Du kan utforska dessa alternativ på insticksidan för insticksprogrammet och justera det efter behov.

2-metod: Hur man lägger till en mobilmeny manuellt

En av de vanligaste metoderna som används för att visa en meny på mobila skärmar är att använda hävstång.

Den här metoden kräver att du lägger till anpassad kod i dina WordPress-filer.

I en av våra tidigare handledning visar vi dig hur man skapar ett WordPress-plugin.

Först måste du öppna en textredigerare som Anteckningar och klistra in den här koden.

(funktion () {nav var = document.getElementById ('site-navigation'), knapp, meny; if (! nav) {return;} knapp = nav.getElementsByTagName ('knapp') [0]; menu = nav. getElementsByTagName ('ul') [0]; if (! -knapp) {return;} // Dölj knapp om menyn saknas eller tom om (! meny ||! menu.childNodes.length) {button.style.display = 'none'; return;} button.onclick = function () {if (-1 === menu.className.indexOf ('nav-menu')) {menu.className = 'nav-menu';} if (- 1! == button.className.indexOf ('tillkopplad')) {button.className = button.className.replace ('toggled-on', ''); menu.className = menu.className.replace ('toggled -on ',' ');} else {button.className + =' toggled-on '; menu.className + =' toggled-on ';}};}) (jQuery);

Nu måste du spara den här filen med namnet " navigation.js På ditt skrivbord.

Sedan måste du öppna en FTP-klient för att ladda ner den här filen till "/ wp-content / teman / ditt-tema / js /" på din WordPress-webbplats.

Ersätt uttrycket " your-tema Med namnet på din nuvarande WordPress-temamapp. Om din temakatalog inte har en js-mapp måste du skapa en.

Efter att ha laddat upp JavaScript-filen är nästa steg att se till att din WordPress-webbplats laddar JavaScript-filerna. Du måste lägga till följande kod i " functions.php Av ditt WordPress-tema.

Upptäck något annat Vad kan du göra med filen features.php?

 wp_enqueue_script ( 'bpc_togglemenu' get_template_directory_uri () '/js/navigation.js', array (' jquery '), 20160909', sant.);

Nu måste vi lägga till navigationsmenyn i vårt WordPress-tema. Vanligtvis läggs navigationsmenyn till filen " header.php Av ditt WordPress-tema.

Meny 'primär', 'menu_klass' => 'nav-meny')); ?>

Vi antar att menyplatsen som definieras av ditt WordPress-tema kallas " primär ". Annars använder du platsen som definieras av ditt WordPress-tema.

Upptäck också vår 5 WordPress-plugins för att skapa prenumerationsformulär

Det sista steget är att lägga till lite CSS så att vår meny använder rätt CSS-klasser för att växla när den visas på mobila enheter.

Letar du efter de bästa WordPress-teman och plugins?

Ladda ner de bästa plugins och WordPress-teman på Envato och enkelt skapa din webbplats. Redan mer än 49.720.000-nedladdningar. [EXKLUSIV]

/ * Navigationsmeny * / .main-navigation {margin-top: 24px; margin-top: 1.714285714rem; textjustera: centrum; } .main-navigation li {margin-top: 24px; margin-top: 1.714285714rem; teckenstorlek: 12 pixlar; font-storlek: 0.857142857rem; linjehöjd: 1.42857143; }. huvudnavigering a {färg: # 5e5e5e; } .main-navigation a: hover, .main-navigation a: focus {color: # 21759b; } .main-navigation ul.nav-menu, .main-navigation div.nav-menu> ul {display: none; } .main-navigation ul.nav-menu.toggled-on, .menu-toggle {display: inline-block; } // CSS att använda på mobila enheter @media-skärmen och (min-bredd: 600 pixlar) {.main-navigation ul.nav-menu, .main-navigation div.nav-menu> ul {border-bottom: 1px solid # ededed; border-top: 1px solid #ededed; display: inline-block! viktigt; textjustera: vänster; bredd: 100%; }. huvudnavigering ul {margin: 0; textindrag: 0; } .main-navigation li a, .main-navigation li {display: inline-block; text-dekoration: ingen; } .main-navigation li a {border-bottom: 0; färg: # 6a6a6a; linjehöjd: 3.692307692; text-transform: versaler; white-space: nowrap; }. huvudnavigering li a: sväva,. huvudnavigering li a: fokus {färg: # 000; } .main-navigation li {margin: 0 40px 0 0; marginal: 0 2.857142857rem 0 0; position: relativ; } .main-navigation li ul {margin: 0; stoppning: 0; position: absolut; topp 100%; z-index: 1; höjd: 1px; bredd: 1px; överflöd: dold; klipp: rekt (1px, 1px, 1px, 1px); } .main-navigation li ul ul {top: 0; vänster: 100%; } .main-navigering ul li: sväva> ul, .main-navigering ul li: focus> ul, .main-navigation .focus> ul {border-left: 0; klipp: ärva; överflöd: ärva; höjd: ärva; bredd: ärva; } .main-navigation li ul li a {background: #efefef; border-bottom: 1px solid #ededed; display: blockera; teckenstorlek: 11 pixlar; font-size: 0.785714286rem; linjehöjd: 2.181818182; stoppning: 8px 10px; stoppning: 0.571428571rem 0.714285714rem; bredd: 180 pixlar; bredd: 12.85714286rem; white-space: normal; } .main-navigation li ul li a: sväva, .main-navigation li ul li a: fokus {bakgrund: # e3e3e3; färg: # 444; } .main-navigation .current-menu-item> a, .main-navigation .current-menu-ancestor> a, .main-navigation .current_page_item> a, .main-navigation .current_page_ancestor> a {color: # 636363; font-vikt: fet; } .meny-växla {display: none; }}

Du kan nu besöka din webbplats och ändra storlek på webbläsarens skärm för att se om din responsiva meny växlar.

Rocking-menu-wordpress-tutorial

Upptäck också några premium WordPress-plugins  

Du kan använda andra WordPress-plugins för att ge ett modernt utseende och optimera greppet på din blogg eller webbplats.

Vi erbjuder dig här några premium WordPress-plugins som hjälper dig att göra det.

1. UberMenu

UberMenu är ett WordPress-tillägg som är dedikerat till att skapa ett mycket anpassningsbart, lyhörd och tillgängligt för användarnas megamenu. Den är funktionell efter installationen utan behov av speciell konfiguration.

Ubermenu wordpress mega meny plugin

Det är ett lättanvänt plugin, men ändå kraftfullt nog för att skapa mycket anpassningsbara och kreativa mega-menylayouter.

Se även vår 9 WordPress-plugins för att skapa prisnät på en blogg

Du hittar bland annat: 3 menymallar, fullt responsiv layout, kompatibilitet med mobila enheter (iPhone, iPad, Android), pekstöd, etc ...

Ladda ner | demo | webbhotell

2. LMM

Liquida Mega Menu kallas också LMM är ett WordPress-plugin utformat för användare och utvecklare. Den har ett enkelt och intuitivt gränssnitt, integrerat med WP-instrumentpanelen, så att du kan skapa och anpassa ett obegränsat antal megamenyer, utan några programmeringskunskaper.

Lmm wordpress-responsiv mega-meny baserad på bootstrap

Den levereras med dussintals funktioner, antingen för vanliga eller avancerade användare. Som funktioner erbjuder den bland annat: automatisk och manuell integration, stöd för multisite, ta hand om barnens teman, helt anpassningsbar stil för menyer, anpassningsbara menyplatser, klibbig meny etc.

Ladda ner | demo | webbhotell

3. 8Degree Fly Meny

8Degree Fly Menu är ett premium WordPress-plugin som låter dig lägga till en canvas-meny på din webbplats för att ge den en titt som lyfter fram och enkelt din information. Den använder standard WordPress-menyfunktionen för att skapa sina menyer.

8degree fly meny svarar på menyn plugin för wordpress

Du kommer att kunna lägga till ytterligare element i standardmenyalternativen, till exempel ikoner, menyslagor, en pseudogrupprubrik och en lång beskrivning.

Läs också: 10 WordPress-plugins för att optimera sidofält och klibbiga rubriker

Det kommer också med en WYSIWYG-redigerare som hjälper dig att ta tag i din långa beskrivning på ett användarvänligt sätt. Med denna redigerare kan du också använda kortkoder.

Skapa enkelt din webbutik

Ladda ner gratis WooCommerce, de bästa e-handelspluggarna för att sälja dina fysiska och digitala produkter på WordPress. [Rekommenderas]

Ladda ner | demo | webbhotell

Andra rekommenderade resurser

Vi inbjuder dig också att konsultera resurserna nedan för att gå vidare i greppet och kontrollen av din webbplats och blogg.

Slutsats

Det är det! Det är det för den här tutorialen, jag hoppas att det kommer att låta dig skapa en meny för mobilanvändare. Känn dig fri att dela tipset med dina vänner på dina sociala nätverk.

Du kommer dock också att kunna konsultera vår medel, om du behöver fler element för att genomföra dina projekt för att skapa webbplatser, genom att konsultera vår guide om WordPress blogg skapande.

Men under tiden berätta om din commentaires och förslag i det dedikerade avsnittet.

.

Den här artikeln innehåller kommentarer 2

  1. hej

    tack för din information

    Jag verkar inte hitta "en CSS-klass för din meny". Jag hittade css-formatmallen men jag vet inte vad jag ska kopiera och klistra in

    Tack på förhand för din hjälp

    bra veckans slut

    michel

Lämna en kommentar

Din e-postadress kommer inte att publiceras. Obligatoriska fält är markerade *

Den här webbplatsen använder Akismet för att minska oönskade. Läs mer om hur dina kommentarer data används.

Tillbaka till toppen
6 aktier
del4
tweet
Enregistrer2