Add class and extra HTML to specific menu items with hook

Question

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:

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:

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:

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!

Answer 1

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.