How to Create Horizontal Navigation Menu Joomla 2.5

In this tutorial I will show you how to create a horizontal navigation menu with separators for Joomla 2.5 template. I will include the basic CSS styling  of the menu and will explain you how to integrate all these styles into your joomla template.

Step 1. – Create the Menu Module Position

If your template already have a module position for menu, please skip this step. If the template does not have this feature, please insert the following code into the index.php file:
<div id="menu"><jdoc:include type="modules" name="menu" style="none" /></div>
Please consider adding the new module position to the templateDetails.xml, by using the following code:
<position>menu</position>

Step 2. – Create Menu Module

In the Joomla 2.5 backend create a Menu Module and publish it to the position ‘menu’.

Step 3. – Style the Menu Points

Here is the CSS style you will have to use to create the horizontal navigation menu:

#menu { width:900px; margin:0 auto}
#menu ul{}
#menu ul li{ display: inline; list-style-type:none; border-right:1px solid #000; padding:0 10px 0 0;}
#menu ul li a{ color:#000; padding:0 0 0 10px;}
#menu ul li a:hover{ color:#d00;}
#menu ul li a.active{ color:#d00;}

This is the very basic styling of the menu points. You can change text colors and font size, space between each menu, height of the menu, etc… You can also add background images or different javascript effects.

You have to copy this CSS styles into the main joomla CSS file and you are done!

If you have any questions or need help setting up your menu, please leave a comment bellow; I’m here to help.

Share on FacebookShare on Google+Tweet about this on TwitterShare on LinkedIn