http://www.forestiersdalsace.fr/js/dynMenu.js

1/*
2Author   : bieler batiste
3Company  : doSimple : http://www.dosimple.ch
4send me a mail for more informations : [email protected] - remove ( PASDEPOURRIEL )
5
6Short javascript function to create and handle a CSS navigation menu
7
8Copyright (C) 2004  Bieler Batiste
9
10This library is free software; you can redistribute it and/or
11modify it under the terms of the GNU Lesser General Public
12License as published by the Free Software Foundation; either
13version 2.1 of the License, or (at your option) any later version.
14
15This library is distributed in the hope that it will be useful,
16but WITHOUT ANY WARRANTY; without even the implied warranty of
17MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
18Lesser General Public License for more details.
19
20You should have received a copy of the GNU Lesser General Public
21License along with this library; if not, write to the Free Software
22Foundation, Inc., 59 Temple Place, Suite 330, Boston, MA  02111-1307  USA
23*/
24
25// the timeout for the menu
26var timeout = 1000;
27var menuId = '';
28// not very clean but simple
29// the function can be run in the HTML for faster display
30// window.onload=initMenu;
31
32// creat timeout variables for list item
33// it's for avoid some warning with IE
34for( var i = 0; i < 100; i++ )
35{
36    eval("var timeout" + menuId + "li" + i + " = false;");
37}
38
39// this fonction apply the CSS style and the event
40function initMenu(idDIVmenu)
41{
42	if ( idDIVmenu == "" || typeof(idDIVmenu) == "undefined" || idDIVmenu == null ) {
43		idDIVmenu = 'menu';
44	}
45    menuId = idDIVmenu;
46    // a test to avoid some browser like IE4, Opera 6, and IE Mac
47    if ( browser.isDOM1 
48    && !( browser.isMac && browser.isIE ) 
49    && !( browser.isOpera && browser.versionMajor < 7 )
50    && !( browser.isIE && browser.versionMajor < 5 ) )
51    {
52        // get some element
53        var menu = document.getElementById(idDIVmenu); // the root element
54        var lis = menu.getElementsByTagName('li'); // all the li
55        
56        // change the class name of the menu, 
57        // it's usefull for compatibility with old browser
58        menu.className = idDIVmenu;
59        
60        // i am searching for ul element in li element
61        for ( var i=0; i<lis.length; i++ )
62        {
63            // is there a ul element ?
64            if ( lis.item(i).getElementsByTagName('ul').length > 0 )
65            {        
66                // improve IE key navigation
67                if ( browser.isIE )
68                {
69                    addAnEvent(lis.item(i),'keyup',show);
70                }
71                // link events to list item
72                addAnEvent(lis.item(i),'mouseover',show);
73                addAnEvent(lis.item(i),'mouseout',timeoutHide);
74                addAnEvent(lis.item(i),'blur',timeoutHide);
75                addAnEvent(lis.item(i),'focus',show);
76                
77                // add an id to list item
78                lis.item(i).setAttribute( 'id', idDIVmenu + "li"+i );
79                lis.item(i).getElementsByTagName('a')[0].className = 'menuIndicateur';
80            }
81        }
82    }
83}
84
85function addAnEvent( target, eventName, functionName )
86{
87    // apply the method to IE
88    if ( browser.isIE )
89    {
90        //attachEvent dont work properly with this
91        eval('target.on'+eventName+'=functionName');
92    }
93    // apply the method to DOM compliant browsers
94    else
95    {
96        target.addEventListener( eventName , functionName , true ); // true is important for Opera7
97    }
98}
99    
100// hide the first ul element of the current element
101function timeoutHide()
102{
103    // start the timeout
104    eval( "timeout" + this.id + " = window.setTimeout('hideUlUnder( \"" + this.id + "\" )', " + timeout + " );");
105}
106
107// hide the ul elements under the element identified by id
108function hideUlUnder( id )
109{   
110    document.getElementById(id).getElementsByTagName('ul')[0].style['visibility'] = 'hidden';
111}
112
113// show the first ul element found under this element
114function show()
115{
116    // show the sub menu
117    this.getElementsByTagName('ul')[0].style['visibility'] = 'visible';
118    // clear the timeout
119	try {
120		eval ( "clearTimeout( timeout"+ this.id +");" );
121	}
122	catch(err) {
123		// rien
124	}
125	hideAllOthersUls( this );
126}
127
128// hide all ul on the same level of  this list item
129function hideAllOthersUls( currentLi )
130{
131    var ul = currentLi.parentNode;
132    //alert(lis.childNodes.length);
133    for ( var i=0; i<ul.childNodes.length; i++ )
134    {
135        if ( ul.childNodes[i].id && ul.childNodes[i].id != currentLi.id )
136        {
137            hideUlUnderLi( ul.childNodes[i] );
138        }
139    }
140}
141
142// hide all the ul wich are in the li element
143function hideUlUnderLi( li )
144{
145    var uls = li.getElementsByTagName('ul');
146    for ( var i=0; i<uls.length; i++ )
147    {
148        uls.item(i).style['visibility'] = 'hidden';
149    }
150}