Take the 2-minute tour ×
Drupal Answers is a question and answer site for Drupal developers and administrators. It's 100% free, no registration required.

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.

share|improve this question

1 Answer 1

up vote 5 down vote accepted

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.

share|improve this answer
    
Thanks, works great (P.S. I'm using Fusion Starter as my base template) –  user379468 Jan 19 '12 at 15:03
    
I love seeing folks using Fusion! :D –  sheena_d Jan 19 '12 at 18:18

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.