I have the following menus
about us
company
menu 2
our work
menu 1
menu 2
news
contact
jobs
I like to insert an extra li between each top level menus (about us, our work, news, contact, jobs) to make them look like "about us | our work | news | contact | jobs "
I looked at template.php and I have themename_menu_link, but I don't know how to compare the variable to check if it is a top level menu or not.
The only way I can think of is as follows:
template.php
<?php
function YOURTHEME_menu_tree__YOURMENUNAME(&$variables) {
global $cur_level;
$cur_level++;
return '<ul class="menu level-' . $cur_level . '">' . $variables['tree'] . '</ul>';
}
?>
page.tpl.php
<?php print render(menu_tree('YOURMENUNAME')) ?>
This will give each level an unique class for it's level. Though, there is one big problem with this approach, and that is that menu_tree is working from the bottom up. So you will end up in the following level classes:
ul .level-3
li
li
ul .level-2
li
li
ul .level-1
li
li
li
So, you can never actually be sure about which classname the top level will have, only if you know for sure that there will always be an X count of levels.
Edit So, just to be clear about my solution here above, this is the only way I can think of doing this programatically at theme level. If you could use a module like Nice Menu's (like suggested above) you should really be using that, since this is more a kind of workaround than a real solution to Drupal's sturdy menu system...
The above solutions only works if the number and structure of the menu links remain the same. The problem is whenever you'd add a link the level number of the top most ul changes. Whenever the top most ul number changes, your css that targets a ul class with that number breaks:
Here is a solution that fixes this problem:
In the first function we output the UL class when the UL is created.
function YOURTHEME_menu_tree__menu_secondary_menu($variables) {
global $cur_level_menu_secondary_menu;
$class = ($cur_level_menu_secondary_menu == 1) ? 'secondary-menu' : 'secondary-menu--submenu';
$output = '<ul class="' . $class . ' ' . 'secondary-menu--' . $cur_level_menu_secondary_menu . '">' . $variables['tree'] . '</ul>';
$cur_level_menu_secondary_menu--;
return $output;
}
In the second function we save the current depth in a global variable $cur_level_menu_secondary_menu.
function YOURTHEME_menu_link__menu_secondary_menu(array $variables) {
$element = $variables['element'];
global $cur_level_menu_secondary_menu;
$cur_level_menu_secondary_menu = $element['#original_link']['depth'];
$sub_menu = $element['#below'] ? drupal_render($element['#below']) : '';
$output = l($element['#title'], $element['#href'], $element['#localized_options']);
return '<li' . drupal_attributes($element['#attributes']) . '>' . $output . $sub_menu . '</li>';
}
Thus the top most UL will always have the number 1.
<ul class="secondary-menu secondary-menu--1">
<li>Menu Link</li>
<ul class="secondary-menu--submenu secondary-menu--2">
<li>Menu Link</li>
<li>Menu Link</li>
<ul class = "secondary-menu-submenu secondary-menu--3">
<li>Menu Link</li>
</ul>
<li>Menu Link</li>
</ul>
<li>Menu Link</li>
</ul>
Rather then doing it with jquery you should try with modules, there are already lots of modules for this requirement, try with "Nice Menu".
Looks like there's a 'depth' key for each links.
function yourthemename_menu_link(array $vars)
{
$depth = $vars['element']['#original_link']['depth'];
}
you can check depth to see if it is the first level.
css pseudo codes?