Endlich umgesetzt: Aktiven Menüpunkt hervorheben

Geschätzte Lesezeit: 2 Minuten

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 Kennzeichnung 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 perwp_list_pages() ausgegeben werden.

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

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:

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:

Markierung Elternseite ausgewählter KindseitePerfekt!

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.


6 Kommentare

Kommentare hinzufügen
    • Hallo hansen,

      dieses „Ruckeln“ müsste aber schon vorher gewesen sein. Du meinst, dass sich die Tabs leicht verschieben beim Darüberfahren, gell?
      Die Ursache ist das border-Attribut von 1 Pixel zwischen den Menütabs bei der hover-Regel. Ich hätte nicht gedacht, dass es so stark auffällt.
      Ich habe mich nun eines kleines Tricks bedient und auch zwischen den inaktiven Menütabs der Menüleiste einen Rand in dessen Hintergrundfarbe hinzugefügt. smilie
      Nun dürfte es nicht mehr ruckeln.

      Lieben Gruß
      Sylvi

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Du kannst diese HTML-tags und attribute verwenden: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Du hast 15 Minuten Zeit, um Deinen Kommentar nachträglich zu korrigieren.

Copyright © Sylvis Blog • 2017. Alle Rechte vorbehalten. •   Impressum   •    Datenschutzerklärung

%d Bloggern gefällt das: