How to theme a menu block in Drupal?

Question

This should really be a basic question but I simply don't get it after hours of searching. The question is, how do I theme menu blocks in Drupal 7?

I've created three different blocks all based on the main menu. Now I want to:

1. create unique HTML for all three blocks, that means modifing the surrounding wrapper and the <ul> and <li> that builds the menu. I wanna set special classes and remove all of the Drupal-added stuff

2. attach different classes to the different levels within each block. One of blocks will show two levels of the menu, i.e. it will display a submenu. I want to set a special class on the for the submenu...

This seems impossible... :(

Thank you in advance for the help!!!!

Answer 1

Theming is a tricky beast that often varies a lot depending what you need to do. Even with your very detailed description I can still say "it depends", but here are a couple steps that may help you get pointed in the right direction.

Step 1: Use a block tpl.php as suggested by Caffeine Addict. If you're not sure what to name the .tpl.php, I recommend the Theme Developer module. It's buggy, but you can use it to select an particular element and have it tell you suggestions for naming of .tpl.php files.

Step 2: Use a theme / preprocess function in template.php to modify the pre-defined variables and markup. Be sure to check on the theme_menu_tree & template_preprocess_menu_tree functions on api.drupal.org for starting points. If you're using the devel module, use dpm($variables); in each of those to see what you have to work with from the start.

I hope that helps! I agree with Caffeine Addict when he says that superfish might be an alternative. You should also probably check out the menu block module for breaking out conditional sub-sections into their own blocks.

Answer 2

In addition to what davidneedham said, to change what Drupal added to your menu HTML tags, you can override them. Here it is added classes:

<ul class="expanded">
  <li class="firstleaf">...<li>
  ...
</ul>

i did not find a way to remove this classes, but you can override them in your block--system--main_menu.tpl.php file, like this:

li.expanded,
li.collapsed,
li.leaf {
  padding: 0 0 0 0;
  margin: 0;
}
ul.menu li {
  margin: 0 0 0 0;
}

and then print your menu content:

<?php echo $content; ?>

I'm new in Drupal, wish my post can help you! :)

Answer 3

I would suggest to start with installing the Zen theme and follow the instructions inside the theme to setup a starter sub theme. This has all the information needed to learn theming in drupal and even how to add your own stylesheets etc.

This will allow you to start editing the templates for menu blocks and set your own html wrappers and classes.

For setting extra classes on blocks i would use this module: http://drupal.org/project/block_class

Then just edit the block and you will see an extra section for adding additional classes to the block.