Menu Sample

Version 1 of a dropdown based menu system

by deostroll

HTML

<div id="menu"></div>
<div id="container">
<h1>Menu Demo Sample</h1>
            <ul>
                <li><a id="link1" href="www.yahoo.com">Sample Link1</a></li>            
                <li><a id="link2" href="www.google.com">Sample Link2</a></li>
            </ul>    
</div>

CSS

*{font-family: Arial, Verdana;}
#menu {position:fixed; top:0; left:0; right:0; height:16px;
    background-color:#339999; color:#ffffff; 
    padding:3px; font-size:10pt; }
#menu ul { padding:0px; margin: 0px; }
#menu ul li { display: inline; margin-left:3px; margin-right:3px;
    padding-left:3px; padding-right:3px; 
    border:1px solid transparent;}
#menu ul li:hover { background-color:#40BFBF; border:1px solid white; cursor:pointer;}
.menucard { background-color:#339999; position:fixed; width:125px; color:white; font-size:8pt; z-index:110;}
.menucard ul {list-style-type:none; margin:0px; padding:0px; }
.menucard ul li {padding:3px; border:1px solid transparent; }
.menucard ul li:hover {border:1px solid white; background-color:#40BFBF; cursor:pointer;}
.invisible {position:fixed; top:18px; 
    background-color:#E7CCFF; left:0px; right:0px; 
    bottom:0px; z-index:100;}
#container { margin-top: 25px; margin-left:25px; }

JavaScript

var create = function(el) {
    return document.createElement(el);
}

function buildMainMenu(menuData, target) {
    var ul = create('ul');
    for (idx in menuData) {
        var mnu = menuData[idx];
        var li = create('li');
        li.innerHTML = mnu.text;
        mnu.parent = null;
        if (mnu.children && mnu.children instanceof Array) {
            (function() {
                var children = mnu.children;
                $(li).data('parent', null);
                $(li).bind('click', function(e) {
                    var par = this;
                    buildSubMenu(children, par, target);
                });
            })();
        }
        else {
            (function() {
                var action = mnu.action;
                $(li).click(function(e) {
                    action();
                });
            })();
        }
        ul.appendChild(li);
    }
    target.appendChild(ul);
}

function buildSubMenu(menuData, target, container) {
    var ul = create('ul');
    for (idx in menuData) {
        var mnu = menuData[idx];
        var li = create('li');
        li.innerHTML = mnu.text;
        mnu.parent = $(target).data('parent');
        if (mnu.children) {
            (function() {
                var children = mnu.children;
                $(li).data('parent', mnu);
                $(li).bind('click', function(e) {
                    var par = this;
                    buildSubMenu(children, par, target);
                });
            })();
        }
        else {
            (function() {
                var action = mnu.action;
                $(li).click(function(e) {
                    action();
                    cleanUpMenu();
                    $('.invisible').remove();
                });
            })();
        }
        ul.appendChild(li);
    }
    var depth = findLevel(target);
    var div, d;
    d = document.getElementById('mnulvl' + depth);
    div = d == null ? (function() {
        var k = create('div');
...