Springe zum Hauptinhalt

Wie eine ansprechende Menü für mobile Wordpress erstellen

Divi: das am einfachsten zu verwendende WordPress-Theme

Divi: Das beste WordPress-Theme aller Zeiten!

Mehr 600.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]

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

Heutzutage gibt es mehr mobile Benutzer als Desktop-Benutzer. Das Hinzufügen eines reaktionsschnellen Menüs für Handys 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.

Dies wird vertieft, indem sowohl die Methode mit einem Plugin für Anfänger als auch die Codierungsmethode für fortgeschrittene Benutzer gezeigt werden.

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.

Demonstration Menü-Hosts

Als erstes müssen Sie das installieren und aktivieren WordPress Responsive Menu Plugin . Für weitere Details, Lesen Sie in unserer Anleitung nach, wie Sie ein WordPress-Plugin installieren .

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 Plugin-Einstellungen.

ansprechendes Menü Wordpress

Sie müssen zuerst die Größe eingeben, ab der das mobile Menü angezeigt wird. Der Standardwert ist 800 px, 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ü angeben. Dadurch kann das Plugin Ihr nicht reagierendes Menü auf kleineren 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 Browser-Bildschirms ändern, um das entsprechende Menü in Aktion zu sehen.

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

Das Plugin « Responsive Menü Bietet viele weitere Optionen, mit denen Sie das Verhalten und das Erscheinungsbild Ihres reaktionsfähigen Menüs ändern können. Sie können diese Optionen auf der Plugin-Einstellungsseite erkunden und nach Bedarf anpassen.

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

Eine der am häufigsten verwendeten Methoden zum Anzeigen eines Menüs auf mobilen Bildschirmen ist die Verwendung der 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?.

Sie müssen zuerst 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 des Ordners Ihres aktuellen WordPress-Themas. Wenn Ihr Themenverzeichnis keinen js-Ordner enthält, müssen Sie einen erstellen.

Nachdem Sie die JavaScript-Datei heruntergeladen haben, müssen Sie sicherstellen, dass Ihre WordPress-Website die JavaScript-Dateien lädt. Sie müssen der Datei den folgenden Code hinzufügen functions.php Von deinem WordPress Theme.

Etwas anderes entdecken 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.

<nav id = "site-navigation" class = "main-navigation" role = "navigation"> <button class = "menu-toggle"> Menü </ button> <? php wp_nav_menu (array ('theme_location' => ' primary ',' menu_class '=>' nav-menu ')); ?> </ nav>

Wir gehen davon aus, dass der von Ihrem WordPress-Theme definierte Menüpfad " primär “. Wenn nicht, verwenden Sie den von Ihrem WordPress-Theme definierten Ort.

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]

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

Der letzte Schritt ist das Hinzufügen von CSS, damit unser Menü die richtigen CSS-Klassen verwendet, um bei der Anzeige auf Mobilgeräten umzuschalten.

/ * Navigationsmenü * / .main-navigation {Rand oben: 24px; Rand oben: 1.714285714rem; Textausrichtung: Mitte; } .main-navigation li {margin-top: 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: 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 ist mobile Geräte @media Bildschirm zu verwenden und (min-width: 600px) {ul.nav .main Menü-Navigationsmenü div.nav .main-Navigation> ul {border-bottom: solid # 1px ededed; border-top: 1px solid #ededed; Anzeige: Inline-Block! wichtig; Text ausrichten: 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; Text-Transformation: Großbuchstaben; Leerraum: nowrap; } .main-navigation li a: hover, .main-navigation li a: focus {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; oben: 100%; Z-Index: 1; Höhe: 1px; width: 1px; Überlauf: versteckt; Clip: Rect (1px, 1px, 1px, 1px); } .main-navigation li ul ul {top: 0; links: 100%; } .main-navigation ul li: hover> ul, .main-navigation ul li: focus> ul, .main-navigation .focus> ul {border-left: 0; clip: erben; Überlauf: erben; Höhe: erben; Breite: erben; } .main-navigation li ul li {Hintergrund: #efefef; border-bottom: 1px solid #ededed; Anzeige: Block; Schriftgröße: 11px; Schriftgröße: 0.785714286rem; Zeilenhöhe: 2.181818182; Polsterung: 8px 10px; Polsterung: 0.571428571rem 0.714285714rem; width: 180px; width: 12.85714286rem; Leerraum: normal; } .main-navigation li li li: hover, .main-navigation li li li: focus {Hintergrund: #e3e3e3; Farbe: #444; } .Current-item-Menü-Navigation .main> hat .Current-Vorfahr-Menü-Navigation .main> hat .main-Navigation .current_page_item> hat .main-Navigation .current_page_ancestor> a {color: #636363; Schriftgröße: fett; } .menu-toggle {display: none; }}

Sie können jetzt Ihre Website besuchen und die Größe Ihres Browser-Bildschirms ändern, um festzustellen, ob Ihr responsives Menü umgedreht wird.

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 anpassbaren, reaktionsschnellen und für Benutzer zugänglichen Megamenüs widmet. Es ist nach der Installation ohne spezielle Konfiguration funktionsfähig.

Es ist ein benutzerfreundliches Plugin, das jedoch leistungsstark genug ist, um äußerst anpassbare und kreative Megamenü-Konfigurationen zu erstellen.

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

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

Download | Demo | Web-Hosting

2. LMM

Liquida Mega Menu, noch LMM genannt, ist ein WordPress-Plugin, das für Benutzer und Entwickler entwickelt wurde. 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 Megamenüs ohne Programmierkenntnisse zu erstellen und anzupassen.

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, der vollständig anpassbare Stil für Menüs, anpassbare Menüpositionen, das Sticky-Menü usw.

Download | Demo | Web-Hosting

3. 8Degree Flugmenü

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

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

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]

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

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ögern Sie 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 "eine CSS-Klasse für Ihr Menü" nicht finden. Ich habe das Stylesheet CSS 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
5 Aktien
Aktie4
tweet
Registrieren1