Wie füge ich dem Menüpunkt eine aktive Klasse hinzu?


7

Ich entwickle ein Thema für Drupal 7 und bin mit dem folgenden Problem konfrontiert. Ich kann sehen, dass es durch jQuery Korrekturen gibt. Aber ich würde es gerne auf Drupal-Art machen.

Mein aktuelles HTML

<ul class="menu sf-js-enabled">
<li class="first leaf">
    <a href="/" class="active">Home</a></li>
<li class="last expanded">
    <a href="/node/57">About Us</a>
        <ul class="menu sf-js-enabled" style="display: none; visibility: hidden;">
            <li class="first leaf"><a href="/node/69">Contact Us</a></li>
            <li class="last leaf"><a href="/node/73">Typhygraphy</a></li>
        </ul>
</li>

Und ich möchte so etwas

<ul class="menu sf-js-enabled">
<li class="first leaf active">
    <a href="/" class="active">Home</a></li>
<li class="last expanded">
    <a href="/node/57">About Us</a>
        <ul class="menu sf-js-enabled" style="display: none; visibility: hidden;">
            <li class="first leaf"><a href="/node/69">Contact Us</a></li>
            <li class="last leaf"><a href="/node/73">Typhygraphy</a></li>
        </ul>
</li>

Die "aktive" Klasse muss auch dort sein <li>.

Antworten:


11

Sie können Ihr Ziel ohne jQuery erreichen. Verwenden Sie einfach die Funktion theme_menu_link () oder (mein Vorschlag) theme_menu_link__your_menu ()

Platzieren Sie diese Funktion in Ihrer template.php-Datei:

function YOURTHEME_menu_link(array $variables) {
    $element = $variables['element'];
    $sub_menu = '';

    if ($element['#below']) {
        $sub_menu = drupal_render($element['#below']);
    }
    $output = l($element['#title'], $element['#href'], $element['#localized_options']);

    // if link class is active, make li class as active too
    if(strpos($output,"active")>0){
        $element['#attributes']['class'][] = "active";
    }
    return '<li' . drupal_attributes($element['#attributes']) . '>' . $output . $sub_menu . "</li>\n";
}

Sie können diese Funktion nur für Menüs verwenden, die als Block angezeigt werden. Wenn Sie das Hauptmenü thematisieren:

  1. Gehen Sie zu admin/appearance/settings/yourthemeund schalten Sie das Hauptmenü aus.
  2. Gehen Sie zu admin/structure/blockund platzieren Sie den Hauptmenüblock im Kopfbereich
  3. Passen Sie ul mit theme_menu_tree () und li-Elemente mit theme_menu_link () an.

Vielen Dank, dass Sie @ jack-pl. Es funktioniert perfekt wie erwartet.
Rameshrasaiyan
Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.