Print Primary and Secondary Menu Links separately

Question

I have a main menu with primary, secondary and tertiary links. The primary links will be positioned top right of the page. I want the sub menus (secondary/tertiary links) to print in a separate wrapper that will span the width of the browser. I cannot use absolute position because I need the sub menu to push down the content below it when I hover over the primary links. How can I do this with templates?

Answer 1

Check out the theme_menu_link and theme_menu_tree hooks. You can add them to a custom theme, and they give you full access to the links as they are built.

Take a look at the following line in theme_menu_link:

if ($element['#below']) {
  $sub_menu = drupal_render($element['#below']);
}

If you add a test to check if the link being tested is top tier than you can change the $element['#below'] to suit your needs. checking for top tier is as simple as

$element['#original_link']['plid'] == 0

The parent link id of top tier elements is 0, so this works out. Then, if it is top tier and has links below it, add a theme wrapper that will allow you do what you want it to. For example:

if ($element['#below']) {
  if ($element['#original_link']['plid'] == 0){
    $element['#below']['#theme_wrappers'][] = 'my_custom_theme_wrapper';
  }
  $sub_menu = drupal_render($element['#below']);
}

I am seeing the original theme wrapper is menu_tree__main_menu. If you want to completely replace it use you should unset that one, then set a new one as mentioned above.

If you want some pointers on theme wrappers check this post.

Answer 2

I think you should create a menu block for the 1st and one for the 2+ level of main menu which you can format with css separately.