web-dev-qa-db-fra.com

Comment ajouter une classe .active à l'élément de menu?

Je développe un thème pour Drupal 7 et je suis frappé par le problème suivant. Je peux voir qu'il y a des correctifs via jQuery. Mais je voudrais le faire dans le Drupal façon.

Mon HTML actuel

<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>

Et je veux quelque chose comme ça

<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>

La classe "active" doit être présente dans le <li> aussi.

theminghooks
7
rameshrasaiyan

Vous pouvez atteindre votre objectif sans jQuery. Utilisez simplement la fonction theme_menu_link () , ou (ma suggestion) theme_menu_link__your_menu ()

Placez cette fonction dans votre fichier template.php:

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";
}

Vous ne pouvez utiliser cette fonction que pour les menus affichés sous forme de bloc. Si vous êtes le thème du menu principal:

  1. aller à admin/appearance/settings/yourtheme et désactivez le menu principal.
  2. aller à admin/structure/block et placer le bloc de menu principal dans la région d'en-tête
  3. personnaliser ul avec theme_menu_tree () et les éléments li avec theme_menu_link ()
11
Jack-PL