2

In page.tpl.php I have the following to echo out the main menu:

<?php if ($main_menu): ?> <?php print theme('links__system_main_menu', array('links' => $main_menu, 'attributes' => array('id' => 'top', 'class' => array('links')))); ?> <?php endif; ?>

The site is responsive so on desktop monitors it displays like this:

enter image description here

But as you reduce the screen to mobile size it turns into a navigation list that can be opened and closed with a button. See here:

enter image description here

However the desired effect is to have small descriptions for each of the menu items in the mobile version simply by using <p class="monly">little description</p> wrapped within the menu li and a tags. See here:

enter image description here

I also want to add CSS class 'nobile' to tthe list item 'Home' in the menu so that it doesn't display on the mobile version.

So how can I add this CSS class to the 'Home' <li>? And how do I go about adding the link descriptions to each <li>? Can I use a hook in template.php? If so how do I go about this?

Thanks for your help!

Improve this question

1 Answer 1

Reset to default
5

You can add a custom class to menu items by using the Menu Attributes module. You can also use hook_menu_link for the same. For displaying the menu description, here is a sample code. Paste it in your template.php file

/** * Implements theme_menu_link(). * Adds menu description under main menu */ function themename_menu_link(array $variables) { $element = $variables['element']; $sub_menu = ''; $element['#localized_options']['html'] = TRUE; if ($element['#below']) { $sub_menu = drupal_render($element['#below']); } if ($element['#original_link']['menu_name'] == "main-menu" && isset($element['#localized_options']['attributes']['title'])){ $element['#title'] .= '<span class="description">' . $element['#localized_options']['attributes']['title'] . '</span>'; } $output = l($element['#title'], $element['#href'], $element['#localized_options']); return '<li' . drupal_attributes($element['#attributes']) . '>' . $output . $sub_menu . "</li>\n"; }

Note : You've to use css/js to show/hide the menu description based on the screen size.

Improve this answer
8
  • Thanks for your help @Sharan! any chance of adding comments to this function? Added it, and doesn't seem to have changed anything. But hard for me to debug because I don't really understand what is happening :P :S Commented Oct 1, 2012 at 14:16
  • I'll try to add few comments in the function... Commented Oct 1, 2012 at 14:28
  • Hey @Sharan I can't seem to get this working and displaying the description when I put it in template.php :S Have you tested it yourself? Commented Oct 17, 2012 at 13:08
  • Ya I tested it on my site... Did you replace theme_menu_link with your theme name ? Anyways I updated the code above to account for any typo... Check now and tell me the result... Commented Oct 17, 2012 at 17:08
  • Yes set the theme name @Sharan. Could it be because I'm printing the menu like this <?php print theme('links__system_main_menu', array('links' => $main_menu, 'attributes' => array('id' => 'top', 'class' => array('links')))); ?> ? Commented Oct 17, 2012 at 17:45

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.