1

I would like to add a specific class to specific menu item, so that the menu item would show an image on hover.

Basically I want to implement this in a menu item link:

<div class="thumbnails">
<a href="#">Some_name<span><img src="http://www........jpg" alt="image1" height="30%" width="30%" /></span></a>
</div>

I have tried Menu Attributes module but I couldn't specified a class I wanted to add. Is there any other way how to do it please?

1

Menu CSS Names

This is a very simple module that takes the link text of each drupal menu item and adds it as a css class name to the menu's element. Using these class names, each menu item can be styled separately with css. This is also very useful for css sprite techniques.

There are no admin settings for this module, it starts doing its work once the module is enabled. All caches are automatically cleared at this time also. This module works with menus in blocks (including Primary Links) and menus in themes (menus that are enabled from the theme's configuration page).

  • Thank you Adi for your answer, i tried Menu CSS Names module, but when i tried to apply css code for showing an image when hover over the link it completely messed up whole page. The Menu HTML module allows me to input class in link title but it's still not what i wanted. Maybe the mistake is in my CSS code but i dont know how to insert it in comment, can you please help me with it ? Thank you very much – Sun_Dancer Oct 30 '15 at 12:16
  • create a hierarchy from main menu class to your class then apply css on it – Adi Oct 30 '15 at 12:52
  • I'm not sure i understand what you mean, can you please show me how? Thank you – Sun_Dancer Oct 30 '15 at 13:02
  • #main-id .sub-menu class .your definedclass like this – Adi Oct 30 '15 at 13:51
0

You could use theme_menu_link():

function MY_THEME_menu_link(array $variables) {
  $element = $variables['element'];
  $sub_menu = '';

  if ($element['#below']) {
    $sub_menu = drupal_render($element['#below']);
  }
  $output = l($element['#title'], $element['#href'], $element['#localized_options']);

  // Add a div wrapper to my special link.
  $prefix = '';
  $suffix = '';
  if ($element['#href'] == 'foo/bar') {
    $prefix = '<div class="thumbnails">';
    $suffix = '</div>';
  }

  return $prefix . '<li' . drupal_attributes($element['#attributes']) . '>' . $output . $sub_menu . "</li>{$suffix}\n";
}
  • Thank you for your answer Tyler, I've been trying to add theme_menu_link() function to template.php all day but it doesn't seem to make any difference in menu structure. I just can't figure it out. – Sun_Dancer Oct 30 '15 at 13:00
0

Try to clear your Drupal cache and check once. Further, you can check this link for your purpose.

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.