Replacing menu items with images

Question

I'm looking for a way to display a menu items as images (with rollover) rather than the usual text links. I found the module Menu Icons, but as the name implies, it's designed to place the icon next to the link. Does anyone have a technique for doing this? Perhaps I have to create some sort of custom block or panel, but I thought maybe there was an easier way.

Answer 1

You can use the Menu Icons module to implement the functionality you are looking for - I've done this multiple times.

You simply need to customize the menu_icons_css_item.tpl.php file so that the image is displayed using the CSS image replacement technique rather than positioning the image as an icon-like background. For roll-over functionality, each image you upload with the image icon module would need to include the static and roll-over versions of the menu image.

Here is sample content of a menu_icon_css_item.tpl.php file I've used before. This is for Drupal 6, so some of the syntax may need to be updated if you are using Drupal 7.

<?php
$base_url = $_SERVER['DOCUMENT_ROOT'];
$image_info = getimagesize($base_url.$path);
$width = $image_info[0];
$height = $image_info[1]/2;
?>

ul.links li.menu-<?php print $mlid ?> a {
  background-image: url(<?php print $path ?>);
  background-repeat: no-repeat;
  background-position: 0 0;
  height:<?php print $height?>px;
  text-align: left;
  text-indent: -9999px;
  width: <?php print $width?>px;
}

ul.links li.menu-<?php print $mlid ?> a:hover {
  background-position: 0 <?php print $height?>px;
}

After you've created a customer menu_icons_css_item.tpl.php file in your theme, you will need to delete the CSS file that the Menu Icons module previously generated, so that it will generate a new file using this template. It should be in your sites/default/files folder.

Of course, if you do not need to allow site admins to update menu item images via the Drupal UI, you could just implement the CSS image replacement technique within your theme, without needing a helper module like Menu Icons.