How to create a different second level block for every menu link?

Question

I'm creating a small project and got stuck on the following:

Im using the module Menu_block to create my navigation menu second level. What i need is a different background for each second level. (Not every link needs a different background, but the compleet block.) Menu_block creates one block for all the second level items.

Now is there a way to make the one block into seven (i got seven menu links) blocks or is there an other way i could do this?

For a layout of the website see the following link: https://www.dropbox.com/s/p5nr0zm3r2eatbw/layout%20website.PNG The number 1 or 2 background is what I want to change according to the current active navigatie level 1 link.

Answer 1

Different colour second level menu items

I would not use a block for each menu item even if you could.

The menu items should have classes with their mlid (menu link id), which is unique to the menu item.

You can add different colours with css based on those classes.

Different colour second level menus based on active path

Now that I understand your question you want the whole second level menu block to be coloured based on the currently active top level menu item.

In this scenario I think it is more acceptable to have a second level menu block for each parent menu item, so that is one solution, in which case you can easily style the blocks differently as they have different block IDs.

An alternative solution, is to add a single second level menu block for your main menu, and then add this code to your theme's template.php file:

/**
 * Override or insert variables into the menu block wrapper template.
 */
function THEME_NAME_preprocess_menu_block_wrapper(&$variables) {
  $active_trail = menu_get_active_trail();
  foreach ($active_trail as $item) {
    if ((!(bool) ($item['type'] & MENU_IS_LOCAL_TASK)) && !empty($item['mlid'])) {
      $variables['classes_array'][] = 'active-top-level-mlid-' . $item['mlid'];
      break;
    }
  }
}

That code will add a class to the block like active-top-level-mlid-405 - where 405 is the mlid of the active top level menu item.

You can then theme the block using this class.

Answer 2

The block should have a id which is unique for that specific block. You can use that as a css selector and change the block background.

For example: <div id="block-nice-menus-1" class="block block-nice-menus contextual-links-region block-1 block-nice-menus-1 odd block-without-title">

You could use #block-nice-menus-1 as your css selector to change the block background.

You could also then style children elements just for that block like this:

#block-nice-menus-1 li a {}

Hope this helps.