LazeeMenu

Multi-level sidebar menu - JQuery plugin

Introduction

LazeeMenu is a JQuery plugin that turns a nested unordered list of links into a vertical multi-level navigation menu. It is visually inspired by the similar menu used by Github on its reference pages, but with support for an additional level. It support both links and standard text in the expandable menu items.

Usage and Instructions

Please read the README file in the GitHib repo for instructions on how to use and contribute.

Demos

Default style without links on expandable headers

In this example we haven't added any links on the expandable items. This allows you to click on the entire item in order to expand it.

<ul id="menu-2">
    <li>
        <h3><span>Online Newspapers</span></h3>
        <ul>
            <li class="active"><a href="http://www.cnn.com">CNN</a></li>
            <li><a href="http://www.bbc.co.uk">BBC</a></li>
            <li><a href="http://www.nrk.no">NRK</a></li>
        </ul>
    </li>
    <li>
        <h3><span>Funny sites</span></h3>
        <ul>
            <li><a href="http://www.google.com">Google</a></li>
            <li><a href="http://www.bing.com">Bing</a></li>
            <li><a href="http://www.yahoo.com">Yahoo</a></li>
        </ul>
    </li>
    <li>
        <h3><span>Search Engines</span></h3>
        <ul>
            <li><a href="http://www.google.com">Google</a></li>
            <li><a href="http://www.bing.com">Bing</a></li>
            <li><a href="http://www.yahoo.com">Yahoo</a></li>
        </ul>
    </li>
</ul>

<script type="text/javascript">
    $(document).ready(function() {
        $('#menu-2').lazeemenu();
    });
</script>

GitHub style with linked first level headers

In this example all the expandable headers are also links in themselves. In order to expand the item you have to click on the arrow beside the link. Clicking elsewhere inside the expandable item will take you to the link source.

<ul id="menu-1">
    <li>
        <h3><a href="/v3/">Online Newspapers</a></h3>
        <ul>
            <li class="active"><a href="http://www.cnn.com">CNN</a></li>
            <li><a href="http://www.bbc.co.uk">BBC</a></li>
            <li><a href="http://www.nrk.no">NRK</a></li>
        </ul>
    </li>
    <li>
        <h3><a href="/v3/activity/">Funny sites</a></h3>
        <ul>
            <li><a href="http://www.google.com">Google</a></li>
            <li><a href="http://www.bing.com">Bing</a></li>
            <li><a href="http://www.yahoo.com">Yahoo</a></li>
        </ul>
    </li>
    <li>
        <h3><a href="/v3/gists/">Search Engines</a></h3>
        <ul>
            <li><a href="http://www.google.com">Google</a></li>
            <li><a href="http://www.bing.com">Bing</a></li>
            <li><a href="http://www.yahoo.com">Yahoo</a></li>
        </ul>
    </li>
</ul>

<script type="text/javascript">
    $(document).ready(function() {
        $('#menu-1').lazeemenu();
    });
</script>






Fork me on GitHub