Gane.ca

Starting note: I haven't written for some time, over a month to be exact, and I haven't been motivated to lately. I decided early last week to make more of an effort, and now I find myself with a load more time, I will have no excuse to not write.

Recently, I was working on some issues on Eris's website and decided to make some changes to the menu system. Those changes were in hopes to make the site more cross browser compliant, and logically for the visitors to the site. Well doing some research, and testing with various solutions, I came across a wonderful way to create a simple drop down menu using the default menu module that comes with Joomla.

The advantages

Joomla's menu module will work with almost all SEF extensions, and even the default improvements, and this is important in the future for other extensions as well (for example, a new photo gallery). This will also decrease the worry that an update Joomla could potentially break your menu / module, as it is a core module provided with Joomla.

It is also more visually attractive to have the drop down, and offers more interactivity then a straight list of links. The technique is almost solely using CSS and limits the use of Javascript to a minimum. Infact, this doesn't use any addtional frameworks (such as jQuery or MooTools), and that is a positive for load time.

The Steps and Code

In the module, configure your settings to appear such as:

1. Menu Style is set to List
2. Always show sub-menu items is set to yes.
3. Menu class suffix is set to san (you can pick your own, just make sure to make the changes in the JS and CSS.)

First insert into your CSS:

.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 */
}

Insert the following javascript into the head of your templates index.php page:

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(” sfhover\\b”), “”);
  }
 } 
}
if (window.attachEvent) window.attachEvent(”onload”, sfHover);

That's it, with that relative simple CSS / JS combo, you'll have a serviceable drop down that doesn't require a new module and take advantage of Joomla's core menu module.