0

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.

  • Why don't you try css pseudo codes ? – niksmac Jun 1 '12 at 1:44
  • @NikhilM // enlighten me please. How do I put | using css? – Moon Jun 1 '12 at 17:03
4

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...

| improve this answer | |
  • This has to be done in li level since li has to have '|'. I don't see how I do that with ul class. – Moon Jun 1 '12 at 17:05
  • You could use the $cur_level at theme_menu_link to use the level at li level. Something like this: function YOURTHEME_menu_link(&$variables) { global $cur_level; // Then implement, see the API for default code for this block... – Ambidex Jun 4 '12 at 13:15
1

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>
| improve this answer | |
0

Rather then doing it with jquery you should try with modules, there are already lots of modules for this requirement, try with "Nice Menu".

| improve this answer | |
-2

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.

| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.