drop down menu

by Richard Hunter

HTML

<ul data-menu='root'>
    <li >
        <span data-menu-trigger='banana' >alpha</span>

        <ul data-menu='banana'>
            <li>
                <span data-menu-trigger='apple'>one</span>
                <ul data-menu='apple'>
                    <li><a href='#'>beta</a></li>
                    <li><a href='#'>beta</a></li>
                </ul>
            </li>
            <li>
                <a href='#'>beta</a>
            </li>
        </ul>
    </li>
    <li>
        <a href='#'>beta</a>
    </li>
</ul>

JavaScript

function toArray(nodeList) {
    return Array.prototype.slice.apply(nodeList);
}
menu = document.getElementById('menu');
bindHandlersOnMenu(menu);

function bindHandlersOnMenu(menu) {
    bindMouseEvents(menu.getAttribute('data-name'));

    var menuItems = menu.children;
    toArray(menuItems).forEach(function (item) {
        var nestedMenu = item.querySelector('ul');
        if (nestedMenu) {
            bindHandlersOnMenu(nestedMenu);
        }
    });
}

function bindMouseEvents(name) {
    menu.addEventListener('mouseenter', mouseEnterMenu, false);
    menu.addEventListener('mouseleave', mouseLeaveMenu, false);

    function mouseLeaveMenu(event) {
        //console.log('mouse leave', name);
        event.target.classList.remove('open');
        return false;
    }

    function mouseEnterMenu(event) {

        event.target.classList.add('open');
        return false;
    }
}