Springe zum Hauptinhalt

Wie ein schwebendes Menü auf Wordpress erstellen

Divi: das am einfachsten zu verwendende WordPress-Theme

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]

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.So erstellen Sie ein schwebendes WordPress-Menü 1

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

Wenn Sie keine Website oder kein Blog in WordPress erstellt haben, laden wir Sie ein, sich zu beraten Wie man ein Wordpress-Blog 7 Schritte für die Installation 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.

Sticky Menü WordPress Plugin

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.

Sticky Menü WordPress Plugin

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

Überprüfen Sie einen Tutorial-WordPress-Code

Divi: Das beste WordPress-Theme aller Zeiten!

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

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.

Wordpress Float-Menü

Methode 2: Manuelles Hinzufügen eines Navigationsmenüs

Diese Methode erfordert das Hinzufügen von benutzerdefiniertem CSS-Code zu Ihrem WordPress-Design.

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

Zusätzlicher CSS 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 ".

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]

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 nach anderen WordPress-Plugins suchen, mit denen Sie Menüs verwalten können, finden Sie hier einige Premium-WordPress-Plugins, die dieser Aufgabe gewidmet sind. 

1. Menü-Held

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

Hero Menü Responsive WordPress Mega-Menü-Plugin

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.

Download | 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.

Slick Menü Responsive WordPress Vertical Menü

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.

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

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.

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.

...  

Dieser Artikel enthält Kommentare 7

  1. Guten Tag,

    Zunächst einmal vielen Dank für dieses Tutorial, das den Job perfekt macht!
    Aber egal wie intensiv ich im Internet gesucht habe, ich konnte keine Antwort auf meine Frage finden:
    Wie kann ich nach dem Erstellen des schwebenden Menüs (in CSS oder mit der Erweiterung, was auch immer) meine Abschnitte nach dem Menü und nicht hinter dem Menü anzeigen?
    In meinem Fall ist es besonders ärgerlich, weil es sich um eine Seite handelt und die Elemente in meinem Menü sich daher auf Abschnitte der Seiten beziehen, die jedes Mal hinter meinem Menü auftauchen ...

    spricht es zu dir

    Vielen Dank im Voraus!

      1. Hallo; Hallo

        Ich habe es mit einem heruntergeladenen Thema (Wallstreet) versucht, aber während ich Ihren Anweisungen folge, ändert sich nichts… Ich weiß nicht, was fehlt…
        Ich mag es und ich wünschte, ich könnte es benutzen ...

        Danke
        Raul

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
Aktie2
tweet
Registrieren3