dbProjects - dbMenu 2

dbMenu 2

With dbMenu 2 I wanted to add the ability to have the menu open on mouseover instead of just on click so I added that feature to the menu. On click is still the default setting so inorder to cause the menu to open on mouseover you must add the "onMouse" class to your containing <ul> tag. To use this menu download the zip file or copy the code from the text boxes bellow and copy these images

The Examples

The HTML

<ul id="menu" class="dbMenu">
    <li><a href="../index.html">Menu Examples</a>
        <li>Menu Types
            <ul>
                <li><a href="../collapse/collapse.html">Collapse Menu</a></li>
                <li><a href="../dropDown/collapse.html">Drop Down Menu</a></li>
                <li><a href="../side/collapse.html">Side Menu</a></li>
            </ul>
        </li>
        <li><a href="index.html">The HTML</a></li>
        <li><a href="script.html">The Script</a></li>
        <li>The CSS
            <ul>
                <li><a href="common.html">Common Styles</a></li>
                <li><a href="collapse.html">Collapse Styles</a></li>
                <li><a href="dropDown.html">Drop Down Styles</a></li>
                <li><a href="side.html">Side Styles</a></li>
            </ul>
        </li>
    </ul>

The Collapse CSS

.dbMenu{
    position:relative;
    width:10em;
    z-index:1;
    padding:2px;
    margin:20px 0;
    list-style:none;
}
.dbMenu li{
    position:relative;
    background-color:#ffffff;
    border:1px solid black;
    padding:2px;
    margin:0;
    color:#000000;
}
.dbMenu li ul{
    position:relative;
    display:none;
    padding:2px;
    margin:0;
    list-style:none;
}
.dbMenu .subMenu{
    background-image:url('images/down.gif');
    background-position:bottom right;
    background-repeat:no-repeat;
}
.dbMenu .click{
    background-image:none;
    background-color:#fa551a;
    color:#fffab5;
}
.dbMenu .click ul{
    display:block;
}
.dbMenu .hover, .dbMenu a:hover{
    cursor: pointer;
    background-color:#fa551a;
    color:fffab5;
}
.dbMenu li ul li.hover, .dbMenu li ul li.hover a:hover{
    background-color:fa7d50;

}
.dbMenu li a, .dbMenu li ul li a, .dbMenu li.hover ul li a{
	text-decoration:none;
	color:#000000;
}
.dbMenu .hover, .dbMenu li.hover a, .dbMenu li ul li.hover a{
	color:#fffab5;
	text-decoration:underline;
}

The DropDown CSS

.dbMenu{
    position:relative;
    z-index:1;
    height:1em;
    padding:2px;
    margin:20px 0;
    list-style:none;
}
.dbMenu li{
    position:relative;
    background-color:#ffffff;
    border:1px solid black;
    padding:2px;
    margin:0;
    width:10em;
    color:#000000;
    float:left;
}
.dbMenu li ul{
    position:absolute;
    top:1.2em;
    left:0;
    width:10em;
    display:none;
    padding:2px;
    margin:0;
    list-style:none;
}
.dbMenu .subMenu{
    background-image:url('images/down.gif');
    background-position:center right;
    background-repeat:no-repeat;
}
.dbMenu .click{
    background-image:none;
    background-color:#fa551a;
    color:#fffab5;
}
.dbMenu .click ul{
    display:block;
}
.dbMenu .hover, .dbMenu a:hover{
    cursor: pointer;
    background-color:#fa551a;
    color:fffab5;
}
.dbMenu li ul li.hover, .dbMenu li ul li.hover a:hover{
    background-color:fa7d50;

}
.dbMenu li a, .dbMenu li ul li a, .dbMenu li.hover ul li a{
	text-decoration:none;
	color:#000000;
}
.dbMenu .hover, .dbMenu li.hover a, .dbMenu li ul li.hover a{
	color:#fffab5;
	text-decoration:underline;
}

The Side CSS

.dbMenu{
    position:relative;
    width:10em;
    z-index:1;
    padding:2px;
    margin:20px 0;
    list-style:none;
}
.dbMenu li{
    position:relative;
    background-color:#ffffff;
    border:1px solid black;
    padding:2px;
    margin:0;
    color:#000000;
}
.dbMenu li ul{
    position:absolute;
    top:0;
    left:9.8em;
    width:10em;
    display:none;
    padding:2px;
    margin:0;
    list-style:none;
}
.dbMenu .subMenu{
    background-image:url('images/right.gif');
    background-position:center right;
    background-repeat:no-repeat;
}
.dbMenu .click{
    background-image:none;
    background-color:#fa551a;
    color:#fffab5;
}
.dbMenu .click ul{
    display:block;
}
.dbMenu .hover, .dbMenu a:hover{
    cursor: pointer;
    background-color:#fa551a;
    color:fffab5;
}
.dbMenu li ul li.hover, .dbMenu li ul li.hover a:hover{
    background-color:fa7d50;

}
.dbMenu li a, .dbMenu li ul li a, .dbMenu li.hover ul li a{
	text-decoration:none;
	color:#000000;
}
.dbMenu .hover, .dbMenu li.hover a, .dbMenu li ul li.hover a{
	color:#fffab5;
	text-decoration:underline;
}

The JavaScript

var dbMenu = {
    init: function(){
        var uls = document.getElementsByTagName('ul');
        for(var i = 0; i < uls.length; i++){
            if(uls[i].className.search(/\bdbMenu\b/) == -1)
                continue;
            var menu = uls[i];
            
            dbMenu.styleSubMenus(menu);
            
            addEvent(menu, 'mouseover', dbMenu.hover, false);
            addEvent(menu, 'mouseout', dbMenu.hoverOff, false);
            if(menu.className.search(/\bonMouse\b/) == -1){
                addEvent(menu, 'click', dbMenu.click, false);
            }
            addEvent(menu, 'click', dbMenu.nav, false);
        }    
    },
    
    hover: function(e){
        var target = (window.event)? window.event.srcElement : (e)? e.target : null;
        
        if(target){
            target = dbMenu.getTarget(target, 'li');
            if(!target) return;
        }else{
            return;
        }
        
        target.className += ' hover';
        
        var t = (target.className.search(/\bsubMenu\b/) != -1)? target : (target.parentSubMenu)? target.parentSubMenu : null;
        if(!t) return;
        clearTimeout(t.timeout);
        
        if(target.parentMenu.className.search(/\bonMouse\b/) != -1){
            t.className += ' click';
        }
    },
    
    hoverOff: function(e){
        var target = (window.event)? window.event.srcElement : (e)? e.target : null;
        
        if(target){
            target = dbMenu.getTarget(target, 'li');
            if(!target) return;
        }else{
            return;
        }
        
        target.className = target.className.replace(/hover/g, '');
        
        if(target.parentMenu.className.search(/\bonMouse\b/) != -1){
            var t = (target.className.search(/\bsubMenu\b/) != -1)? target : (target.parentSubMenu)? target.parentSubMenu: null;
            if(!t) return; 
            t.timeout = setTimeout(function(){ t.className = t.className.replace(/click/g, ''); }, 50);
        }
    },
    
    click: function(e){
        if(window.event){
            window.event.cancelBubble = true;
        }
        if(e && e.stopPropagation){
            e.stopPropagation();
        }
        var target = (window.event)? window.event.srcElement : (e)? e.target : null;
        
        if(target){
            target = dbMenu.getTarget(target, 'li');
            if(!target) return;
        }else{
            return;
        }
        
        if(target.className.search(/\bclick\b/) == -1){
            target.className += ' click';
        }else{
            target.className = target.className.replace(/click/g, '');
        }
    },
    
    nav: function(e){
        if(window.event){
            window.event.cancelBubble = true;
        }
        if(e && e.stopPropagation){
            e.stopPropagation();
        }
        var target = (window.event)? window.event.srcElement : (e)? e.target : null;
        
        if(target){
            target = dbMenu.getTarget(target, 'li');
            if(!target) return;
        }else{
            return;
        }
        
        for(var i = 0; i < target.childNodes.length; i++){
            var node = target.childNodes[i];
            if(node.nodeName.toLowerCase() == 'a'){
                window.location = node.href;
                break;
            }
        }
    },
    
    getTarget: function(target, elm){
        if(target.nodeName.toLowerCase() != elm && target.nodeName.toLowerCase() != 'body'){
            return dbMenu.getTarget(target.parentNode, elm);
        }else if(target.nodeName.toLowerCase() == 'body'){
            return null;
        }else{
            return target;
        }
    },
    
    styleSubMenus: function(menu){
        lis = menu.getElementsByTagName('li');
        for(var i = 0; i < lis.length; i++){
            node = lis[i];
            node.parentMenu = menu;
            if(node.getElementsByTagName('ul').length != 0){
                node.className += ' subMenu';
                sublis = node.getElementsByTagName('li');
                for(var j = 0; j < sublis.length; j++){
                    sublis[j].parentSubMenu = node;
                }
            }
        }
    }
}
    
function addEvent(elm, evType, fn, useCapture){  //cross-browser event handling for IE5+, NS6+, and Mozilla/Gecko By Scott Andrew
	if(elm.addEventListener){
		elm.addEventListener(evType, fn, useCapture);
		return true;
	}else if(elm.attachEvent){
		var r = elm.attachEvent('on' + evType, fn);
		return r;
	}else{
		elm['on' + evType] = fn;
	}
}

addEvent(window, 'load', dbMenu.init, false);