Skip to content
Multi-level sidebar menu - JQuery plugin
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
site
src Close to release Mar 24, 2016
.gitignore Preparing for NPM release Mar 24, 2016
.jshintrc Preparing for first release: Fixed js, examples and polished css and … Mar 15, 2016
.npmignore Preparing for NPM release Mar 24, 2016
LICENSE Initial commit Mar 15, 2016
README.md Update README.md Mar 25, 2016
bower.json Added min.css files to distro Apr 5, 2016
gulpfile.js Added min.css files to distro Apr 5, 2016
package.json Added min.css files to distro Apr 5, 2016

README.md

LazeeMenu

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 menu on Github's reference pages, but with support for an additional level. It support both links and standard text in the expandable menu items.

demo

Homepage - Demo | Download ZIP

Install with NPM

npm install lazeemenu

Getting started

Download the plugin, unzip it and copy the files to your project folder. Then include the css and js inside your HTML.

<head>
    <!-- Load LazeeMenu CSS -->
    <script type="text/javascript" src="/lazeemenu/lazeemenu.css"></script>
</head>
<body>
    <!-- Add this at the bottom of the body tag -->
    <!-- Load JQuery -->
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
    <!-- Load LazeeMenu -->
    <script type="text/javascript" src="/lazeemenu/lazeemenu-jquery.js"></script>
</body>

Sample menu and how to activate:

<ul id="menu-1">
    <li>
        <h3><span>Tennis</span></h3>
        <ul>
            <li><a href="/">Serves</a></li>
            <li class="active"><a href="/">Player results</a></li>
            <li><a href="/">Leagues</a></li>
            <li><a href="/">Tournaments</a></li>
        </ul>
    </li>
    <li>
        <h3><span>Ballet</span></h3>
        <ul>
            <li><a href="/">Dancers</a></li>
            <li><a href="/">Famous acts</a></li>
        </ul>
    </li>
</ul>
<script type="text/javascript">
    $(document).ready(function() {
        $('#menu-1').lazeemenu();
    });
</script>

There are also a few options that can be extended:

<script type="text/javascript">
    $(document).ready(function() {
        $('.menu-1').lazeemenu({
            activeClass: 'active',
            initialState: 'default'        
        });
    });
</script>

Options

These are the options you can set during activation of a menu.

activeClass

  • Type: string
  • Default: active

The name of the class name used in li elements to indicate what link that should be marked as active.

initialState

  • Type: string
  • Default: default

You can set this value to expanded if you initially want the entire menu expanded. Setting it to collapsed will collapse the menu. Finally default (Which is the default ;)) will make sure that the active link is expanded. Everything else will be collapsed.

Public methods

expandAll

Expand all menu items

$(selector).lazeemenu('expandAll');

expandAll

Collapse all menu items

$(selector).lazeemenu('collapseAll');
You can’t perform that action at this time.