HOWTO: Joomla CSS drop-down menu (javascript for IE6)

Prolog
===================

At beginning, I compared the two drop-down menu raw methods:
http://docs.joomla.org/Creating_a_CSS_Drop_down_Menu
http://www.alistapart.com/articles/dropdowns

Both of them are using suckerfish CSS methods to diminish javascript usage from DHTML.
Because IE doesn't support 'hover' status on 'li', only on 'a'. to solve this problem, there is some javascript for IE, using 'onmouseover'.

The difference between the above two javascript methods, one uses 1)'document.THECLASSOFTAG.getElementsByTagName("LI")' to retrieve <li>, while 2) the other uses 'navRoot.childNodes......' with loop to find out all <li> within the range, which defined by 'document.getElementById("THEIDOFTAG")'.

Javascript in method 1) is NOT supported by IE 6 and 7, even Firefox. This only affect IE 6, others don't need javascript to achieve this drop-down menu.

But, the 'hiding method', which uses 'left:-98%' to hide the submenu from screen is very good and secure, compared with the method using 'display: none', which used in method 2).

Method 2) is just traditional way to parse the html document. But it's for pure HTML practice, not exactly for Joomla.

Therefore, I modified above 2 methods, to make it easily setup on Joomla 1.5.


Make Joomla Drop-Down Menu without install anything
===================================

1. Create your Menu with the following Hierarchy:

Menu 1( globalnews ).

– Menu 1 Sub Menu 1 (test).

– Menu 1 Sub Menu 2 (test).

Menu 2( uknews ). // this menu have no submenu

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 -nav - you can pick you own, but then make sure you change it in CSS & JS files. So you will get your menu within

All the menu strcture will be like this ( this can be found from your scource from IE or Firefox:
-------------------------------------------------

<div class="pill_m">
<div id="pillmenu">
<ul class="menu-nav">
<li class="parent item63"><a href="/globalnews"><span>Globalnews</span></a>
<ul>
<li class="item75"><a href="/uknews"><span>test</span></a></li>
<li class="item76"><a href="/uknews"><span>testtest</span></a></li>
</ul>
</li>

<li class="item61"><a href="/uknews"><span>uknews</span></a></li>

</ul>
</div>
</div>


---------------------------------------
here, the 'div class="pill_m"' and 'div id="pillmenu"' is what I put in the templates/MYTEMPLATE/index.php to help me setup the css style.

3. Insert this piece of JS in your template index.php 'head' tag, or in java script file that’s called from index.php.
---------------------------------------
<!--[if IE]>
<script type="text/javascript">
window.addEvent('domready', function()
{
if (document.getElementById) {
//navRoot = document.getElementById("pillmenu");
ulTag = pillmenu.childNodes(0);//navRoot==pillmenu, which is a 'id'.
for (i=0; i<ulTag.childNodes.length; i++) {
node = ulTag.childNodes[i];
if (node.nodeName=="LI") {
node.onmouseover=function() {
temp_cn=this.className;
this.className=temp_cn.replace(temp_cn, "sfhover")
//this.className+="sfhover";
}
node.onmouseout=function() {
this.className=this.className.replace("sfhover", temp_cn);
}
}
}
}
}
);
</script>
<![endif]-->
----------------------------------------
Note:

• Here <!--[if IE]> make this script just work for IE, to improve the performance of Fifrefox,safari, they do need such javascript to make the dorp-down menu.
• window.onload=INLINE_FUNCTION_NAME, is normally used to make specific javascript runnable when the html document is loaded, BUT, in joomla, there always a lot of javascript block in the pages, and one page only can have one onload function. To solve this, 'domready' from mootools helps a lot and improves the loading speed very much. See domready vs load.
• Even using general javascript function, like "function FUNCTION_NAME() {... }; FUNCTION_NAME();", will not work properly, because when the function started, maybe the html document is not fully loaded. Still, mootools domready event helps.

4. Insert mootool.js (optional for Joomla, But required for local html test)
---------------------------------------------------

<script type="text/javascript" src="mootools.js">

</script>

---------------------------------------------------
You should go to mootools.net to download the latest mootools.js.

5. Here the corresponding CSS
----------------------------------------------------
<style type="text/css">
/*****************************************/
/*** Copied menu ***/
/*****************************************/
.pill_m {
text-align: center;
margin: 0 auto;
padding: 0;
background: url(../images/menu.jpg) top center repeat-x;
width: 100%;
height: 41px;
}
#pillmenu {
margin:0 auto;
width:960px;
}
#pillmenu ul {
margin: 0;
padding: 0 22px;
list-style: none;
}
#pillmenu li {
float: left;
margin: 0;
padding: 0;
height: 49px;
background: url(../images/menu_li.jpg) top right no-repeat;
}
#pillmenu li:hover {
}
#pillmenu li a#active_menu-nav {
}
#pillmenu li a {
font-family: Verdana,Helvetica,Arial,sans-serif;
font-size: 13px;
/* float: left;*/
display: block;
line-height: 39px;
padding: 0 24px 0 16px;
color: #111111;/*color: #FFFFFF;*/
text-decoration: none;
font-weight: bold;
text-transform:uppercase;
}
#pillmenu li a:hover {
color: #CCCCCC;
}
.pill_m li ul { /* second-level lists */
position: absolute;
left: -98%; /* using left instead of display to hide menus because display: none isn’t read by screen readers */
}
.pill_m li:hover ul, .pill_m li.sfhover ul { /* lists nested under hovered list items */
left: auto; /* change is to 10px, 20px, etc for indenting the sub menue */
z-index: 100;
}
#pillmenu li.parent ul li, #pillmenu li.sfhover ul li{
height:20px;
background: url(../images/menu.jpg) top center repeat-x;
}
#pillmenu li.parent ul li a, #pillmenu li.sfhover ul li a{
font-size: 10px;
line-height: 20px;
}
</style>
----------------------------------------------------
Here the background can be changed as you want, or set it 'none' or other colors.
Have a try, If you got any problems, comment here to let me know.