Monday 23 March 2009

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.

3 comments:

Ismini said...

Hi, i made a website at joomla which you can see here www.capitalship.gr.

Everything was fine until i tried to check the page in ie6.

It was very messy. I fixed the problem with the margins (here is the test page i use to make changes beta.techsolutions.gr/csm/) but i cannot fix the problem with drop down menu.

I used the code you give in your page but nothing.
I tried some other codes to fix it but i failed.

Please help.

Ismini
Greece, Athens

UK Cross said...

hi dude

If you can not make it, just forget it. IE6 will die very very soon.

Cheers.

Ismini said...

I wish i could forget it but the client checked it in ie6 and told me to fix it.

So, i can't leave it behind.

Anyway, thanks for the response.

I' ll try the joomla extensions.

Cheers

My photo
London, United Kingdom
twitter.com/zhengxin

Facebook & Twitter