Hi all,

I am in need of some code to be able to produce unique ID's or classes menu items, this doesnt have to happen manually, the BIG problem I have is IE6's problem with the last-child pseudo class.

I cannot use css specificity to apply a style or remove a style from the last menu item, this is fine in the primary navigation as it assigns each link uniqe classes and/or ID's.

Is there some way to have this code output on every menu? I know its surplus code but its gives better control over the list items.

Either that or some way to have unique classes and ID's output on every <li> element in a menu.

Thanks in advance for your time it is much needed and much appreciated.

Regards
Enrico

Comments

davemybes’s picture

Enter the following code into template.php:

/** 
 * Override menu links output
 * NOTE: change function name to match theme name
 **/

function cfhu_menu_item($mid, $children = '', $leaf = TRUE) {
  return _phptemplate_callback('menu_item', array(
        'leaf' => $leaf,
        'mid' => $mid,
        'children' => $children
    )
  );
}

Now create a file called menu_item.tpl.php and put this code into it (include the php tags):

 $link = menu_item_link($mid);
 $css_id = strtolower(str_replace(' ', '-', strip_tags($link)));
 $css_id = str_replace('&amp;','and', $css_id);
 $css_id = str_replace('!','', $css_id);
 $link = str_replace('">', '"><span>',$link);
 $link = str_replace('</a>', '</span></a>',$link);
 $output = '<li id="link-'.$css_id.'" class="'. ($leaf ? 'leaf' : ($children ? 'expanded' : 'collapsed')) .'">'. $link . $children ."</li>\n";
 print $output;

You can modify the last code to output whatever you want. At the moment it puts the words of the link as the CSS id with space and other odd characters replaced by dashes.

______________________________________________________________________________________________________
Need help? Check the FAQ and the Handbooks first.

______________________________________________________________________________________________________

Cocoon-1’s picture

Thanks alot for that prompt reply, ill give it a go and see if it does the job.

Thanks again.
Enrico

davemybes’s picture

Hi Enrico,

Sorry, but I forgot to mention that this works with Drupal 4.7. I haven't tried it with 5.x, but if I recall, 5.x does that already for you, but uses numbers instead of the title.

______________________________________________________________________________________________________
Need help? Check the FAQ and the Handbooks first.

______________________________________________________________________________________________________

Cocoon-1’s picture

Hi incrn8,

No it worked fine thankyou very much, 5x seems to only do that for the primary nav so this solution was perfect, a little surplus code on the frontend but worth it in some cases.

So thankyou for your help its much appreciated.

Enrico

davemybes’s picture

Glad to hear it worked. Now I know its 5.x compatible too - thanks for testing it for me ;)

______________________________________________________________________________________________________
Need help? Check the FAQ and the Handbooks first.

______________________________________________________________________________________________________

balsama’s picture

Can anyone clarify which part of the code to be added to the template.php file is the theme name? Is is "cfhu_menu_item"?

Thank you

/*EDIT*/

Disregard. I figured it out.

For others that might have the same question, the theme name is "cfhu". Replace that with your theme name and leave everything after it.

seanc123’s picture

Thanks a lot man for this snippet of code. I greatly appreciate it. You are a good man :)

elizann’s picture

I used this code in Drupal 5 and it was great! but now that we have upgraded to Drupal 6 I am having problems. Does anybody have an upgrade?