How to add classes for styling to Drupal when using menu_block?

Question

I'm using the menu_block module in Drupal for my menus. This works very well, but I want my menu items styled as an image menu. This cannot be done nicely with the default settings - the menu items look something like this:

<li class="leaf first menu-mlid-199"><a href="/this/is/some/nice/url" title="Homepage">Homepage</a></li>

I'm guessing I could used the menu-mlid-199 class to get the styling I want, because it's a unique id of each menu item, but that seems rather ugly to me. Is there any other way to add reasonably named classes to my menu items, e.g. generate them from the page title or url alias? Even just a sequence would seem nicer - like menu-item-1 and so on.

Answer 1

While your question is very clear about what you want to know (see below) it is not 100% clear to me the kind of functionality you want to achieve. So I just thought to start off by mentioning the image menu module, in case that module goes any close to what you need. Another alternative could also be the menu icons module. Other custom solution to similar problems have been discussed here.

As far as changing class attribution to menu items: classes are attributed to the menu item by theme_menu_item(). You could simply override that function from your own theme. An explanation on how to override themeable functions is given in the official drupal documentation.

Answer 2

When theming module output, always look at the .tpl.php files that are in the module directory. In this case the .tpl.php file is menu-block-wrapper.tpl.php. Copy that to the folder of the theme you're using and adapt it as needed.

Also there's some good info on styling the menu blocks in the README.txt file contained in the module package.

Practically every piece of HTML Drupal outputs is themeable, so read up on theming and how to override the function that prints out the list of menu items. If you install the Devel module you can see which functions create that list. You can then assign extra classes or id's to those items so you can theme them with CSS as much as you want.

Good luck!

Answer 3

I have changed a line

in menu_block.module:

(639) $extra_class[] = 'menu-mlid-' . $items[$key]['link']['mlid'];

into

$extra_class[] = 'menu-href-' . str_replace('/','-',$items[$key]['link']['href']);

and it works ok for me, it does not use the mlid (which I generally do not know), but the path (which I do know)