JoomlaEZ Developers Blog

If you want to create button-like or tabbed-style horizontal menu in Joomla! 1.5 then this guide is just for you.

In this guide I will show you how to represent in Joomla! 1.5 the following tabbed-style horizontal menu.

Before creating slices and writting stylesheets to represent the menu, we need to understand the HTML structure rendered by Joomla! 1.5 menu module.

In Joomla! 1.5 administration panel, go to Extensions -> Module Manager then click any menu module (mod_mainmenu module type). Under Module Parameters you should see following options for Menu Style: List, Legacy – Vertical, Legacy – Horizontal and Legacy – Flat List. Below is HTML structure rendered by Joomla! 1.5 menu module for each menu style:

List menu style:

<ul class="menu">
	<li class="item28">
		<a href="/index.php?option=com_content&view=article&id=25&Itemid=28"><span>About Joomla!</span></a>
	</li>
	<li class="item29">
		<a href="/index.php?option=com_content&view=article&id=22&Itemid=29"><span>Features</span></a>
	</li>
	<li class="item18">
		<a href="/index.php?option=com_newsfeeds&view=newsfeed&id=1&feedid=1&Itemid=18"><span>News</span></a>
	</li>
	<li class="item30">
		<a href="/index.php?option=com_content&view=article&id=27&Itemid=30"><span>The Community</span></a>
	</li>
</ul>

Legacy – Vertical menu style:

<table width="100%" cellspacing="0" cellpadding="0" border="0"><tbody>
	<tr><td><a class="mainlevel" href="/index.php?option=com_content&view=article&id=25&Itemid=28">About Joomla!</a></td></tr>
	<tr><td><a class="mainlevel" href="/index.php?option=com_content&view=article&id=22&Itemid=29">Features</a></td></tr>
	<tr><td><a class="mainlevel" href="/index.php?option=com_newsfeeds&view=newsfeed&id=1&feedid=1&Itemid=18">News</a></td></tr>
	<tr><td><a class="mainlevel" href="/index.php?option=com_content&view=article&id=27&Itemid=30">The Community</a></td></tr>
</tbody></table>

Legacy – Horizontal menu style:

<table width="100%" cellspacing="1" cellpadding="0" border="0"><tbody><tr><td nowrap="nowrap">
	<a class="mainlevel" href="/index.php?option=com_content&view=article&id=25&Itemid=28">About Joomla!</a>
	<a class="mainlevel" href="/index.php?option=com_content&view=article&id=22&Itemid=29">Features</a>
	<a class="mainlevel" href="/index.php?option=com_newsfeeds&view=newsfeed&id=1&feedid=1&Itemid=18">News</a>
	<a class="mainlevel" href="/index.php?option=com_content&view=article&id=27&Itemid=30">The Community</a>
</td></tr></tbody></table>

Legacy – Flat List menu style:

<ul id="mainlevel">
	<li><a class="mainlevel" href="/index.php?option=com_content&view=article&id=25&Itemid=28">About Joomla!</a></li>
	<li><a class="mainlevel" href="/index.php?option=com_content&view=article&id=22&Itemid=29">Features</a></li>
	<li><a class="mainlevel" href="/index.php?option=com_newsfeeds&view=newsfeed&id=1&feedid=1&Itemid=18">News</a></li>
	<li><a class="mainlevel" href="/index.php?option=com_content&view=article&id=27&Itemid=30">The Community</a></li>
</ul>

We will use the CSS sliding doors technique and focus on the List menu style only to create the tabbed-style horizontal menu.

Now, let’s slice the menu design to following smaller images:

Normal state

Hover / Active state

After creating above slices, copy them to the images directory of your default template. Then open the file template.css under the default template’s css directory with your favorite text editor and append following stylesheets to end of that file:

.menu-tabbed-horiz {
	list-style: none;
	margin: 0;
	padding: 0;
}
.menu-tabbed-horiz li {
	float: left;
	margin: 0;
	padding: 0;
}
.menu-tabbed-horiz a, .menu-tabbed-horiz .separator {
	background: url(../images/menu_top-l.png) 0 0 no-repeat;
	display: block;
	margin-right: 33px;
	padding-left: 18px;
	text-decoration: none;
}
.menu-tabbed-horiz a span, .menu-tabbed-horiz .separator span {
	background: url(../images/menu_top-r.png) 100% 0 no-repeat;
	display: block;
	line-height: 30px;
	margin-right: -33px;
	padding-right: 18px;
}
.menu-tabbed-horiz a:hover, .menu-tabbed-horiz #current a, .menu-tabbed-horiz .active a {
	background-image: url(../images/menu_top-la.png);
}
.menu-tabbed-horiz a:hover span, .menu-tabbed-horiz #current a span, .menu-tabbed-horiz .active a span {
	background-image: url(../images/menu_top-ra.png);
}

Now, switch back to Joomla! administration panel then apply -tabbed-horiz menu class suffix (not module class suffix) to any menu module you want to present in horizontal tabbed style.

Download a sample Joomla! 1.5 template implemented above menu style [zip].

Tags: horizontal menu, joomla menu, tabbed menu

This entry was posted on Thursday, May 7th, 2009 at 11:17 am and is filed under Joomla Modules, Joomla Themes. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.