Waren Sie schon einmal auf einer Website und haben festgestellt, dass oben immer ein Navigationsmenü angezeigt wird?

Grundsätzlich werden Navigationsmenüs so angezeigt, dass sie beim Scrollen der Seite verschwinden. Die immer sichtbaren Navigationsmenüs schweben und sind so, egal wie der Benutzer nach unten scrollt.

In diesem Tutorial zeigen wir Ihnen, wie Sie auf einfache Weise ein schwebendes Menü in Ihrem WordPress-Blog erstellen.

Wenn Sie noch keine Website oder kein Blog auf WordPress erstellt haben, laden wir Sie ein, zu konsultieren, wie man ein WordPress-Blog in 7 Schritten installiert, dann, Wie finden, zu installieren und ein Wordpress-Theme auf Ihrem Blog aktivieren

Wenn es fertig ist, gehen wir auf das ein, was uns heute beschäftigt.

1-Methode: So fügen Sie ein schwebendes Menü in WordPress mithilfe eines Plugins hinzu

Diese Methode ist einfacher und ist schnell. Wenn Sie die Navigationsmenüs noch nicht eingerichtet haben, können Sie lerne wie es geht.

Als erstes müssen Sie das Plugin installieren und aktivieren. " Sticky-Menü (oder alles!) Wir Blätter “. Wenn Sie nicht wissen, wie man ein Plugin installiert, können Sie kann unser Tutorial lesen.

Nach der Aktivierung müssen Sie " Einstellungen »Sticky Menu So konfigurieren Sie die Einstellungen dieses Plugins.

Zuerst müssen Sie die CSS-IDs des Navigationsmenüs eingeben, das Sie schweben lassen möchten.

Sie müssen das "Inspect" -Tool Ihres Browsers verwenden, um das verwendete CSS zu finden.

Gehen Sie zu Ihrer Website und bewegen Sie die Maus zum Navigationsmenü. Danach müssen Sie mit der rechten Maustaste klicken und "Inspizieren" auswählen.

Gehen Sie weiter und entdecken Sie Wie man ein Wordpress-Theme mit gelben Bleistift anpassen

Dies teilt (standardmäßig) Ihren Browser-Bildschirm und Sie können den Quellcode Ihres Navigationsmenüs sehen. Sie müssen eine ähnliche Zeile finden:

In diesem Beispiel lautet die CSS-ID unseres Navigationsmenüs " Site Navigation ".

Geben Sie die CSS-ID des Menüs in den Plugin-Einstellungen wie folgt ein: "# site-navigation".

Die nächste Option bei den Plugin-Einstellungen besteht darin, den Abstand zwischen dem oberen Bildschirmrand und dem schwebenden Navigationsmenü festzulegen. Sie können diese Einstellung verwenden, wenn sich Ihr Menü mit einem Element überschneidet, das Sie nicht ausblenden möchten. Andernfalls ignorieren Sie diese Einstellung.

Danach müssen Sie auf das Feld direkt neben der Option "Check Bar Admin" klicken. Dadurch kann das Plugin Platz für die WordPress-Symbolleiste hinzufügen, die für angemeldete Benutzer hinzugefügt wird.

Mit der nächsten Option auf der Einstellungsseite können Sie das Navigationsmenü ausblenden, wenn ein Benutzer Ihre Website über einen kleineren Bildschirm wie ein Mobilgerät besucht.

Sie können testen, wie dieses Menü auf Mobil- und Tablet-Geräten angezeigt wird. Wenn es Ihnen nicht gefällt, können Sie dieser Option 780px hinzufügen.

entdecken Sie auch Wie eine ansprechende Menü für mobile Wordpress erstellen

Vergessen Sie nicht, auf " Einstellungen speichern Speichern Sie Ihre Änderungen.

Sie können jetzt Ihre Website besuchen, um Ihr schwebendes Navigationsmenü in Aktion zu sehen.

Methode 2: Manuelles Hinzufügen eines Navigationsmenüs

Diese Methode erfordert das Hinzufügen von benutzerdefiniertem CSS-Code zu Ihrer Wordpress-Theme.

Zuallererst muss man besuchen " Aussehen> Anpassen So starten Sie den WordPress Customizer.

Klicken Sie auf " Zusätzliches CSS Fügen Sie im linken Bereich diesen CSS-Code hinzu.

# Site-Navigation {background: #fff; Höhe: 60px; z-index: 170; margin: 0 auto; border-bottom: 1px feste #dadada; Breite: 100%; Position: fixed; top: 0; links: 0; rechts: 0; text-align: center; }

Ersetzen " # Site Navigation Geben Sie die Kennung Ihres Navigationsmenüs ein und klicken Sie auf die Schaltfläche « Registrieren ".

Sie können jetzt Ihre Website besuchen, um Ihr schwebendes Navigationsmenü in Aktion zu sehen.

Wenn Ihr Navigationsmenü normalerweise nach dem Website-Header angezeigt wird, kann dieser CSS-Code den Website-Titel und den Header überlappen.

Dies kann einfach angepasst werden, indem Sie mit dem folgenden Code einen Rand in Ihren Kopfbereich einfügen:

.Site-Branding {margin-top: 60px; }

Hier endet unser Tutorial. Jetzt können Sie ein schwebendes Menü auf Ihrer Website erstellen oder hinzufügen.

Wenn Sie andere suchen Wordpress-Plugins Hier sind einige, mit denen Sie die Menüs verwalten können Wordpress-Plugins premium widmet sich dieser Aufgabe. 

1. Menü-Held

Mit diesem Plugin können Sie in wenigen, relativ einfachen Schritten Ihr eigenes benutzerdefiniertes WordPress-Menü erstellen. Insbesondere ermöglicht es Ihnen, einfach und intuitiv ein elegantes und professionelles WordPress-Menü zu erstellen. Vom komplexesten Mega-Menü mit vielen Funktionen bis zum einfachsten Dropdown-Menü, dem WordPress Plugin HeroMenu richtet jede Art von Menü ein und bringt es in wenigen Minuten zum Laufen.

In Bezug auf Funktionen bietet es unter anderem: perfekt funktionierende Funktionen für PC, Tablet und Smartphone, benutzerfreundliche, anpassbare Inhalte, benutzerdefiniertes CSS zum Hinzufügen eigener Menüstile, Megamenü-Designer, unterstützte Browser: Chrome, Firefox, Safari , Opera, IE9 und mehr.

Herunterladen | Demo | Web-Hosting

2. Slick-Menü

Slick-Menü ist nicht nur ein Menü-Plugin für WordPress. Es kann verwendet werden, um unbegrenzte Menüebenen sowie Seitenleisten mit umfangreichen Inhalten, mehreren Stiloptionen und animierten Effekten zu erstellen.

Jede Menüebene kann mit Hintergrundfarben, Bildern, Videos, benutzerdefinierten Schriftarten und mehr angepasst werden. Dieses Plugin reagiert vollständig und verfügt über mehr als 45 Animationen für die Menüpunkte.

Herunterladen | Demo | Web-Hosting

3. 8Degree Flugmenü

8Degree Fly Menu ist ein WordPress Plugin premium, mit dem Sie Ihrer Website ein Canvas-Menü hinzufügen können, um ihr ein Aussehen zu verleihen, das Ihre Informationen auf einfache Weise hervorhebt. Es verwendet die standardmäßige 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. Außerdem ist ein WYSIWYG-Editor enthalten, mit dem Sie Ihre lange Beschreibung benutzerfreundlich erfassen und Shortcodes verwenden können.

Herunterladen | Demo | Web-Hosting

Andere empfohlene Ressourcen

Wenn Sie weitere Informationen zum Erstellen oder Anpassen der Menüs Ihres Blogs oder Ihrer Website benötigen, empfehlen wir Ihnen, die folgenden Links zu konsultieren.

• Wie fügt Stil, um Ihre Navigations-Menüs
•  Wie ein Titel Attribut in Wordpress Menüs hinzufügen
• 8 WordPress-Plugins zum Erstellen eines Megamenüs in Ihrem Blog

Fazit

Hier ! Das war's für dieses Tutorial. Ich hoffe, Sie können damit ein schwebendes Menü in Ihr WordPress-Blog einfügen. Wir laden Sie ein Teile diesen Artikel mit deinen Freunden in deinen sozialen Netzwerken.

Wenn Sie Vorschläge oder Anmerkungen haben, sind diese willkommen. Und wenn Sie neu in WordPress sind, konsultiere dies Ressource.

...