Navigation -> 3. Ebene-Navigation ansprechen

JackCimberly

Hallo Gemeinde.

Ich habe eine Navigation - klar, die sieht im Muster etwa so aus.

- MAIN-NAV
-- SUB-NAV1
-- SUB-NAV2

Wenn ich "SUB-NAV2" aufrufe, dann kann ich bei "MAIN-NAV" mit "current-menu-parent" und "SUB-NAV2" mit "current-menu-item" ansprechen. Klappt super.

Nur würde ich gerne folgendes Muster benutzen wollen:

- MAIN-NAV
-- SUB-NAV1
--- SUB-SUB-NAV
-- SUB-NAV2

Wenn ich nun "SUB-SUB-NAV" aufrufe, dann kann ich diese mit "current-menu-item" und "SUB-NAV1" mit "current-menu-parent" ansprechen. Würde hier aber gerne noch "MAIN-NAV" ansprechen wollen.

Wie mache ich das?

functions.php

PHP

function cssklassen_menu_classes($classes, $item) {
    $classes = array_filter( 
        $classes, create_function('$class', 'return in_array($class,array("current-menu-item", "current-menu-parent"));')
        );
    return array_merge($classes, (array)get_post_meta($item->ID, '_menu_item_classes', true));
    }
    
add_filter('nav_menu_css_class', 'cssklassen_menu_classes', 10, 2);

Aufruf der Naviation

PHP

wp_nav_menu(array('container_class' => 'menu-header', 'theme_location' => 'main-navi'));

Werbepost

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

WiSch

Hallo Jack.

Wenn ich das richtig verstehe, willst Du auf einer Seite in der dritten Menüebene per CSS auch den entsprechenden obersten Menüpunkt ansprechen können?

Im Standard von WP werden die Menüpunkte doch eigentlich wie folgt ausgegeben (was die CSS-Bezeichner betrifft):

HTML

<li id="menu-item-81" class="menu-item menu-item-type-post_type menu-item-object-page current-page-ancestor current-menu-ancestor current_page_ancestor menu-item-81">
  <a href="#">Erste Ebene</a>
  <ul class="sub-menu">
    <li id="menu-item-82" class="menu-item menu-item-type-post_type menu-item-object-page current-page-ancestor current-menu-ancestor current-menu-parent current-page-parent current_page_parent current_page_ancestor menu-item-82">
      <a href="#">Zweite Ebene</a>
      <ul class="sub-menu">
        <li id="menu-item-84" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-79 current_page_item menu-item-84">
        <a href="#">Dritte Ebene</a></li>
      </ul>
    </li>
  </ul>
</li>

Alles anzeigen

Die Menüstruktur hierbei war die Folgende:
- Erste Ebene
-- Zweite Ebene
--- Dritte Ebene

Über die Klassen current-... und die entsprechende Ebene ul li bzw. ul li li usw. solltest Du doch die Ebenen korrekt per CSS erreichen?

JackCimberly

Hi WiSch.

Danke für die Antwort. Komme jetzt erst dazu, zu antworten. Sry.

Habe das nun so gelöst:

PHP

function _s_current_attachment_nav_class($classes, $menu_item) {


    global $wp_query, $post;


    if(true == $wp_query->is_singular && 'attachment' == $post->post_type && in_array($menu_item->object_id, $post->ancestors)) {
        array_push( $classes, 'current-menu-ancestor');            
    }


    return $classes;
}
add_filter('nav_menu_css_class', '_s_current_attachment_nav_class', 10, 2);

Alles anzeigen

Die obige Function im Erstellerthread nutze ich nicht.
Nur ist wieder jeder Menü-Link zuegemüllt mit CSS:

class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1171"

Grüße

Willkommen! Melden Sie sich an oder registrieren Sie sich.

Navigation -> 3. Ebene-Navigation ansprechen

Jetzt mitmachen!