A CSS ID for Every Menu Item

As you can see, these menu links have unique icons. Yet another miracle accomplished using Drupal's PHPTemplate. This technique is especially cool because it automatically generates CSS ID's from the menu link's name.

TEMPLATE.PHP: Override theme_menu_item() (includes/menu.inc)

<?phpfunction phptemplate_menu_item($mid, $children = '', $leaf = TRUE) {  return _phptemplate_callback('menu_item', array(        'leaf' => $leaf,        'mid' => $mid,        'children' => $children    ));}?>

Now create a menu_item.tpl.php file.

menu_item.tpl.php

<?php $link = menu_item_link($mid);// replace spaces with "_", and strip HTML$css_id = str_replace(' ', '_', strip_tags($link));// render the menu link with unique CSS id.$output = '<li id="'.$css_id.'" class="'. ($leaf ? 'leaf' : ($children ? 'expanded' : 'collapsed')) .'">'. $link . $children ."</li>\n";print $output;?>

Now, we just include some CSS to make it work:

CSS file

ul.menu {	margin-left:0;	padding:0;}ul.menu ul {	margin-left:1.5em;	padding:0;}ul.menu li {	list-style-image:none;	list-style-type:none;	margin:0;	padding:0;}ul.menu li a{	background-repeat:no-repeat;	padding:0 0 0 1.5em;	background-position:left;	font-size:1.1em;	margin:0;}li#my_account a{	background-image:url(../art/menu_links/my_account.png);}li#administer a{	background-image:url(../art/menu_links/administration.png);}li#my_blog a{	background-image:url(../art/menu_links/my_blog.png);}li#create_content a{	background-image:url(../art/menu_links/create_content.png);}li#recent_posts a{	background-image:url(../art/menu_links/recent_posts.png);}li#log_out a{	background-image:url(../art/menu_links/log_out.png);}

The icons, and CSS files are included in a downloadable example theme here.