Saturday, 18 December 2010

Add an icon to menu links

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!
<?phpfunction phptemplate_menu_item($mid, $children = '', $leaf = TRUE) {
 
$link = menu_item_link($mid);
 
$css_id = strtolower(str_replace(' ', '_', strip_tags($link)));
  return
'<li id="' . $css_id . '" class="' . ($leaf ? 'leaf' : ($children ? 'expanded' : 'collapsed')) .'">'. $link . $children ."</li>\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">


<?php
 
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
'<li id="' . $css_id . '" class="' . ($menu ? 'expanded' : ($has_children ? 'collapsed' : 'leaf')) .'">'. $link . $children ."</li>\n";
  }
?>



Add odd even class to menu item


update your template.php then add preferred style to css
/* add item-odd item-even class to list */
function phptemplate_menu_item($link, $has_children, $menu = '', $in_active_trail = FALSE, $extra_class = NULL) {

static $count = 0;
$zebra = ($count % 2) ? 'odd' : 'even';
$count++;

  $class = ($menu ? 'expanded' : ($has_children ? 'collapsed' : 'leaf'));
  if (!empty($extra_class)) {
    $class .= ' '. $extra_class;
  }
  if ($in_active_trail) {
    $class .= ' active-trail';
  }
  $class .= ' item-'. $zebra;
  return '<li class="'. $class .'">'. $link . $menu ."</li>\n";
}

No comments:

Post a Comment

Source base installation of php, mysql and apache in ubuntu/ linux

Compile and Install a LAMP(Linux/Apache/MySQL/PHP) Server from Source In the last post, I described the method to install a LAMP ser...