Mootools menu 2 levels

by basmaat

HTML

<script src="http://www.designinfluences.com/fluid960gs/js/mootools-1.2.1-core.js"></script>
<script src="http://www.designinfluences.com/fluid960gs/js/mootools-1.2-more.js"></script>
<div class="block" id="section-menu">
                        <ul class="section menu">
                            <li>
                                <a class="menuitem">Menu 1</a>
                            </LI> 
                                 <li>
                                  <a class="menuitem">Menu 1a</a>
                                
                                <ul class="submenu">
                                    <li>
                                        <a>Submenu 1</a>
                                    </li>
                                    <ul class="submenu">
                                    <li>
                                        <a>Submenu 1</a>
                                    </li>
                                    
                                    
                                    <li>
                                        <a>Submenu 2</a>
                                    </li>
                                    <li>
                                        <a class="active">Submenu 3</a>
                                    </li>
                                    <li>
                                        <a>Submenu 4</a>
                                    </li>
                                    <li>
                                        <a>Submenu 5</a>
                                    </li>
                                </ul>
                            </ul> 
                            </li>
                            <li>
                                <a class="menuitem">Menu 2</a>
                                <ul class="submenu">
                                    <li>
                                        <a>Submenu 1</a>
                                    </li>
                      ...

CSS

/* menus
----------------------------------------------- */
ul.menu {
    list-style:none;
    border-top:1px solid #bbb;
}
ul.menu li {
    margin:0;
}
ul.menu li a {
    display:block;
    padding:4px 10px;
    border-bottom:1px solid #ccc;
}
ul.menu li a:hover {
    background:#eee;
}
ul.menu li a:active {
    background:#ccc;
}


/* submenus
----------------------------------------------- */
ul.menu ul {
    list-style:none;
    margin:0;
}
ul.menu ul li a {
    padding-left:30px;
}

ul.menu ul ul li a {
    padding-left:40px;
}


/* section menus
----------------------------------------------- */
ul.section {
    border-top:0;
    margin-bottom:0;
}
ul.section li {
    text-transform:uppercase;
}
ul.section li a {
    background:#bbb;
}
ul.section li a:hover {
    background:#aaa;
}
ul.section li a:active {
    color:#fff;
    background:#666;
}
ul.section li li a {
    background:#ddd;
    border-bottom:1px solid #eee;
}
ul.section li li a:hover {
    background:#ccc;
}
ul.section li li a:active {
    color:#000;
    background:#fff;
}
ul.section ul li {
    text-transform:none;
}
ul.section ul.current li a {
    background:#eee;
    border-bottom:1px solid #fff;
}
ul.section ul.current li a:hover {
    background:#ddd;
}
ul.section ul.current li a:active {
    background:#fff;
}
ul.section li a.current {
    color:#fff;
    background:#666;
}
ul.section li a.current:hover {
    background:#555;
}
ul.section li a.current:active {
    background:#444;
}
ul.section li a.active {
    background:#fff;
    cursor:default;
}
ul.section li.current > a.active,
ul.section li.current > a.active:hover {
    color:#fff;
    background:#666;
    cursor:default;
}

JavaScript

// Accordion Section Menu
    if ($('section-menu')) {
        var accordion = new Accordion('a.menuitem', 'ul.submenu', {
            opacity: false,
            onActive: function(toggler, element){
                toggler.addClass('current');
                element.addClass('current');
            },
            onBackground: function(toggler, element){
                toggler.removeClass('current');
                element.removeClass('current');
            }
        }, $('section-menu'));
    }