Last updated August 23, 2009. Created on May 16, 2007.
Edited by SLIU, bekasu, ugerhard, Squidgy. Log in to edit this page.

Place this in template.php, and it'll assign a unique id to each of your menu items, allowing you to attach css (and thus icons, jquery, rollovers, etc.) to individual menu items. Very handy!

function phptemplate_menu_item($mid, $children = '', $leaf = TRUE) {
  $link = menu_item_link($mid);
  $css_id = strtolower(str_replace(' ', '_', strip_tags($link)));
  return '
  • '. $link . $children ."
  • \n"; }

    Then attach the usual css such as

    li#my_account a{
    background-image:url(../mytotallysweeticons/my_account.png);
    }
    

    Thanks goes to Nick Lewis for writing the original script - this is a slightly simpler version of that.

    For users of the Framework Theme in English
    Thanks to SteveJB for the following contribution.

    For users of the framework theme (or any theme that by default) adds odd and even classes.

    Replace (found at the bottom of the packaged template.php)

    function phptemplate_menu_item($mid, $children = '', $leaf = true) {
    static $count = 0;
    $zebra = ($count % 2) ? 'odd' : 'even';
    $count++;
    return '<li class="' . ($leaf ? 'leaf' : ($children ? 'expanded' : 'collapsed')) .' ' . $zebra . '">'. menu_item_link($mid) . $children ."</li>\n";
    }
    

    with

    function phptemplate_menu_item($mid, $children = '', $leaf = TRUE) {
    static $count = 0;
    $zebra = ($count % 2) ? 'odd' : 'even';
    $count++;
      $link = menu_item_link($mid);
      $css_id = strtolower(str_replace(' ', '_', strip_tags($link)));
      return '<li id="' . $css_id . '" class="' . ($leaf ? 'leaf' : ($children ? 'expanded' : 'collapsed')) .' ' . $zebra . '">'. menu_item_link($mid) . $children ."</li>\n";
    }
    

    to keep add and even classes while giving li's their own id.

    If you have a language other than English (say, Chinese), then you would have something like the following:

    <li id="Chinese-characters" class="leaf">
    

    Looking for support? Visit the Drupal.org forums, or join #drupal-support in IRC.

    Comments

    price9001’s picture

    Is there a Drupal 6 equivalent of this?

    remedios’s picture

    Hi,

    This module may be a good option for D6: http://drupal.org/project/menu_attributes

    I was using the menu_icons module in combination with image_cache, but they don't work well with my D6.17 upgrade and seem a little unsupported.

    GeekDrop’s picture

    Give this a try:

    
      function phptemplate_menu_item($link, $has_children, $menu = '', $in_active_trail = FALSE, $extra_class = NULL) {
    
        $search = array(' ','.');
        $css_id = strtolower(str_replace($search, '_', strip_tags($link)));
        return '
  • '. $link . $children ."
  • \n"; }
    baff’s picture

    How to make a menu icon larger than font size?

    GiorgosK’s picture

    solutions that might be worth a look
    - menu icons menus can be assigned icons
    - taxonomy menu automate the creation of menus from taxonomy terms
    - taxonomy image attach images to terms
    - #1134216: option to auto create icons for menu items that are taxonomy terms and have taxonomy_image(s) attached