So erstellen Sie eine zweite horizontale Navigation in WordPress

Mit den benutzerdefinierten Menüs von WordPress ist das Erstellen Ihrer Seitennavigation weniger Aufwand. Auch das Erstellen von Menüs mit Ebenen erfordert nur ein paar Klicks, anstatt die Vorlagendateien zu bearbeiten. Wenn Sie eine zweite horizontale Navigation wünschen, die ebenfalls horizontal verläuft, können Sie diese Funktion verwenden und einige CSS-Anpassungen hinzufügen. Dadurch kann die Website Ihres Unternehmens mehr Menü-Links von den Seiten, Posts und anderen Inhalten enthalten, die bereits in Ihrem Blog vorhanden sind, und den Platz in Ihrem WordPress-Design besser nutzen.

Menüs hinzufügen

1

Installieren Sie ein Design wie Twenty Eleven, das die Option "Benutzerdefiniertes Menü" von WordPress verwendet.

2

Melden Sie sich in Ihrem WordPress-Dashboard an und klicken Sie unter "Darstellung" auf "Menüs". Geben Sie einen Namen für Ihr Menü in das Textfeld ein und klicken Sie auf "Menü erstellen", um ein neues Menü zu erstellen.

3.

Wählen Sie Seiten oder Kategorien aus den Listen aus und klicken Sie auf "Zu Menü hinzufügen", um sie als erste Ebene Ihrem Menü hinzuzufügen.

4

Wählen Sie die Seiten aus, die als zweite Ebene angezeigt werden sollen, und klicken Sie auf die Schaltfläche "Hinzufügen". Klicken Sie auf das angezeigte Element und ziehen Sie es nach rechts. Bewegen Sie es so, dass es über Ihrer ersten Kategorienkategorie oder Seite angezeigt wird. Es rastet unter dem Element ein und fügt es der Unternavigation hinzu.

5

Wiederholen Sie diesen Vorgang für alle Ihre Seiten und Unterseiten. Klicken Sie auf "Menü speichern", wenn Sie fertig sind.

CSS bearbeiten

1

Öffnen Sie Ihre CSS-Datei, indem Sie entweder über FTP auf Ihren Server zugreifen oder die Datei im Editor Ihres WordPress-Dashboards öffnen.

2

Suchen Sie die Zeilen für "#navigation" und ".sub-menu". Sie möchten die Listenelementklasse "Untermenü" so ändern, dass sie nach links gleitet und als Inline angezeigt wird, um diese Ebene horizontal zu machen. Beispielsweise könnte Ihr CSS dem folgenden ähneln:

Untermenü li {float: left; Anzeige: Inline; }

Sie können natürlich Füllungen, Ränder, Farben und andere Attribute hinzufügen, die Sie mögen.

3.

Fügen Sie die benutzerdefinierte CSS-Klasse zu Ihren Links hinzu, wenn durch das Ändern Ihrer CSS-Datei die Site nicht sofort geändert wird. Sie können dies tun, indem Sie sich bei WordPress anmelden, auf die benutzerdefinierten Menüs zugreifen, auf "Bildschirmoptionen" klicken und "CSS-Klassen" auswählen. Wenn Sie einzelne Untermenüelemente erweitern, können Sie als Klasse "Untermenü" hinzufügen.

Spitze

  • Sie können auf jedes Listenelement eine andere CSS-Klasse anwenden, um es zu unterscheiden. Beispielsweise können alle Ihre Untermenüelemente eine andere Schriftfarbe verwenden.

Empfohlen