So erstellen Sie ein Dropdown-Menü in WordPress

Möchten Sie ein Dropdown-Menü in WordPress erstellen? Du bist am richtigen Ort gekommen! In diesem Tutorial habe ich Ihnen bei, wie Sie ein professionelles Dropdown-Menü-Design erstellen. Von Burgermenüs für Mobilgeräte über Mega-Menüs für Geschäfte bis hin zu klebrigen Menüs für verbesserte Benutzererfahrung gibt es eine gute Wahl in der Art und Weise, wie Sie Ihr Navigationsmenü auf Ihrer WordPress-Site präsentieren können. Mega-Menüs und Burgermenüs, es ist eine gute Idee zu lernen, wie man ein Dropdown-Menü erstellt. Dies wird auf mehr Websites nützlich sein, als Sie sich vorstellen können (nicht jede Site benötigt ein ausgefallenes Menü), und es bietet Ihnen die Grundlage, die Sie benötigen, um fortgeschrittenere Menüs zu erstellen. Um die HTML -Funktion zu zielen, die nach der WordPress -Menüfunktion ausgegeben wird. Dies ist so konzipiert, dass es in einem Thema verwendet wird, das Sie selbst codieren, und nicht für ein Thema Drittanbieter, das bereits ein eigenes Menü hat. Wenn Sie jedoch mit einem Thema Dritter arbeiten, dessen Menü nicht Dropdown ist und dies hinzufügen möchten, müssen Sie ein untergeordnetes Thema erstellen und Ihren Menücode dazu hinzufügen. Html. 

Machen Sie Ihr Dropdown-Menü-Design mobilfreundlich. 

What You'll Need to Create a Drop-Down Navigation Menu in HTML on WordPress

To follow along with this tutorial, you'll need:

a development installation of WordPress

a theme you're coding yourself, or a child theme of a third-party theme if you want to modify the menu

a code Editor

1. Die integrierte Menüfunktionalität von WordPress
Sie müssen das erste, was Sie verstehen müssen, wie WordPress-Dropdown-Menüs funktionieren. Anders als bei statischen Websites sind die Menüs in Ihrer Website nicht fest codiert. Stattdessen verwendet WordPress eine PHP -Funktion, um die Menüelemente der Datenbank und die Fetchnavigation abzufragen und sie dann in der richtigen Struktur anzuzeigen.

Öffnen Sie in Ihrem Thema die Datei header.php . Sie sollten in der Lage sein, diese Zeile zu finden:

wp_nav_menu( array( 'container_class' => 'main-nav', 'theme_location' => 'primary' ) );<br>

Ihre Funktion kann je nach den Parametern ein wenig anders aussehen. Lassen Sie uns jedoch das obige Beispiel aufschlüsseln und sehen, was jedes Element tut:

• container_class ist die CSS -Klasse, die dem Container, in dem das Menü gepackt ist, verabreicht wird. In diesem Fall ist es Hauptnavi. Das werden wir später mit unserem CSS abzielen.
• thema_location = & gt; Primär . Sie können dies nur für ein Menü verwenden. Möglicherweise möchten Sie jedoch zusätzliche Parameter verwenden, die Sie auf der WordPress-Handbuchseite auf wp_nav_menu () Funktion

  finden können, bevor wir CSS für unser Dropdown-Menü hinzufügen können. Bildschirm:

  Hier ist das Drop-Down-Navigationsmenü in HTML:

  Erstellen eines Dropdown-Menüs in HTML besteht aus einem Code, den wir verstehen müssen, bevor Sie mit unserem Dropdown-Menü für WordPress:

  <div class="main-nav"><br>    <ul id="menu-navbar" class="menu"><br>        <li id="menu-item-610" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-home current-menu-item page_item page-item-609 current_page_item menu-item-610"><a href="https://121interviewcoaching.co.uk/">Home</a></li><br>        <li id="menu-item-613" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-613"><a href="https://121interviewcoaching.co.uk/about/">About Me</a></li><br>        <li id="menu-item-615" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-615"><a href="https://121interviewcoaching.co.uk/services/">Services</a><br>            <ul class="sub-menu"><br>                <li id="menu-item-618" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-618"><a href="https://121interviewcoaching.co.uk/services/services-for-individuals/">Preparing for interviews / individuals</a></li><br>                <li id="menu-item-617" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-617"><a href="https://121interviewcoaching.co.uk/services/services-for-groups/">Preparing for interviews / groups</a></li><br>                <li id="menu-item-619" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-619"><a href="https://121interviewcoaching.co.uk/services/conducting-interviews/">Conducting interviews</a></li><br>            </ul><br>        </li><br>        <li id="menu-item-30780" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-30780"><a href="https://121interviewcoaching.co.uk/succeed-at-your-next-job-interview/">My Book</a></li><br>        <li id="menu-item-614" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-614"><a href="https://121interviewcoaching.co.uk/clients-2/">Clients</a></li><br>        <li id="menu-item-616" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-616"><a href="https://121interviewcoaching.co.uk/interview-tips/">Interview Tips</a></li><br>        <li id="menu-item-612" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-612"><a href="https://121interviewcoaching.co.uk/where-i-work/">Areas covered</a></li><br>        <li id="menu-item-611" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-611"><a href="https://121interviewcoaching.co.uk/contact/">Contact &#038; Links</a></li><br>    </ul><br></div><!-- #main-nav --><br>

  A Div-tiv-tiv-tiv-tiv-tiv-tiv-tiv-tiv-tiv-tiv-to-t-🎜> (). Ein Menü-Navbar

  und die Klasse li

  , jeweils die Klasse von Li
  Elementen ist ein weiteres Li
  • Elemente im Inneren-die Menüelemente der zweiten Ebene. Wir möchten fallen, wenn der Benutzer über dem Menüpunkt der obersten Ebene schwebt. Dinge:
  • Wenn die Seite geöffnet wird, sind die Menüelemente der zweiten Ebene versteckt. Standardmäßig Elemente der zweiten Ebene. Lasst uns das beheben.

    Layout-Styling in die Liste der zweiten Ebene addieren

    Öffnen Sie Ihr Stylesheet und finden Sie die Linie mit Position: Absolute gibt die absolute Positionierung der zweiten Ebene und nimmt sie aus dem Elementfluss auf der Seite. Für das übergeordnete Element steht oben: 3EM die Spitze der Liste relativ zum oberen Rand des Elements, in dem es sich befindet, nämlich das Listenelement der obersten Ebene. Dies links: 0 platziert die Liste links, relativ zum Element darüber. Sehen Sie, wenn wir über den Element der obersten Ebene schweben:

  • Es funktioniert! Wenn ich über das Element der obersten Ebene schwebe, wird jetzt das Dropdown-Menü angezeigt.
  • 3. Machen Sie Ihr Dropdown-Menü mobilfreundlich
  Der einfache Dropdown-Menücode oben ist großartig für die Desktop-Version der Site, aber die Realität ist, dass die meisten Personen Ihre Website auf einem Mobiltelefon besuchen. Menü. GO:
  , das das Burger -Symbol ausgibt, verwenden Sie den HTML -Code für das Symbol, in einem Element mit einer Klasse, mit der wir es auf größeren Bildschirmen ausblenden. Verstecken Sie zunächst das Symbol auf größeren Bildschirmen:

  Jetzt in einer Medienabfrage, fügen Sie das CSS für das Menü hinzu:

  , dass Sie dieses Problem bearbeiten müssen, wenn Sie verschiedene Klassen und IDs in Ihrem Thema verwenden. Erstellen Sie einen Ordner in Ihrem Thema namens

  Skripte

  und in dieser Inhalt einer neuen Datei namens

  burger-Menu.js

  und fügen Sie dies hinzu: Fügen Sie in der Datei Ihres Themas

  functions.php

  eine Funktion hinzu, um das Skript zu aktivieren:

  Speichern Sie jetzt alle Ihre Dateien, und Sie haben ein Burger -Menü auf kleinen Bildschirmen.

  Dropdown-Menüs sind nützlich für kleine Menüs mit mehreren Ebenen

  Wenn Ihre Website ein Menü mit mehreren Levels benötigt, aber Sie nicht viele Links außerhalb Ihres oberen Menüs benötigen. Ein Dropdown-Menü ist der einfachste Weg, um dies zu erreichen. Die Website, die ich verwendet habe, um dies zu demonstrieren, hat nur einen Artikel im Menü mit anderen Elementen darunter, und es gibt nur drei davon. Die Verwendung eines Mega-Menüs wäre übertrieben, und ein einstufiges Menü würde es mir nicht ermöglichen, alles anzuzeigen, was ich will.

  Das ist es! Auf diese Weise erstellen Sie ein Dropdown-Menü in HTML

  , um ein Menü wie dieses zu Ihren Themen hinzuzufügen, bietet Ihnen mehr Flexibilität mit Ihren Menüs und verbessert die Benutzererfahrung. Und Sie können es mit nur wenigen Zeilen von CSS tun.

Das obige ist der detaillierte Inhalt vonSo erstellen Sie ein Dropdown-Menü in WordPress. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!