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)
<?php function 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 = '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.