dbProjects - dbMenu 3

dbMenu 3

With the 3rd version of dbMenu I wanted to add support for multiple sublevels. This new version has slightly different html, and unlike the second version the styling is different. Also with this version onMouseOver is the default method for opening a submenu. To set the open method to click add the "onClick" class to the top <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="dbMenu1">
    <li><a href="index.php">Menu Examples</a></li>
    <li><a>Menu Types</a>
        <ul>
            <li><a href="downloads/collapse/index.html">Collapse Menu</a></li>
            <li><a href="downloads/dropdown/index.html">Drop Down Menu</a></li>
            <li><a href="downloads/side/index.html">Side Menu</a></li>
            <li><a>Menu Types</a>
                <ul>
                    <li><a href="downloads/collapse/index.html">Collapse Menu</a></li>
                    <li><a href="downloads/dropdown/index.html">Drop Down Menu</a></li>
                    <li><a href="downloads/side/index.html">Side Menu</a></li>
                    <li><a>Menu Types</a>
                        <ul>
                            <li><a href="downloads/collapse/index.html">Collapse Menu</a></li>
                            <li><a href="downloads/dropdown/index.html">Drop Down Menu</a></li>
                            <li><a href="downloads/side/index.html">Side Menu</a></li>
                        </ul>
                    </li>
                </ul>
            </li>
        </ul>
    </li>
    <li><a href="#HTML">The HTML</a></li>
    <li><a href="#script">The Javascript</a></li>
    <li><a>The CSS</a>
        <ul>
            <li><a href="#collapse">Collapse Styles</a></li>
            <li><a href="#dropDown">Drop Down Styles</a></li>
            <li><a href="#side">Side Styles</a></li>
        </ul>
    </li>
</ul>

The Collapse CSS

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

The DropDown CSS

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

The Side CSS

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

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];
            var subMenus = menu.getElementsByTagName('ul');
            for(var j = 0; j < subMenus.length; j++){
                var parentLI = subMenus[j].parentNode;
                parentLI.hasSubMenu = true;
                if(menu.className.search(/\bonClick\b/) !=-1){
                    addEvent(parentLI, 'click', dbMenu.click, false);
                    parentLI.getElementsByTagName('a')[0].href="#"
                }else{
                    addEvent(parentLI, 'mouseout', dbMenu.getMoutFor(parentLI), false);
                    addEvent(parentLI, 'mouseover', dbMenu.getMoverFor(parentLI), false);
                }
                parentLI.getElementsByTagName('a')[0].className += " subMenu";
            }
        }
    },
    
    getMoverFor:function(node){
        return function(){dbMenu.mOver(node);};
    },
    
    getMoutFor:function(node){
        return function(){dbMenu.mTimeout(node);};
    },
    
    mOver: function(targetElement){
        var target = targetElement;
        clearTimeout(target.timeout);
        for(var i = 0; i < target.childNodes.length; i++){
            var node = target.childNodes[i];
            if(node.nodeName.toLowerCase() == 'ul'){
                target.getElementsByTagName('a')[0].className += ' click';
                target.className += ' click';
                node.className += ' click';
            }
        }
    },
    
    mTimeout: function(targetElement){
        var target = targetElement;
        target.timeout = setTimeout(function(){dbMenu.mOut(target);}, 100);
    },
    
    mOut:function(target){
        for(var i = 0; i < target.childNodes.length; i++){
            var node = target.childNodes[i];
            if(node.nodeName.toLowerCase() == 'ul'){
                target.getElementsByTagName('a')[0].className = target.getElementsByTagName('a')[0].className.replace(/click/g, '');
                node.className = node.className.replace(/click/g, '');
                target.className = target.className.replace(/click/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')))return;
        
        if(target.getElementsByTagName('a')[0].className.search(/\bclick\b/) == -1){
            dbMenu.mOver(target);
        }else{
            dbMenu.mOut(target);
        }
    },
    
    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;
        }
    }
}
    
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);