2

I need to put a class/ID on the actual li element as each link in the menu has a color-coded background when active meaning, I can't just style ".active-trail" as that will be the same color for every link.

Creating a menu and using the CSS ID or class puts the ID/class on the a element, not on the <li> tag.

I could write something in jQuery, but I thought there might be a way in Drupal.

The output I want would be like the following.

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

You can use menu attribute module which provide functionality to set id or class for the menu item.

This simple module allows you to specify some additional attributes for menu items such as id, name, class, style, and rel.

  • 2
    This modules the attributes to the <a> tags of a menu. I would like to add attributes to the <li> tag instead! This module is nice, but it doesn't do what I need it to! :( – Solomon Closson Jan 16 '14 at 3:38
  • @SolomonClosson, then you need to create your theme functions and if you have any issue, then you can ask questions. – Jayendra Kainthola Jan 16 '14 at 5:17
1

You need to use theme_menu_item_link()

The following is an example that I pulled from an old site:

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']);
}
  • 2
    Again, this is adding attributes to the <a> tags of a menu, NOT the <li> tags! I need to add attributes to the <li> tags of a menu! – Solomon Closson Jan 16 '14 at 3:39
0

You can add the below code to your template.php. Reference article: 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

For Drupal 8 you can use the menu_link_attributes module.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.