Remove Classes from Menu

Question

I know that this isn't a really big priority but with the default Drupal menu you get css classes like .first or .last or .active.

.first and .last are being provided by CSS3 and .active only needs to be on the <a> link not on the <li> due to the way my CSS works.

All these classes are unneeded and I'd like to remove them, so I can create a clean and efficient template.

Does anyone have any ideas how to do this (and if possible provide a small code sample)?

Thanks :)

Answer 1

Basically you're going to have to alter you're theme to provide an alternate function to provide an entry point into menu_tree_output. This means finding the block or function that renders the menu, overriding that function, and each that it calls until you get to menu_tree_output.

After that copy a changed version of menu_tree_output into your theme's template.php and modify it as necessary. You may even have to override theme_menu_link to prevent options from showing up on both the li and a elements.

For the most part though, I think you answered your own question at:

only needs to be on the 'a' link not on the 'li' due to the way my CSS works.

Obviously, a CMS cannot readily accomodate the needs of all possible combinations of CSS. I often have to add classes due to the complex needs of the navigation for crazy designs. I would count myself lucky if I didn't have to add classes, and just had extra classes available in the markup.

Answer 2

if you wanna kill off all the classes that comes out with the menu list look after the theme_menu_link() thats where the

<li class="first leaf menu-mlid-305">

comes from

if you really wanna kill all the classes you can do something like this :

function THEME_menu_link(array $variables) {
  //unset all the classes
  unset($variables['element']['#attributes']['class']);

  $element = $variables['element'];

  if($variables['element']['#attributes'])

  $sub_menu = '';


  if ($element['#below']) {
    $sub_menu = drupal_render($element['#below']);
  }
  $output = l($element['#title'], $element['#href'], $element['#localized_options']);
  return '<li' . drupal_attributes($element['#attributes']) . '>' . $output . $sub_menu . "</li>\n";
}

dump that dunction into you template.php and you the classes that the menus comes with will go kaboom - you will also remove the active classes etc, but hey the li tags are goddamn clean

Answer 3

It really depends on how you render the menu.

If the menu is rendered via menu_tree(), you can strip all classes from menu tree like that:

Solution 1 template_preprocess_menu_link():

function MYMODULE_OR_THEME_preprocess_menu_link(array &$variables) {
  // Unset all the classes.
  unset($variables['element']['#attributes']['class']);
}

Solution 2 theme_menu_tree():

function MYTHEME_menu_tree($variables) {
  // Strip all classes from menu tree.
  $variables['tree'] = preg_replace('/class="[^"]*"/i', '', $variables['tree']);
  return '<ul class="menu">' . $variables['tree'] . '</ul>';
}

You can do the same with MYTHEME_preprocess_menu_tree().

Solution 3 theme_menu_link() as @mortendk suggested.