Customizing menu html

Question

How do you set an id for the menu's root <ul> tag?

I know about the module "Menu Attributes" but that doesn't let me add an ID to the root <ul>, or at least I do not know how.

Also, I've seen a solution which uses theme_menu_tree() and a regex check, but that's just too hacky for my taste.

Answer 1

In D7 default theme bartik, you can see the main menu is rendered using a theme hook links__system_main_menu:

 <div id="main-menu" class="navigation">
    <?php print theme('links__system_main_menu', array(
      'links' => $main_menu,
      'attributes' => array(
        'id' => 'main-menu-links',
        'class' => array('links', 'clearfix'),
      ),
      'heading' => array(
        'text' => t('Main menu'),
        'level' => 'h2',
        'class' => array('element-invisible'),
      ),
    )); ?>
  </div> <!-- /#main-menu -->

links__system_main_menu is a theme hook pattern of the form [base hook]__[context]. When links are themed with theme('links__system_main_menu', $vars), theme() will search for and use theme_links__system_main_menu() if it has been defined. If not, it will use theme_links().

Drupal will use MYTHEME_links__system_main_menu(), if you define it in your theme. Thus, you could implement the hook_links__system_main_menu as follows. Probably you will do that in the template.php file in your theme folder.:

function mytheme_links__system_main_menu($variables) {
  $html = "<div>\n";
  $html .= "  <ul id=\"your_id\">\n";  
  foreach ($variables['links'] as $key => $link) {
    $html .= "<li>".l($link['title'], $link['path'], $link)."</li>";
  }
  $html .= "  </ul>\n";
  $html .= "</div>\n";

  return $html;
}

This will override the links__system_main_menu theme and customize HTML output for the main menu.

[Edit]

If you are looking for the quickest way, you just need to tweak your page.tpl.php by adding an extra wrapper to the menu ul.
For example, in the Bartik theme,

  <div id="main-menu" class="navigation">
    <div id="your-id">
    <?php print theme('links__system_main_menu', array(
      'links' => $main_menu,
      'attributes' => array(
        'id' => 'main-menu-links',
        'class' => array('links', 'clearfix'),
      ),
      'heading' => array(
        'text' => t('Main menu'),
        'level' => 'h2',
        'class' => array('element-invisible'),
      ),
    )); ?>
    </div>
  </div> <!-- /#main-menu -->

Then, you can access it using #your-id ul{ } in CSS or $('#your-id ul') in JS. But, the above code is just for example, you should not hack the core themes or modules. I assume you have your own theme.

Answer 2

You want to overwrite menu tree theming function as I mentioned in IRC. Easiest way would be to copy the attribute usage from theme_links.

Using this method does affect all menus, but it doesn't change anything for those which doesn't use attributes.

// Default theme_menu_tree
function theme_menu_tree($variables) {
  return '<ul class="menu">' . $variables['tree'] . '</ul>';
}

// Overwritten theme_menu_tree
function YOURTHEME_menu_tree($variables) {
  $attributes = array("class" => array("menu"));
  if(isset($variables['attributes']))
    $attributes = array_merge_recursive($attributes, $variables['attributes']);
  return '<ul' . drupal_attributes($attributes) . '>' . $variables['tree'] . '</ul>';
}

Answer 3

I managed to get it right with the following code, based on @Sithu's response

function themename_links__system_main_menu($variables) {  
    $html = '<ul id="menu">'."\n";  
    foreach ($variables['links']['system_main-menu'] as $key => $link) {  
        if(is_array($link)){  
            $html .= "<li>".l($link['#title'], $link['#href'], $link)."</li>";  
        }                                                                                                                       
    }  
    $html .= "  </ul>\n";  
    return $html;  
}