March
10

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:

  1. Upload your menu images to the images/stories directory
  2. When creating a menu item, be sure to select a menu image under "Parameters (System)"
  3. 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.

Search

Donate

Please consider making a small donation to the development of the Flashfeed extension, this blog and my other Open Source projects. The products are all free and developed in my spare time when I'm not studying. In other words, help me buy pasta and ketchup.