Easy rollover menus in Joomla
There are many ways to do rollover menus. Some people would fight to the death over their favourite way to do things. I’m not going to argue this is the best way but the simplest when using the CMS package Joomla.
This tutorial requires the Extended Menu module (which I recommend by itself as essential for any Joomla install).
Menu Images as sprites
Sprites are becoming a preferred method for storing small graphics to be displayed on a web page. It is basically taking several graphics and merging them into the same file, then extracting them by referring to specific pixel co-ordinates. In terms of the web it can help to reduce image file sizes and more importantly http requests. For more info check out this article about CSS Sprites.
I’ve decided to use this technique to store the different states of a menu image. In-active, rollover and active. As you can see I’ve put each menu state in the same file as exactly the same size, one on top of the other. The measurement that will be important later will be our height which is 44 pixels.
Once you have created your images, upload them into the /images/stories directory of your Joomla install. This is where you can select images for you menu items.
Setup menu
In the Joomla administrator, go to the menu you have created for this effect. Open up the first menu item. On the right hand side you have the option of selecting a menu image. From the drop down list, select the menu image you saved previously and then click save.
Repeat for each menu item you want to be represented by an image.
Extended Menu Module
Next is to configure your Extended Menu module in Joomla. The settings we need to take note of are the following:
- Change “Menu Name” to the name of the menu you have setup.
- Menu style should be “Flat List“.
- Set “Show Menu Icons” to “Image Only (Linked)“.
Click save to save your changes.
At this point if you view the page with your menu, you will see all 3 button states of each menu item. In order to only see the current menu state we need to apply some CSS styles.
CSS Menu Styles
Open up the CSS file for the specific Joomla template you are using and add the following (because my menu is in the header I’m preceding styles with the header ID):
#header ul li {
overflow: hidden;
height: 44px;
float: left;
}
First style here is setting the height of our button. This is essential so that we’re only seeing one state at a time. Then we set the overflow to be hidden. This ensures the non active button states are hidden from view. Floating each item allows us to create a horizontal menu.
#header ul li a {
display: block;
}
Setting the anchor to block ensures that the entire surface area of the link will be clickable. It also makes sure our button fills up the entire space we’re allotted it in the previous declaration.
#header ul li a:hover {
margin-top: -44px;
}
This is the magic part. We’re setting our anchor hover state to slide the image up revealing our next portion of the sprite. We have to do this on the anchor tag as IE6 only works when the hover state is on the anchor tag.
#active_menu {
margin-top: -88px;
}
The Extended Menu module adds an id tag to whichever menu item is active. This allows us to specify a different offset to show the active image state.
And that’s it! With a few simple lines of CSS and our Extended Menu module we’re able to create effective rollover menus with ease.
Subscribe to:
January 14th, 2008 at 9:19 am
I landed here in search of an answer to an issue that’s been haunting me as an absolute beginner with Joomla templates/development: “How do I create a menu that is made of a different image for each of its items?”
While your post has given me an important tip (Extended Menu
), I still can’t figure out how to hook individual menu items to their respective CSS background images 
January 15th, 2008 at 11:55 am
Hey Bill,
I think you can assign an image for each item (when creating a menu item), but as for assigning a background image uniquely to each item you may have some work cut out for you.
Feel free to explain what you’re trying to accomplish in more detail and I will try and answer as soon as possible.
Good Luck
January 15th, 2008 at 3:10 pm
Well it really depends how you’re looking to accomplish this. The technique I laid out is specifically to avoid having to use background images in CSS. By using a single image (which shows up in an img tag) for all 3 states, we’re only using the CSS to offset that image by the desired amount.
April 28th, 2008 at 11:02 am
[…] CSS Sprites - This technique was perfected back in the days when video game consoles had limited memory. They ended up with little 16×16 pixel blocks with which to work in. Applying this technique to web page design we can combine similar images in the same file and use CSS to offset. This is most easily done with buttons or images of exactly the same size. Take a look at this technique for doing CSS sprite rollover menu buttons. […]
May 2nd, 2008 at 5:20 am
I was wondering if it is possible to work with submenu’s in image only mode.
I used this sprites / extended menu technique to make a menu and it works fine. Now I want sub menus too, so I made sub menu items in the menu with images linked to them too. Unfortunately, the sub menu items don’t show up in the menu style “flat list”. When I choose menu style “select list”, the menu items do show up, in text.
May 2nd, 2008 at 8:32 am
Well, I’m not totally sure how you’re trying to do the submenu but this is how we do it. You first create the entire menu structure in the Joomla administrator. Then we setup the top level menu. You can limit how many menus the top level shows, we usually only show 1 level.
Then from the module manager create another module to hold your submenu. Change the “begin with level” option to 2 to only show the 2nd level menu items and below.
Joomla 1.5 mainmenu module has this ability built in, although they still don’t have the ability to do image only menus without a hack.
May 4th, 2008 at 1:54 am
It worked! But I’m not yet content with the menu behavior.
I’m using joomla 1.5.3, so I placed main and sub menu items into one joomla menu.
I tried your suggestion to begin with a higher level and that worked! (I should use “begin with level” 1 instead of 2 because for some reason the levels are numbered from 0 here). Later I found that setting “Menu Count” in the extended menu module to 2, both main and sub menu are showed using only one extended menu. So far so good.
Currently, the submenu is showed after clicking on the parent menu item. It is placed in a row below the (single-row) main-menu and lines out entirely left, no matter the location of the parent menu item. The submenu stays on screen when I choose a sub menu option, and only disappears when I choose another parent menu.
1) I would like to hide the sub menu items after selecting one of them.
2) Is it possible to locate the sub menu items below the parent menu item?
(so a behavior more or less like a windows menu or, let’s say, www.ge.com)
3) Answering the questions will cost you some time. Maybe you would like to be paid for your efforts?
May 16th, 2008 at 6:07 pm
Hi! I am a Berkeley student working on a site for the co-ops I live in (see link). I’m trying to integrate your image menu with a template called JSN Epic. I followed the above instructions and it’s not working… but I think the problem has to do with my template’s CSS. I put the images in the toolbar, changed the CSS parts which say “header” to “toolbar” and its still not working. If you could give me some help, I would love you forever! Thank you!
May 28th, 2008 at 5:18 pm
How would this work with SEO friendly URLs enabled? I’ve tried everything possible but am pulling my hair out! I’ve noticed on numerous Joomla sites that they have SEO turned on, AND the ID is passed without issue. When I view source when I turn SEO on, it doesn’t apply the id thus won’t apply the effect…
any input?…
Thanks in advance,
Phil
May 30th, 2008 at 6:54 pm
Never mind, I did a few things (primarily did the SEO patch for Joomla 1.5+) and now it seems as if it’s working… thanks for the great tut!
July 17th, 2008 at 9:54 am
Hi! I have tried this code for a verticle menu but it always ends up looking strange. I have modified the CSS for my image height etc but this just isn’t working for me.
Any tips on making this work for a verticle main menu?
Best Regards.