wp_nav_menu => aktiven Link hervorheben

  • Schönen Abend an Alle!

    Ich bin gerade dabei mein erstes Theme selber zu erstellen und dabei auf ein Problem gestossen => es betrifft das dynamische Menu.

    Ich habe mittels wp_nav_menu ein Menue für die Sidebar erstellt -> hat alles wunderbar geklappt.
    Auch dass das sub-menu nur bei aktivem parent angezeigt wird funktioniert. Was ich aber einfach nicht hinbekomme ist: der aktive Menupunkt wird nicht hervorgehoben. Bzw habe ich es mittels:

    Code
    .current_page_item a {color: green;} 
    .current_page_parent a {color: green;}

    geschafft , dass der aktive Menupunkt grün dargestellt wird. Allerdings wenn ich einen parent aktiviere werden auch automatisch die childs aktiv dargestellt.

    Deswegen meine Frage: wie kann ich einen parent hervorheben wenn dieser aktiv ist ohne die innaktiven childs auch hervorzuheben?

    Anbei noch ein paar Codes:

    sidebar.php:

    PHP
    <div id="sidebar_menu">
        <?php wp_nav_menu( array( 'theme_location' => 'sidebar-menu', 'fallback_cb' => false ) ); ?>
        <!-- "fallback_cb = false" dient dazu, dass wenn im Dashboard  kein "sidebar-menu" angelegt ist, WP nicht automatisch alle Seiten  auflistet -->
    </div>

    functions.php

    style.css

    Code
    #sidebar_menu {margin-left: -30px;}
            #sidebar_menu ul li {list-style-type:none;}
            .sub-menu {margin-left: -20px; display: none;}
            .current_page_item .sub-menu, .current_page_parent .sub-menu { display: block;}
            /* dient dazu, dass das submenu nur angezeigt wird wenn der parent aktiv ist */
            .current_page_item a {color: green;} .current_page_parent a {color: green;}
            /*dient der Hervorhebung des aktiven Links - allerdings werden die child-menues auch mit hervorgehoben */

    der von WP erstellte Quellcode:

    Was mich auch wundert sind die sehr langen classes der Links?

    Kann mir jemand helfen? Wäre echt froh!

    Grüsse

    Pixelig

    PS: die komischen Anmerkungen dienen mir nur zur besseren Übersicht da ich programmiertechnisch noch nicht ganz fit bin ;)

    PPS: Ja, ich habe die Suche verwendet ;)

    • Anzeige

    Hallo!

    Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

    • ✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
    • ✔️ Deutsche Server & DSGVO-konform
    • ✔️ Persönlicher Support (kein 0815-Ticket-System)

    Mehr erfahren

  • So werte Community, habe das Problem selber gelöst :)

    Und damit jemand der das gleiche Problem hat auch was davon hat hier der Code (eigentlich ganz simpel (nur CSS))

    style.css

    Code
    .sub-menu {margin-left: -20px; display: none;}
            .current_page_item .sub-menu, .current_page_parent .sub-menu { display: block;}
            /* dient dazu, dass das submenu nur angezeigt wird wenn der parent aktiv ist */
            .current_page_item a {color: green;} .current_page_parent a {color: green;}
            /* dient der Hervorhebung des aktiven Links - allerdings werden die child-menues auch mit hervorgehoben */
            .current_page_item .sub-menu a:visited {color: red;}
            .current_page_item .sub-menu a {color: #633;}
            /* dient dazu, dass das nicht aktive child die eigentliche  Linkfarbe hat (hier #663) ; a:visited sorgt für eine Markierung wenn das  child schonmal besucht wurde */

    An der sidebar.php habe ich nichts ändern müssen.

    Eine Frage habe ich allerdings noch:

    Kann ich die von WP durch wp_nav_menu erstellten

    Code
    <ul> bzw <li> class=xy


    mittels php beeinflussen?

    Grüsse

    Pixsel

  • @Moderatoren:

    gibt es eine Kategorie hier im Forum wo man Tipps posten kann?

    Hatte nämlich ein weiteres Problem (dürfte allerdings kein zu häufiges sein) welches ich dann selber gelöst habe...

    Problem: der IE zerschoss mein Designe (alle anderen zeigten es problemlos an)

    Grund: in der functions.php hatte ich hinter dem php-ende-tag noch eine Bemerkung geschrieben ( <!-- bla bla --> ). Dies führte dazu dass WP diese Bemerkung ganz an den Anfang des Quellcodes stellte. Und dadurch vermurkste der IE das ganze Designe.

    Lösung: Naja, nicht so schwer ;) : einfach die Bemerkung am Ende der functions.php entfernen.

    @all:

    hat keiner eine Idee wie ich die durch wp_nav_menu von WP erstellten Klassen der ul und li beeinflussen kann?

    Quellcode hierzu siehe erster Post.

    Grüsse

    Pixsel

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!