Springe zum Hauptinhalt

Wie eine ansprechende Menü für mobile Wordpress erstellen

Divi: das am einfachsten zu verwendende WordPress-Theme

Suchst du nach den besten WordPress Themes und Plugins?

Laden Sie die besten Plugins und WordPress-Themes auf Envato herunter und erstellen Sie ganz einfach Ihre Website. Schon mehr als 49.720.000 Downloads. [EXCLUSIVE]

Möchten Sie ein Responsive Mobile-Menü in Ihrem WordPress-Blog erstellen?

Mobile Benutzer sind heutzutage zahlreicher als Desktop-Benutzer. Das Hinzufügen eines reaktionsschnellen mobilen Menüs erleichtert Benutzern das Navigieren auf Ihrer Website.

In diesem Tutorial zeigen wir Ihnen, wie Sie auf einfache Weise ein responsives Menü in WordPress erstellen.

Aber vorher, wenn Sie WordPress Discover noch nie installiert haben Wie man ein Wordpress-Blog 7 Schritte für die Installation et Wie finden, zu installieren und ein Wordpress-Theme auf Ihrem Blog aktivieren 

Dann zurück zu warum wir hier sind.

So erstellen Sie ein ansprechendes mobiles WordPress-Menü

Hier geht es darum, in die Tiefe zu gehen, indem wir Ihnen sowohl die Methode mit einem Plugin für Anfänger als auch die Codierungsmethode für fortgeschrittene Benutzer zeigen.

Erste Methode: Erstellen Sie ein mobiles Menü mit einem WordPress-Plugin

Diese Methode ist einfacher und für Anfänger zu empfehlen, da keine besonderen Programmierkenntnisse erforderlich sind.

In dieser Methode erstellen wir ein Menü (mit einem Hamburger-Symbol), die auf dem mobilen Bildschirm gleitet.

Responsive WordPress Menu Plugin

Als erstes müssen Sie das installieren und aktivieren WordPress Responsive Menu Plugin . Für weitere Details, Lesen Sie unsere Anleitung zur Installation eines WordPress-Plugins .

Nach dem Aktivieren des Plugins fügt das Plugin einen neuen Menüpunkt mit dem Titel " Responsive Menü ". Wenn Sie darauf klicken, gelangen Sie zur Seite mit den Einstellungen für das WordPress-Plugin.

WordPress Responsive Dashboard Menü Plugin

Sie müssen zuerst die Größe eingeben, ab der das mobile Menü angezeigt werden soll. Der Standardwert ist 800px, was für die meisten Websites funktionieren sollte.

Danach müssen Sie das Menü auswählen, das Sie auf dem Handy verwenden möchten.

Mit der letzten Option auf dem Bildschirm können Sie eine CSS-Klasse für Ihr Menü bereitstellen. Dadurch kann das Plugin Ihr nicht reagierendes Menü auf kleinen Bildschirmen ausblenden.

Vergessen Sie nicht, auf «zu klicken Update-Optionen Speichern Sie Ihre Einstellungen.

Wir empfehlen Ihnen auch, unsere zu entdecken 10 WordPress-Plugins zum Erstellen von Menüs in Ihrem Blog

Erstellen Sie ganz einfach Ihre Website mit Elementor

Mit Elementor können Sie auf einfache Weise jedes Website-Design mit einem professionellen Look erstellen. Zahlen Sie nicht mehr teuer für das, was Sie selbst tun können. [Kostenlos]

Sie können jetzt Ihre Website besuchen und die Größe Ihres Browserbildschirms ändern, um das Reaktionsmenü in Aktion zu sehen.

Website-in-Action-Menü-responsive-to-mobile

Das Plugin « Responsive Menü »Bietet viele andere Optionen, mit denen Sie das Verhalten und das Erscheinungsbild Ihres Reaktionsmenüs ändern können. Sie können diese Optionen auf der Einstellungsseite des Plugins erkunden und nach Bedarf anpassen.

2-Methode: Manuelles Hinzufügen eines mobilen Menüs

Eine der häufigsten Methoden zum Anzeigen eines Menüs auf mobilen Bildschirmen ist die Hebelwirkung.

Bei dieser Methode müssen Sie Ihren WordPress-Dateien benutzerdefinierten Code hinzufügen.

In einem unserer vorherigen Tutorials zeigen wir es Ihnen Wie erstelle ich ein WordPress-Plugin?.

Zuerst müssen Sie einen Texteditor wie Notepad öffnen und diesen Code einfügen.

(Function () {var nav = document.getElementById ( 'Website-Navigation'), Taste, Menü; if (nav) {return ;!} Taste = nav.getElementsByTagName ( 'Taste') [0] = nav-Menü. getElementsByTagName ( 'ul') [0] if {return;} (Taste!) // Schaltfläche ausblenden, wenn Menü fehlt oder ist leer, wenn (|| menu.childNodes.length Menü!) = {button.style.display. 'keine'; return;} button.onclick = function () {if (-1 === menu.className.indexOf (NAV-Menü ')) {menu.className = nav-Menü';} if (- ! == 1 button.className.indexOf ( 'umgeschaltet werden')) {button.className button.className.replace = ( 'umgeschaltet werden', ''); menu.className menu.className.replace = ( ‚umgeschaltet -on ',' ');} else {button.className + =' umgeschaltet '; menu.className + =' umgeschaltet ';}};}) (jQuery);

Jetzt müssen Sie diese Datei mit dem Namen " Navigation.js Auf deinem Schreibtisch.

Dann müssen Sie einen FTP-Client öffnen, um diese Datei in das Verzeichnis "/ wp-content / themes / your-theme / js /" auf Ihrer WordPress-Website herunterzuladen.

Ersetzen Sie den Ausdruck " Ihr-Thema Mit dem Namen Ihres aktuellen WordPress-Theme-Ordners. Wenn Ihr Themenverzeichnis keinen js-Ordner hat, müssen Sie einen erstellen.

Nach dem Hochladen der JavaScript-Datei müssen Sie im nächsten Schritt sicherstellen, dass Ihre WordPress-Website die JavaScript-Dateien lädt. Sie müssen den folgenden Code zum " functions.php Von deinem WordPress Theme.

Entdecke etwas anderes Was können Sie mit der Datei functions.php machen?

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

Jetzt müssen wir das Navigationsmenü in unserem WordPress-Theme hinzufügen. Normalerweise wird das Navigationsmenü zur Datei hinzugefügt. " header.php Von deinem WordPress Theme.

Speisekarte 'primary', 'menu_class' => 'nav-menu')); ?>

Wir gehen davon aus, dass der von Ihrem WordPress-Theme definierte Menüort "" heißt. primär ". Verwenden Sie andernfalls den von Ihrem WordPress-Theme definierten Ort.

Entdecken Sie auch unsere 5 WordPress-Plugins zum Erstellen von Anmeldeformularen

Der letzte Schritt besteht darin, etwas CSS hinzuzufügen, damit unser Menü die richtigen CSS-Klassen verwendet, um bei der Anzeige auf Mobilgeräten zu wechseln.

Divi: Das beste WordPress-Theme aller Zeiten!

Mehr 701.000 Downloads, Divi ist das beliebteste WordPress-Theme der Welt. Es ist vollständig, einfach zu bedienen und enthält mehr als 62-freie Vorlagen. [Empfohlen]

/ * Navigationsmenü * / .Main-Navigation {Rand oben: 24px; Rand oben: 1.714285714rem; Textausrichtung: Mitte; } .main-navigation li {Rand oben: 24px; Rand oben: 1.714285714rem; Schriftgröße: 12px; Schriftgröße: 0.857142857rem; Zeilenhöhe: 1.42857143; } .main-navigation a {color: # 5e5e5e; } .Main-Navigation a: Hover, .Main-Navigation a: Fokus {Farbe: # 21759b; } .Main-Navigation ul.nav-Menü, .main-Navigation div.nav-Menü> ul {Anzeige: keine; } .main-navigation ul.nav-menu.toggled-on, .menu-toggle {Anzeige: Inline-Block; } // CSS zur Verwendung auf Mobilgeräten @media screen und (min-width: 600px) {.main-navigation ul.nav-menu, .main-navigation div.nav-menu> ul {border-bottom: 1px solid # ededed; Rand oben: 1px fest #ededed; Anzeige: Inline-Block! wichtig; Textausrichtung: links; Breite: 100%; } .main-navigation ul {margin: 0; Texteinzug: 0; } .Main-Navigation li a, .Main-Navigation li {Anzeige: Inline-Block; Textdekoration: keine; } .main-navigation li a {border-bottom: 0; Farbe: # 6a6a6a; Zeilenhöhe: 3.692307692; Texttransformation: Großbuchstaben; Leerraum: Nowrap; } .Main-Navigation li a: Hover, .Main-Navigation li a: Fokus {Farbe: # 000; } .main-navigation li {margin: 0 40px 0 0; Rand: 0 2.857142857rem 0 0; Position: relativ; } .main-navigation li ul {margin: 0; Polsterung: 0; Position: absolut; Top 100%; Z-Index: 1; Höhe: 1px; Breite: 1px; Überlauf versteckt; Clip: Rect (1px, 1px, 1px, 1px); } .main-navigation li ul ul {oben: 0; links: 100%; } .Main-Navigation ul li: Hover> ul, .Main-Navigation ul li: Fokus> ul, .Main-Navigation .focus> ul {border-left: 0; Clip: erben; Überlauf: erben; Höhe: erben; Breite: erben; } .main-navigation li ul li a {Hintergrund: #efefef; Rand unten: 1px fest #ededed; Bildschirmsperre; Schriftgröße: 11px; Schriftgröße: 0.785714286rem; Zeilenhöhe: 2.181818182; Polsterung: 8px 10px; Polsterung: 0.571428571rem 0.714285714rem; Breite: 180px; Breite: 12.85714286rem; Leerraum: normal; } .Main-Navigation li ul li a: Hover, .main-Navigation li ul li a: Fokus {Hintergrund: # e3e3e3; Farbe: # 444; } .Main-Navigation .Current-Menü-Element> a, .Main-Navigation .Current-Menü-Vorfahr> a, .Main-Navigation .Current_page_item> a, .Main-Navigation .Current_page_ancestor> a {Farbe: # 636363; Schriftdicke: fett; } .menu-toggle {Anzeige: keine; }}

Sie können jetzt Ihre Website besuchen und die Größe Ihres Browserbildschirms ändern, um festzustellen, ob Ihr responsives Menü umschaltet.

Rocking-menu-Wordpress-Tutorial

Entdecken Sie auch einige Premium-WordPress-Plugins  

Sie können andere WordPress-Plugins verwenden, um ein modernes Erscheinungsbild zu erhalten und den Grip Ihres Blogs oder Ihrer Website zu optimieren.

Wir bieten Ihnen hier einige Premium-WordPress-Plugins an, die Ihnen dabei helfen werden.

1. UberMenu

UberMenu ist ein WordPress-Plugin, das sich der Erstellung eines hochgradig anpassbaren, reaktionsschnellen und für Benutzer zugänglichen Megamenu widmet. Es ist nach der Installation funktionsfähig, ohne dass eine spezielle Konfiguration erforderlich ist.

Ubermenu WordPress Mega Menü Plugin

Es ist ein benutzerfreundliches Plugin, das jedoch leistungsstark genug ist, um hochgradig anpassbare und kreative Mega-Menü-Layouts zu erstellen.

Siehe auch unsere 9 WordPress-Plugins zum Erstellen von Preisgittern in einem Blog

Sie finden unter anderem: 3 Menüvorlagen, vollständig ansprechendes Layout, Kompatibilität mit mobilen Geräten (iPhone, iPad, Android), Touch-Unterstützung usw.

Download | Demo | Web-Hosting

2. LMM

Das Liquida Mega Menu, auch LMM genannt, ist ein WordPress-Plugin für Benutzer und Entwickler. Es verfügt über eine einfache und intuitive Benutzeroberfläche, die in das WP-Dashboard integriert ist und es Ihnen ermöglicht, eine unbegrenzte Anzahl von Mega-Menüs ohne Programmierkenntnisse zu erstellen und anzupassen.

Lmm WordPress Responsive Mega-Menü basierend auf Bootstrap

Es bietet Dutzende von Funktionen, egal ob für normale oder fortgeschrittene Benutzer. Als Funktionalität bietet es unter anderem: automatische und manuelle Integration, Unterstützung für Multisite, kümmert sich um kinderthemen, vollständig anpassbarer Stil für Menüs, anpassbare Menüpositionen, Sticky-Menü usw.

Download | Demo | Web-Hosting

3. 8Degree Flugmenü

8Degree Fly Menu ist ein Premium-WordPress-Plugin, mit dem Sie ein Canvas-Menü auf Ihrer Website hinzufügen können, um ein Erscheinungsbild zu erhalten, das Ihre Informationen auf einfache Weise hervorhebt. Es verwendet die Standard-WordPress-Menüfunktion, um seine Menüs zu erstellen.

8-Grad-Fly-Menü reagiert auf Canvas-Menü-Plugin für WordPress

Sie können den Standardmenüelementen zusätzliche Elemente hinzufügen, z. B. Symbole, Menüslogans, eine Pseudo-Gruppierungsüberschrift und eine lange Beschreibung.

Lesen Sie auch: 10 WordPress-Plugins zur Optimierung von Seitenleisten und Kopfzeilen

Außerdem ist ein WYSIWYG-Editor enthalten, mit dem Sie Ihre lange Beschreibung benutzerfreundlich erfassen und Shortcodes verwenden können.

Erstellen Sie einfach Ihren Online-Shop

Laden Sie kostenlos WooCommerce herunter, die besten E-Commerce-Plugins, um Ihre physischen und digitalen Produkte auf WordPress zu verkaufen. [Empfohlen]

Download | Demo | Web-Hosting

Andere empfohlene Ressourcen

Wir laden Sie außerdem ein, die unten aufgeführten Ressourcen zu konsultieren, um die Kontrolle und Kontrolle Ihrer Website und Ihres Blogs zu verbessern.

Fazit

Das war's Ich hoffe, Sie können damit ein Menü für mobile Benutzer erstellen. Zögere nicht zu Teilen Sie den Tipp mit Ihren Freunden in Ihren sozialen Netzwerken.

Sie können jedoch auch unsere RessourcenWenn Sie mehr Elemente benötigen, um Ihre Projekte zur Erstellung von Internetseiten durchzuführen, konsultieren Sie unseren Leitfaden auf der WordPress-Blog-Erstellung.

Aber erzählen Sie uns in der Zwischenzeit von Ihrem commentaires und Vorschläge im entsprechenden Abschnitt.

...

Dieser Artikel enthält Kommentare 2

  1. Hallo

    Danke für Ihre Information

    Ich kann anscheinend keine "CSS-Klasse für Ihr Menü" finden. Ich habe das CSS-Stylesheet gefunden, weiß aber nicht, was ich kopieren und einfügen soll

    Vielen Dank im Voraus für Ihre Hilfe

    gutes Wochenende

    michel

Hinterlassen Sie einen Kommentar

Ihre E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *

Diese Website verwendet Akismet, um unerwünschte Inhalte zu reduzieren. Erfahren Sie mehr darüber, wie Ihre Kommentardaten verwendet werden.

Zurück nach oben
6 Aktien
Aktie4
tweet
Registrieren2