Endlich umgesetzt: Aktiven Menüpunkt hervorheben

Vor einer Weile hatte ich beschrieben, wie ich das Menü meines Themes “Smoky” etwas komfortabler gestaltet habe, da in dem themeeigenen Menü die Anzeige von Submenüs schlichtweg unterschlagen wurde. Ein optisches i-Tüpfelchen fehlte mir allerdings: Die farbliche Hervorhebung in der Menüleiste, durch die ein Besucher auf den ersten Blick sehen kann, in welchem Menü er sich befindet.

Zwei tolle Lösungen habe ich im Internet ausfindig machen können. Die eine besteht aus einer reinen CSS-Umsetzung, bei der zweiten wurde ein zusätzlicher Funktionseinbau dokumentiert.

Reine CSS-Lösung

In einem älteren Beitrag beschreibt Perun eine “Quickie-Lösung”, wenn die Seiten per wp_list_pages() ausgegeben werden.

Die Darstellung des Menüs in meinem Blog wird allerdings durch diesen geänderten Code

<?php
          wp_nav_menu( array(
    'theme_location' => 'main-menu', // Setting up the location for the main-menu, Main Navigation.
    'menu_class' => 'dropdown', //Adding the class for dropdowns
    'container_id' => 'navwrap', //Add CSS ID to the container that wraps the menu.
    'fallback_cb' => 'wp_page_menu', //if wp_nav_menu is unavailable, WordPress displays wp_page_menu function, which displays the pages of your blog.
    )
      );
?>

in der header.php meines Themes umgesetzt.

Die CSS-Regel für das Menü wird in der style.css meines Themes durch .ul dropdown angeführt. Um die Markierung à la Perun umzusetzen, hatte ich die Regeln für die markierte Darstellung um folgende Attribute ergänzt:

ul.dropdown .page_item a:hover, ul.dropdown .current_page_item a, ul.dropdown .current_page_parent a {
background: #cf4c19}

Das sah doch schon einmal sehr schön aus. Allerdings bestand in meinem Blog das Problem, dass eine Kennzeichnung der Elternseite – z. B. hier im Blog das Menü Download – mit mehreren Submenüs nicht umgesetzt wurde.

Weder bei Auswahl dieses Hauptmenüs, noch der Submenüs (Kindseiten) wie beispielsweise kostenlose Fotos und dessen Submenüs wurde der Hintergrund der jeweiligen Kategorien grau unterlegt. Der Hintergrund blieb schwarz.

Möglich, dass es an dem oben beschriebenen veränderten Menü-Code in der header.php liegt.

Lösung mit Funktions- und Stylesheet-Anpassung

Nachdem also die oben beschriebene CSS-Regel nicht zu 100 % in meinem Blog den erwünschten Erfolg brachte, habe ich weiter recherchiert.

Dabei bin ich nun auf folgenden Beitrag von Caspar Hübinger gestoßen, der vollends den Anspruch einer aktiven Menükennzeichnung erfüllt. Ich habe also Caspars Anleitung Schritt für Schritt – einschließlich Eintrag des Codes für die functions.php – befolgt.

Die CSS-Regeln für die visuelle Umsetzung habe ich in der style.css um Folgende ergänzt:

ul.dropdown .current-menu-item a,ul.dropdown .current-menu-parent a,ul.dropdown .current-menu-ancestor a{
background: #cf4c19}

Perfekt!

Sowohl bei Auswahl des Eltern– als auch der jeweiligen Submenüs ist nun durch grauen Hintergrund für jeden Besucher erkennbar, in welchem Menü er sich befindet.

Nun wollte ich noch wissen, ob der Funktionscode in meinem Blog überhaupt erforderlich ist und habe ihn probeweise gelöscht. Und erstaunlich: Der Hintergrund des aktivierten Menüpunktes wird in diesem Blog auch ohne ihn dargestellt.

Nachtrag

Auf meiner Facebook-Seite hatte ich kürzlich Folgendes gepostet

Es gibt so Selbstverständlichkeiten, die manchmal keine sind. Z. B. die Markierung des aktiven Menüs.

Ich bin wirklich davon ausgegangen, dass dieser Blog mit seinem betagten Theme zu den Ausnahmen zählt, denen dieses Template-Feature fehlt. Und dann wollte ich es wissen und habe mir die Seiten meiner Blogroll genauer angeschaut. Nun war ich aber doch erstaunt. Eigentlich hatte ich angenommen, dass heutzutage die Hervorhebung von den meisten Themes unterschützt wird. Denkste.

Von 14 WordPress-Blogs sind gerade in 6 die aktivierten Menüs einschließlich Submenüs markiert. In 2 Blogs wurden lediglich die Elternseiten hervorgehoben. Bei dem Rest fehlt diese CSS-Regel.