J1.5:Image only menu items with rollover effect

The "J1.5" namespace is an archived namespace. This page contains information for a Joomla! version which is no longer supported. It exists only as a historical reference, it will not be improved and its content may be incomplete and/or contain broken links.

I wondered why it's not possible to create an "images only" menu in Joomla. While searching the forums I found this original post by mSalcher.

His solution adds an additional parameter "Menu Icon Link" to the menu module. If this parameter is set and an image has been selected for a menu item then this item will be displayed without text as "image only".

Here are the changes to be made to get this working in "legacy mode":

/modules/mod_mainmenu/legacy.php line 144:

Code to be replaced:

if ($params->get('menu_images')) {
  $menu_params = new stdClass();
  $menu_params = new JParameter($mitem->params);

  $menu_image = $menu_params->def('menu_image', -1);
  if (($menu_image <> '-1') && $menu_image) {
    $image = '<img src="'.JURI::base(true).'/images/stories/' . $menu_image . '" border="0" alt="' . $mitem->name . '"/>';
		 
    if( $params->get('menu_images_link') ){
      $txt = '<a href="'.$mitem->url.'" class="'.$menuclass.'" '.$id.'>'.$image.'</a>';
    } else {
      if ($params->get('menu_images_align')) {
        $txt = $txt . ' ' . $image;
      } else {
        $txt = $image . ' ' . $txt;
      }
    }
  }
}

/modules/mod_mainmenu/mod_mainmenu.php line 41:

Code to be added:

$params->def('menu_images_link', 0);

/modules/mod_mainmenu/mod_mainmenu.xml line 58:

Code to be added:

<param name="menu_images_link" type="radio" default="0" label="Menu Icon Link" description="Link on Images Instead of Text">
  <option value="0">No</option>
  <option value="1">Yes</option>
</param>

I wanted to get this working in "non legacy mode" so I made these additional two changes:

Change in modules/mod_mainmenu/helper.php line 51:

if (array_key_exists($row->parent, $ids)) {
  //Add 1 line:
  $row->ionly = $params->get('menu_images_link');
  $menu->addNode($row);

line 295:

if ($iParams->get('menu_image') && $iParams->get('menu_image') != -1) {
  $image = '<img src="'.JURI::base(true).'/images/stories/'.$iParams->get('menu_image').'" alt="" />';
  //Aadd 3 lines:
  if($tmp->ionly){
    $tmp->name = null;
  }
} else {
  $image = null;
}

That's it.

And here's a way to get an real rollover image - CSS only - menu with this solution. Make the changes above and enable the new parameter for your menu module. Then upload a blank 1x1 pixel gif file to your images/stories folder and select this blank image as menu image for your menu items.

Now your menu appears empty because your itmes are displayed as 1x1 transparent gifs only. Now go to the template.css and define the "real" images as background images for your items.

Here's an example:

First the general setings for this menu:

/* horizontal top menu */
#topmenu {
  white-space: nowrap;
  height: 32px;
  float: right;
  vertical-align: top;
  margin-top: 14px;
}

#topmenu ul {
  margin: 0;
  padding: 0;
  list-style:none;
}

#topmenu li {
  display: inline;
}

#topmenu a {
  float:left;
  display:block;
  text-decoration: none;
}

And now the entries for every menu item you want to style:

#topmenu li.item1 a {
  width: 31px;
  height:28px;
  background: url(../images/home.png) 0 0 no-repeat;
}

#topmenu li.item1 a:hover, #topmenu li#current.item1 a {
  background: url(../images/home-over.png) 0 0 no-repeat;
}

#topmenu li.item64 a {
  width: 27px;
  height:28px;
  background: url(../images/links.png) 0 0 no-repeat;
}

#topmenu li.item64 a:hover, #topmenu li#current.item64 a {
  background: url(../images/links-over.png) 0 0 no-repeat;
}

And so on... As you can see you will have to use the item numbers to style the items directly.

The result is a nice rollover image menu without any line of javascript or an additional module :)

Feel free to contact me if you like this little hack or have any questions. I'd like to thank the author of the original post again!