Creating Tabbed Style Horizontal Menu in Joomla! 1.5 Howto

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.

A tabbed style horizontal menu

A 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 class="item29">
		<a href="/index.php?option=com_content&view=article&id=22&Itemid=29"><span>Features</span></a>
	<li class="item18">
		<a href="/index.php?option=com_newsfeeds&view=newsfeed&id=1&feedid=1&Itemid=18"><span>News</span></a>
	<li class="item30">
		<a href="/index.php?option=com_content&view=article&id=27&Itemid=30"><span>The Community</span></a>

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>

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>

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>

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
menu_top-l.png menu_top-r.png
Hover / Active state
menu_top-l.png menu_top-r.png

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].

Bookmark and Share


Tags: , ,