.activeクラスをメニュー項目に追加する方法は?


7

Drupal 7のテーマを開発していて、次の問題に悩まされています。jQueryによる修正があることがわかります。しかし、私はDrupalの方法でそれをしたいと思います。

現在の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>

そして、私はこのようなものが欲しい

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

「アクティブな」クラスもそこにある必要があり<li>ます。

回答:


11

jQueryがなくても目標を達成できます。ただtheme_menu_link()関数、または(私の提案)theme_menu_link__your_menu()を使用してください

この関数を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";
}

この機能は、ブロックとして表示されるメニューにのみ使用できます。メインメニューのテーマを設定している場合:

  1. に移動しadmin/appearance/settings/yourtheme、メインメニューをオフにします。
  2. admin/structure/blockヘッダー領域に移動してメインメニューブロックを配置する
  3. ulはtheme_menu_tree()で、li要素はtheme_menu_link()でカスタマイズします

@ jack-pl、ありがとうございます。予想通り完全に機能しています。
rameshrasaiyan 2013年
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.