Joomla! Documentation™

Here's how to get a real rollover image menu using on the Cascading Style Sheet (CSS).

Displaying images for menu items is standard in newer Joomla releases. No code changes to PHP files are needed.

In this example we'll edit the horizontal menu on top of the rhuk_milkyway template. Here are the general style rules for this menu:

#pillmenu {
  white-space: nowrap;
  height: 32px;
  float: left;
}

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

#pillmenu li {
   float: left;
   background: url(../images/mw_menu_separator.png) top right no-repeat;
   margin: 0;
   padding: 0;
}

#pillmenu a {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  font-weight: bold;
  float:left;
  display:block;
  height: 24px;
  line-height: 24px;
  padding: 0 20px;
  color: #000;
  text-decoration: none;
}

Most important rules are:

• float:left; for the <li> tags. This makes the menu displaying horizontal.

and

• display:block; for the <a> tags. This makes the link tags fill their whole width and height even if there is only a 1 x 1 pixel image inside.

1. In the settings of your menu module, set both Show Menu Images and Menu Image Link to Yes. You'll find these settings under Other Parameters in the module configuration.
2. Upload a blank (tranparent) 1x1 pixel GIF file to your images/stories folder. (Usually, people take a 1x1 pixel transparent GIF file.)
3. Edit your menu in the backend. Click the menu item you want to edit.
4. Open the system parameters of this menu item and change the menu image for this item to the 1 x 1 pixel transparent image.
5. Repeat the two steps above for every menu item you want to replace with an image.
6. Preview your site. All menu items should appear empty now.
7. Open the template.css file of your template. If you use the template edit function in the Joomla backend, verify that the file is writeable.
8. Now we need to define the "real" images as background images for our items as CSS rules.

Here's an example:

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

#pillmenu li.item28 a:hover {
  background: url(../images/home-over.png) 0 0 no-repeat;
}

In this example we used item28 because 28 is the itemId property of the particular menu item. You can see the item IDs when you open your menu in the backend.

Enter these rules for every menu item you want to style. Use one rule for the normal state and another for the hover state.

Of course you could use a third special image for the currently selected (active) item. Then you would just use a third rule like this:

#pillmenu li#current.item28 a {
  background: url(../images/home-current.png) 0 0 no-repeat;
}

That image would not change on hover. You would need a fourth rule if you want to change that too on rollover.

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

The final result is a nice rollover image menu without Javascript nor an additional module.

There is an example page using the rhuk_milkyway template. You can see it here. Please note the first item of the top menu using the image instead of text.

I modified the "pillmenu" on top of the page. If you want to mod another menu you will have to use the ID of its container div. Look at the HTML source of your template to find it.