perun.net – WordPress & Webwork



WordPress und CSS3: individuelles Navigationsmenü mit Fade-Effekt (Verzögerung) ausstatten

Von am 12. 11. 2012 um 18:30 – Aktualisiert am 14. 08. 2013 um 03:03

Wie man in WordPress ein Navigationsmenü mit WordPress-Menüs realisiert und daraus mit Hilfe von CSS ein Dropdownmenü mit Fade-Effekt erstellt.

Ich habe im Mai diesen Jahres am Beispiel meiner Herr-der-Ringe- und Hobbit-Website erklärt, wie man WordPress als "klassisches" CMS verwenden kann. Dabei habe ich erklärt, wie man sich den Umgang mit vielen Seiten und Unterseiten erleichtern kann, wie man alternative Titel ausgibt und wie man aus der Hauptnavigation ein Dropdownmenü realisiert.

Beispiel eines Dropdownmenüs einer WordPress-Website

Da ich heute ein paar kleine Änderungen an der Navigation durchgeführt habe, gehe ich auf die Erstellung und die Einbindung solch einer Navigation noch einmal ausführlich ein.

Bei der Umsetzung der Hauptnavigation setzte ich auf die Menü-Lösung von WordPress ein. Ist diese Funktion aktiviert, dann kann man unter "Design" → "Menüs" individuelle Navigationsmenüs per Klicken und Ziehen erstellen. Sehr komfortabel.

Ist die Menü-Funktion im Theme nicht aktiviert, dann muss man sich zuerst darum kümmern. Folgendes habe ich in die functions.php eingefügt:

// Menü-Funktion aktivieren
function die_hauptnavi() {
	register_nav_menus(
		array(
			'haupt_navi' => 'Die Hauptnavigation',
		)
	);
}

add_action( 'init', 'die_hauptnavi' );

// Abfragen ob ein Menü erstellt wurde, wenn nicht...
function meine_hauptnavi() {
    if ( function_exists( 'wp_nav_menu' ) )
        wp_nav_menu( 'menu=haupt_navi&container_class=pagemenu&fallback_cb=die_ersatznavi' );
    else
        die_ersatznavi();
}

// Die Definition der Ersatzlösung
function die_ersatznavi() {
    wp_list_pages('title_li=&depth=1');
}

Mit dem oberen Code hast du nicht nur die WordPress-Menüs aktiviert sondern auch eine Ausweichlösung definiert: was passiert wenn noch kein individuelles Navigationsmenü erstellt wurde?

Jetzt kannst du das Menü in das Theme einbinden. Üblicherweise ist dies die header.php, ich habe allerdings das Hauptmenü in die footer.php eingebunden und zwar mit dem folgenden Code:

<?php meine_hauptnavi(); ?>

Der Grund für die Einbindung in der Fußzeile ist, dass ich den eigentlichen Inhalt so weit wie möglich oben im Quelltext haben möchte. Bei der HTML-Ausgabe generiert WordPress folgenden Code:

<div class="pagemenu">
    <ul id="menu-hauptnavi" class="menu">
        <li id="menu-item-575" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-575"><a title="Bebilderte Zusammenfassungen von Der Hobbit und Herr der Ringe" href="http://www.faszination-tolkien.de/zusammenfassung-hobbit-herr-der-ringe/">Zusammenfassungen</a>
            <ul class="sub-menu">
            	<li id="menu-item-612" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-612"><a href="http://www.faszination-tolkien.de/zusammenfassung-hobbit-herr-der-ringe/einstieg-in-tolkiens-mittelerde/">Einstieg in Tolkiens Mittelerde</a></li>
            	<li id="menu-item-582" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-582"><a href="http://www.faszination-tolkien.de/zusammenfassung-hobbit-herr-der-ringe/hobbit/">Der kleine Hobbit</a></li>
            	...
            </ul>
        </li>
        <li id="menu-item-576" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-576"><a title="Die Ringe der Macht" href="http://www.faszination-tolkien.de/die-ringe-der-macht/">Die Ringe</a></li>
        <li id="menu-item-577" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-577"><a title="Die Geschichte von Mittelerde" href="http://www.faszination-tolkien.de/geschichte-arda-mittelerde/">Geschichte</a>
            <ul class="sub-menu">
            	...
            </ul>
        </li>
        ...
    </ul>
</div>

Damit das ganze nicht ausartet und übersichtlich bleibt habe ich den ausgegebenen Quelltext auf das notwendige gekürzt. Wie man sieht, kümmert sich WordPress automatisch um die Vergabe von id- und class-Attributen und den passenden Werten.

Somit hat man genug Ansatzpunkte um passende CSS-Regeln zu definieren um aus der Navigation ein Dropdownmenü zu erstellen. Und hier der CSS-Code dazu:

#menu-hauptnavi {
  list-style: none;
  margin: 0;  padding: 0;
  position: absolute; top: -86px; left: 0;
}

.pagemenu li {float: left; position: relative;}

.pagemenu a {
  color: #eee;
  text-decoration: none;
  float: left;
  line-height: 40px; padding: 0 8px; margin: 0 1px;
}

.pagemenu a:first-child {margin-left: none;}

.pagemenu a:hover, .pagemenu .current-menu-item a, .pagemenu .current-menu-parent a {
  background: #8b9b87 url(img/hover.png) repeat-x; color: #2B3A27;
  font-weight: normal;
}

.pagemenu li:hover {background: #8b9b87 url(img/hover.png) repeat-x;}

.pagemenu .sub-menu {
  padding: 0 0 2px 0; margin: 0; list-style: none;
  position: absolute; top: -999px; opacity: 0;
  background: #a1ad9e;
}

.sub-menu li {float: none; display: block; position: static; padding-bottom: 1px;}

.pagemenu li:hover .sub-menu {
  background: #8b9b87;
  top: 40px; opacity: 1;
  -webkit-transition: opacity .4s ease-in-out;
  transition: opacity .4s ease-in-out;
}

.pagemenu .sub-menu a {
  padding: 3px 10px; margin: 0; display: block;
  float: none;
  line-height: 1.5;
  background: none; color: #2b3a27;
  white-space: nowrap;
}

.pagemenu li ul a:hover {color: #eee; background: #425c3b;}

Die Abschnitte, die für den Dropdown- und den Verzögerungseffekt verantwortlich sind, habe ich hervorgehoben. Das ganze Menü bzw. der Dropdown-Effekt funktioniert auch mit den älteren Browsern, wie zum Beispiel Internet Explorer 8. Lediglich der Fade-Effekt durch transition funktioniert erst ab Internet Explorer 10. Das ist aber aus zwei Gründen nicht schlimm. Zum einen funktioniert lediglich ein kleiner schmückender Effekt nicht und zum anderen sind auch auf einer Hobbit-Website die IE-Nutzer mit gerade 13% vertreten … mit einer sinkenden Tendenz. Im gleichen Zeitraum des letzten Jahres waren es noch knapp 20%.

Das transition ohne Vendorpräfix verstehen die neuen Versionen von Opera, Google Chrome ab Version 26, Firefox und andere Browser, wie zum Beispiel SeaMonkey, die ebenfalls auf die aktuelle Gecko-Engine setzen.

Für Google Chrome bis einschl. Version 25 und Safari ist weiterhin der Vendorpräfix -webkit- notwendig.

Das wär's. Gibt es dazu noch Fragen?

Diesen Artikel weiterempfehlen:

Premium WordPress Themes

Verwandte Artikel:

 — 


8 Kommentare »»

  1. 1.Aaron

    Kommentar vom 12.11.2012 um 20:03

    Perfekt, danke vielmals für die praktische Anleitung.
    Ich wusste nie genau, wie sauber ein Dropdown Menü realisieren, aber mit dieser Variante kommt das ganz simpel und elegant.

    Ist das übrigens deine gewohnte Art du mehrere CSS Werte auf einer Zeile so "zusammenfasst", wie beispielsweise Margin und Padding im Beispiel oben? Habe ich noch nie gesehen, aber schaut eigentlich noch sauber aus :)

  2. 2.DatenVerarbeitung - Jens Fischer

    Kommentar vom 13.11.2012 um 00:10

    Hallo Vladimir,

    danke für deine Sicht der Dinge :)

    Auch ich setze alle meine Menüs ähnlich wie du hier im Beispiel per CSS2.1/3 um.

    Was mich daran ein wenig stört, ist, dass man sobald man mit der Maus auch nur 1px über das Menu heraus rutscht, verschwindet das Menu sofort.
    Dies wird vor allem bei mehreren Ebenen zum Problem, da man sich wieder umständlich durch die Ebenen navigieren muss.

    Beim Suckerfish-Menu gab es, soweit ich mich richtig erinnere, eine Möglichkeit per JS festzulegen, wie lang das Menu offen bleibt, wenn man es "aus Versehen" verlässt.

    Kennst auch du dieses Problem, bzw. stört es dich und kennst du ggf. eine Lösung.

    Würde mich über eine Nachricht freuen, Gruß Jens.

  3. 3.Eduard Wensler

    Kommentar vom 13.11.2012 um 01:04

    @Jens Fischer:
    Vergebe dem ul, mit der Klasse .sub-menu, eine fest Breite von ca. 120px und zusätzlich ein padding: 15px; und den li's legst du ebenfalls mit derselben Breite fest, jedoch ohne dem padding-Wert. Wichtig ist hierbei, dass das ul Transparent sein soll und die li's erhalten z.B. den oben verwendeten Farbton hellgrün – und das alles ohne JavaScript :wink:

  4. 4.Vladimir

    Kommentar vom 13.11.2012 um 01:32

    Hallo Aaron,

    Ist das übrigens deine gewohnte Art du mehrere CSS Werte auf einer Zeile so "zusammenfasst", wie beispielsweise Margin und Padding im Beispiel oben?

    ja, dass ist so eine Eigenheit von mir. Wenn es nicht zu lang ist, gruppiere ich die Deklarationen, die meiner Meinung nach zusammengehören in eine Zeile. Zum Beispiel Padding, Margin und Border, oder Angaben zur Positionierung.

  5. 5.Christian

    Kommentar vom 13.11.2012 um 09:51

    Toller Artikel.

    Ich fasse immer alle Werte in eine Zeile zusammen. Sieht immer sauber aus. Voll geknallte und komisch formatierte CSS-Dateien mag ich nicht so. :)

    Gruß,

    Christian

  6. 6.DatenVerarbeitung - Jens Fischer

    Kommentar vom 13.11.2012 um 15:11

    @ Eduard Wensler

    und zusätzlich ein padding: 15px;

    Das ist grundsätzlich eine gute Idee, jedoch habe ich bisher die ul.submenu ab und an mal mit einem box-shadow versehen, das würde bei deiner Lösung dann leider wohl flach fallen :(

    Dennoch finde ich den Ansatz sehr gut :idea: und werd diesem wohl mal in einem meiner nächsten Projekte anwenden…

    Danke!

    Gruß

  7. 7. – daniel

    Kommentar vom 16.04.2013 um 17:53

    hi Vladimir,

    ich kanns irgendwie nicht ganz glauben… ich habe letztes jahr für ein individuelles theme mühevoll eine superfish-menülösung gebaut. allerdings ohne die möglichkeit, die wp-menü-funktion zu nutzen. doof. auf der suche nach einer solchen lösung bin ich – mal wieder – bei dir gelandet.

    ich bin mir sicher, deine lösung funktioniert. das heisst vermutlich, ich kann die ganzen jquery-einbindungen und superfish.css usw. alles raus schmeißen und vermutlich auch meine superfish-scripte in der functions.php???

    und dann hab ich anschließend tatsächlich ein drop-down-menü??? ich kanns einfach kaum fassen :-/

    noch eine frage: gibts innerhalb der wp-menü-funktion die möglichkeit, einen elternmenüpunkt 8z.b. obst) nur anzuzeigen, also nicht anklickbar zu gestalten, die kindermenüpunkte aber schon (z. B. birnen, orangen, ananas).

    würde mich sehr über antwort freuen.
    danke vielemals & viele grüße
    daniel

  8. 8. – daniel

    Kommentar vom 24.04.2013 um 11:42

    hallo vlad,

    meinen kommentar obendran kannst du löschen, wenn du willst.

    aktuelle rückfrage zum thema:
    wenn das menü jetzt noch auf ipad & co laufen würde, wäre es perfekt… :-)
    hast du ne idee, was ich hierfür machen muss?

    danke & gruß
    daniel

Hinweis:
300+ Professionelle WordPress-Themes
Premium WordPress-Themes, 38 davon mit deutschem Support

Einen Kommentar hinterlassen




XHTML (folgende Tags sind erlaubt): <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> . Kommentar-Vorschau ist aktiviert (Javascript wird benötigt).

Code-Beispiele: damit die Code-Beispiele richtig angezeigt werden müssen die Sonderzeichen maskiert werden (z. B. < zu &lt;).



Weblog der perun.net webwork gmbh mit Artikeln zum Thema WordPress, Webwork, und Internet.