0

I'm making a footer menu. The base-theme I use is Omega. Now I'm looking for the best way to add a CSS value to each menu-item, so Omega places them next to eachother.

Basicaly, what I would like to do is adding "grid-3" to the parent menu items... In the example you can see class="nolink" (from the module special_menu_items), I also want to add the class "grid-3".

<li class="first expanded"><span title="" class="nolink">Web Design</span>
  <ul class="menu">
  <li class="first leaf"><a href="/geek.screamingsilence.be/" title="" class="active">Drupal Design</a></li>
  <li class="leaf"><a href="/geek.screamingsilence.be/" title="" class="active">Graphic Design</a></li>
  <li class="last leaf"><a href="/geek.screamingsilence.be/" title="" class="active">Logo Design</a></li>
  </ul></li>
  <li class="expanded"><span title="" class="nolink">SEO Services</span><ul class="menu"><li class="first leaf"><a href="/geek.screamingsilence.be/" title="" class="active">Google Adwords</a></li>
  <li class="leaf"><a href="/geek.screamingsilence.be/" title="" class="active">Great Keywords</a></li>
  <li class="leaf"><a href="/geek.screamingsilence.be/" title="" class="active">Link Submission</a></li>
  <li class="last leaf"><a href="/geek.screamingsilence.be/" title="" class="active">SEO Link Building</a></li>
</ul></li>
0

You have to use hook_menu_link_HOOK

For example if your menu is the main menu you could use this example code in your template.php to add class to tag li.

function YOUTHEME_menu_link__main_menu(array $variables) {

  $element = $variables['element'];
  $sub_menu = ''; 
  /* add classes to balise li */
  $element['#attributes']['class'][] = 'grid-3';
  /*$element['#attributes']['class'][] = 'depth-' . $element['#original_link']['depth'];*/
  $element['#attributes']['class'][] = 'menu-' . $element['#original_link']['mlid'];

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

  $title = $element['#title'];

  $element['#localized_options']['attributes']['id'] = $title ;

  $output = l($lien, $element['#href'], $element['#localized_options']);
  return '<li' . drupal_attributes($element['#attributes']) . '>' . $output . "</li>\n";

}

To add the class only to the parent menu, you should use a condition to see if the menu item has children. Or make a condition to see if the tag li has the class depth-1 and then add the class grid-3.

The module Menu attributes seems to do the job too.

| improve this answer | |
  • Hmm, seems nice, can I use this hook with a custom menu also? The name of the menu is "footer menu", so YOUTHEME_menu_link__footer_menu should work? – screaming SiLENCE Jan 23 '13 at 20:20
  • yes, it's the syntax. You have to look at the machine name of your menu. If it's footer-menu, then use YOUTHEME_menu_link__footer_menu. Let me know if you succeed and with wich condition. – flocondetoile Jan 24 '13 at 5:07
  • the system name of "footer menu" seems to be "menu_footer_menu", it's working :) – screaming SiLENCE Jan 24 '13 at 8:57

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.