web-dev-qa-db-ja.com

メニューの<li>タグにクラスを追加する

メニューの各リンクはアクティブな意味のときに色分けされた背景を持っているので、実際のli要素にクラス/ IDを配置する必要があります。リンク。

メニューを作成してCSS IDまたはクラスを使用すると、ID /クラスは<li>タグではなくa要素に配置されます。

私はjQueryで何かを書くことができましたが、Drupalに方法があるのではないかと思いました。

必要な出力は次のようになります。

<li class="leaf myCustomClass active-trail"><a href="/trash-this" class="active" title="">Test links</a></li>
<li class="leaf myCustomClass"><a href="http://#" class="specialMenuItem first" title="">first</a></li>
<li class="leaf myCustomClass"><a href="http://#" class="specialMenuItem" title="">second</a></li>
6routes
2
kelly johnson

メニュー項目のIDまたはクラスを設定する機能を提供する メニュー属性 モジュールを使用できます。

この単純なモジュールを使用すると、id、name、class、style、relなどのメニュー項目の追加属性を指定できます。

0
Jayendra Kainthola

theme_menu_item_link（） を使用する必要があります

以下は、古いサイトからプルした例です。

function THEME_menu_item_link($link)
{
    if (empty($link['localized_options']))
    {
        $link['localized_options'] = array();
    }

    //Give this menu item a unique id
    $link['localized_options']['attributes']['id'] = 'menu-item-' . $link['mlid'];

    //Not sure if this is the cleanest method, but it should allow us to follow
    //the active-trail across menu items, based on path.

    //Get the start of the current path (e.g. admin/build/modules would be admin)
    $base_path = preg_replace('/^([A-Za-z0-9_-]+)\/(.*)/', '${1}', drupal_get_path_alias($_GET['q']));

    //Get the current link we're looking at
    $this_link = drupal_get_path_alias($link['href']);

    //If the
   if($base_path == $this_link)
   {
       $link['localized_options']['attributes']['id'] = 'menu-active-trail-' . $link['mlid'];
   }

   return l($link['title'], $link['href'], $link['localized_options']);
}
1
Scott Joudry

Drupal 8の場合、 menu_link_attributes モジュールを使用できます。

0
Jigarius

以下のコードをtemplate.phpに追加できます。参照記事： http://scriptcult.com/subcategory_197/article_978-add-class-to-menu-item.htm

/**
 * Theme a menu link.
 */
function THEMENAME_menu_link(array $variables) {
  // Add class for li.
  $variables['element']['#attributes']['class'][] = 'menu-' . $variables['element']['#original_link']['mlid'];
  // Add class for a.
  $variables['element']['#localized_options']['attributes']['class'][] = 'menu-' . $variables['element']['#original_link']['mlid'];
  return theme_menu_link($variables);
}
0
Brian G123