Drop Down Menu in Joomal using the std Menu Module

Why use the extension if out of the box module can serve the purporse ..
After implementing drop down menu using Extended meny module, i played around with the std menu extension and got it to work too ..

Here’s the step by step approach to convert a Std Joomla 1.5 menu module in a drop down menu. This work perfectly in IE 7 as well as Netscape

1. Create your Menu with the following Hierarchy

Menu 1
– Menu 1 Sub Menu 1
– Menu 1 Sub Menu 2
– Menu 1 Sub Menu 3

2. Make sure the parameters are set to
• Menu Style is set to List
• Always show sub-menu Items is set to Yes
• Menu Class Suffix is set to san
3. Insert this piece of JS in your template index.php tag, or in java script file that’s called from index.php

/* ********* drop down menu Java script code – start **********/
<!– // don’t need this line if using .JS file
sfHover = function()
{
var sfEls = document.menusan.getElementsByTagName(“LI”);

for (var j=0; j<sfEls.length; j++)
{
sfEls[j].onmouseover=function()
{
this.className+=” sfhover”;
}
sfEls[j].onmouseout=function()
{
this.className=this.className.replace(new RegExp(” sfhoverb”), “”);
}
}
}
if (window.attachEvent) window.attachEvent(“onload”, sfHover);
//–> // don’t need this line if using .JS file

/* ********* drop down menu Java script code – end **********/

4. Here the corresponding CSS
/****************** Dropdown Menu styling starts here **************/
.menusan
{
/* use these params to positions your menu */
position: relative;
left: 10px;
}

.menusan, .menusan li, .menusan li ul { /* all lists */
padding: 0;
margin: 0;
list-style: none;
}

.menusan li a {
display: block;
width: 10em;
color:#FFFFFF ;
background-color:#BC031F;
border:2px solid #BC031F;
text-decoration:none;
}

.menusan li { /* all list items */
float: left;
width: 10em; /* width needed or else Opera goes nuts */
border-bottom:1px solid #ccc;
}

.menusan li ul { /* second-level lists */
position: absolute;
width: 10em;
left: -98%; /* using left instead of display to hide menus because display: none isn’t read by screen readers */
}

.menusan li a:hover {
border:2px solid #8C7AD6;
background-color:#8C7AD6;
color:#fff;
}

.menusan li:hover ul, .menusan li.sfhover ul { /* lists nested under hovered list items */
left: auto; /* change is to 10px, 20px, etc for indenting the sub menue */
}
/* **************** Dropdown Menu styling end here ***************/

5. Save All and you should be good to go

6. TIPs & Trick
You can use a single menu to create multiple drop downs menus. Here’s how to do it. Just create the menu in the following hierarchy and you’ll have 2 drop down menus , Menu 1 & Menu 2.

Menu 1
– Menu 1 Sub Menu 1
– Menu 1 Sub Menu 2
– Menu 1 Sub Menu 3
Menu 2
– Menu 2 Sub Menu 1
– Menu 2 Sub Menu 2
– Menu 2 Sub Menu 3

And you can go on create more drop down menus with this. So if you’re too familiar with CSS and layouts (just like me), just use this trick. The only limitation (if any) would be one imposed by Joomal on the # of menu items you can have in a menu.

This entry was posted in CMS, Code Snippets, Joomla, Open Source, PHP. Bookmark the permalink.

One Response to Drop Down Menu in Joomal using the std Menu Module

  1. Eugene says:

    I am looking for some idea and stumble upon your posting :) decide to wish you Thanks. Eugene

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>