dbProjects - dbMenu

dbMenu

dbMenu is a menu script that uses different CSS to create three different menu types. The JavaScript is the same for any of the menus. The Menu is constructed using nested unordered lists. Note that the nested ul is contained within a li tag. Also there is a class on the outermost ul tag named “dbMenu” this is so we will be able to distinguish between the menus and other unordered lists. 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>
  <li>Menu Types
    <ul>
      <li><a href="../collapse/index.html">Collapse Menu</a></li>
      <li><a href="../dropDown/index.html">Drop Down Menu</a></li>
      <li><a href="../side/index.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.hover, false);
            addEvent(menu, 'click', dbMenu.click, false);
            addEvent(menu, 'click', dbMenu.nav, false);
        }
        
        addEvent(document, 'click', dbMenu.removeClick, 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;
        }
        
        if(target.className.search(/\bhover\b/) == -1){
            target.className += ' hover';
        }else{
            target.className = target.className.replace(/hover/g, '');
        }
    },
    
    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){
            dbMenu.removeClick();
            target.className += ' click';
        }else{
            target.className = target.className.replace(/click/g, '');
        }
    },
    
    removeClick: 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];
            for(var j = 0; j < menu.childNodes.length; j++){
                var node = menu.childNodes[j];
                if(node.nodeName.toLowerCase() == 'li'){
                    node.className = node.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){
        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];
            for(var j = 0; j < menu.childNodes.length; j++){
                var node = menu.childNodes[j];
                if(node.nodeName.toLowerCase() == 'li'){
                    for(var l = 0; l < node.childNodes.length; l++){
                        var nd = node.childNodes[l];
                        if(nd.nodeName.toLowerCase() == 'ul'){
                            node.className += " subMenu";
                            break;
                        }
                    }
                }
            }
        }
    }
}
    
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);