Add Class or ID to Menu Items

Question

• Module: Popups
• Site: http://www.mastersfunds.com.php5-23.dfw1-2.websitetestlink.com/images/slide1.jpg Read Me: http://www.mastersfunds.com.php5-23.dfw1-2.websitetestlink.com/README.txt

Brief: I need to add a popup form to the menu links STAY INFORMED on the top-right and sidebar menu. I tried the Popups module, which loads all of my sites pages blank/white when activated. I am using it, but I am not sure how to use it.

The README.txt file has 4 ways of adding it, and I would like to use the second method (adding "popup" as CSS class to an existing link), but I am unable to add a custom CSS class/ID to a specific menu item. Is there a module that can do this, or does anyone know a easy way to setup?

Answer 1

I am pretty sure that the Menu Attributes module will work for you. It adds several options to the menu entries, including ID and class attributes. You would just need to edit the menu entries that you need this class on.

Answer 2

POPUPS is right. But you're going to have to implement an override to hook_menu to iterate through your specific menu items and identify which one you want to put the class='popup' to. With this, I suggest you create your own module to handle all kinds of overrides for your site. You can then drop in there overrides for your own custom menu themes. I think this is a good tutorial for how you can theme menus indvidually here

and do not forget to revisit your theme page or clear your cache to effect the changes. Do not forget also to have popups module (see its configuration) scan all links with popups class.

Answer 3

Module "Menu attributes" will do the trick, you can add Class or ID to each menu item. If you need to add a span to the WORD itself i.e. seperate it from the tag. you need to add this code to your template.php file. As you can see in the code, I used this to add Class Displace to my menu items so I could then use a image as a menu button from CSS.

Can't recall where this code came from but it wasn't mine, so I can't help other then provide it. cheers.

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

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

      $element['#localized_options']['html'] = TRUE;
      $linktext = '<span class="displace">' . $element['#title'] . '</span>';

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