March
11
Main Menu with images only
The fact that you're able to show your menu modules with images only is something, that only recently became a part of Joomla. Because the settings are placed under your module in the Module Manager, people sometimes tend to forget it.
It's actually pretty simple:
- Upload your menu images to the images/stories directory
- When creating a menu item, be sure to select a menu image under "Parameters (System)"
- Go to the Module Manager and select your menu. Under "Other Parameters" set "Show Images" and "Menu Image Link" to yes.
Basically this will output something like, depending on how many menu items you have:
<ul class="menu">
<li><a href="mymenulink1"><img src="menuimage1.jpg" /></a></li>
<li><a href="mymenulink2"><img src="menuimage2.jpg" /></a></li>
<li><a href="mymenulink3"><img src="menuimage3.jpg" /></a></li>
<li><a href="mymenulink4"><img src="menuimage4.jpg" /></a></li>
<li><a href="mymenulink5"><img src="menuimage5.jpg" /></a></li>
</ul>
If you open your page in a browser window, you will se you menu images in a horizontal list. All you have to do now is to tell Joomla NOT to display the list. If you want a vertical menu, you need something like this in your CSS:
ul.menu {
padding: 0;
margin: 0;
}
ul.menu li {
list-style:none;
display:block;
}
If you want the menu images to form a horizontal menu, tell them to float left:
ul.menu li {
list-style:none;
float: left
display:block;
}
Remember, that if you float something, always clear the float afterwards. Or else, browsers will not display your page normally. I always put a <br class="clearfloat"> after my floated elements. This is the class CSS:
.clearfloat {
clear:both;
height:0;
font-size: 1px;
line-height: 0px;
}
That's all you need to display a menu with images only. If you're looking for more features (such as rollover images or dynamic menu items) be sure to check out the Extended Menu extension.


