WordPress & Webwork

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

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?

8 Reaktion(en)

  1. Aaron

    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 :)

    1. Vladimir

      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.

  2. DatenVerarbeitung - Jens Fischer

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

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

    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

  5. DatenVerarbeitung - Jens Fischer

    @ 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ß

  6. daniel

    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

  7. daniel

    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

Die Kommentare in diesem Beitrag sind geschlossen.