Navgoco – jQuery Multilevel Slide Menu

Navgoco is a javascript library that allows creating vertical multi-level sliding navigation. You can select Expand All link to open all levels or Collapse All to collapse all levels. This plugin also allow the active menu to be selected with the corresponding icon. You can use Event handlers in this plugin

Features:

  • Fully responsive and works great on every device (Desktop, Tablet, Mobile)
  • Multi-level menu support
  • Active menu to be selected
  • Event handlers.

Live Demo

Demo 1

Collapse All | Expand All

Demo 2

How to Use

Add the css below to your html page

<link rel="stylesheet" href="http://onlinefreetools.net/wp-content/uploads/demo/accordion/navgoco/css/jquery.navgoco.css" />

Create a container where you want to render slide menu

<h4>Demo 1</h4>
<ul id="demo1" class="nav" style="background-color: #ecf0f1;">
    <li class="active"><a href="#">Developer Tools</a></li>
    <li><a href="#">Download</a>
        <ul>
            <li><a href="#"> Setting Up the ADT Bundle</a></li>
            <li><a href="#">Setting Up an Existing IDE</a>
                <ul>
                    <li><a href="#"> Installing the Eclipse Plugin</a></li>
                    <li><a href="#"> Adding Platforms and Packages</a></li>
                </ul>
            </li>
            <li><a href="#">Android Studio</a>
                <ul>
                    <li><a href="#"> Migrating from Eclipse</a></li>
                    <li><a href="#"> Tips and Tricks</a></li>
                    <li><a href="#"> Using the Layout Editor</a></li>
                    <li><a href="#"> Building Your Project with Gradle</a></li>
                </ul>
            </li>
            <li><a href="#"> Exploring the SDK</a></li>
            <li><a href="#">Download the NDK</a></li>
        </ul>
    </li>
    <li><a href="#">Workflow</a>
        <ul>
            <li><a href="#">Setting Up Virtual Devices</a>
                <ul>
                    <li><a href="#">With AVD Manager</a></li>
                    <li><a href="#">From the Command Line</a></li>
                    <li><a href="#">Using the Emulator</a></li>
                </ul>
            </li>
            <li><a href="#">Google</a>
                <ul>
                    <li><a href="#">USB Drivers</a></li>
                </ul>
            </li>
            <li><a href="#">Setting Up Projects</a>
                <ul>
                    <li><a href="#">From Eclipse with ADT</a></li>
                    <li><a href="#">From the Command Line</a></li>
                    <li><a href="#">Using Code Templates</a></li>
                </ul>
            </li>
            <li><a href="#">Building and Running</a>
                <ul>
                    <li><a href="#">From Eclipse with ADT</a></li>
                    <li><a href="#">From the Command Line</a></li>
                </ul>
            </li>
            <li><a href="#">Google</a>
                <ul>
                    <li><a href="#"> Fundamentals</a></li>
                    <li><a href="#"> From Eclipse</a></li>
                    <li><a href="#"> What To Test</a></li>
                    <li><a href="#"> Activity Testing Tutorial</a></li>
                </ul>
            </li>
            <li><a href="#">Debugging</a>
                <ul>
                    <li><a href="#">From Eclipse with ADT</a></li>
                    <li><a href="#">From Other IDEs</a></li>
                    <li><a href="#">Using the Dev Tools App</a></li>
                </ul>
            </li>
            <li><a href="#">Google</a>
                <ul>
                    <li><a href="#">Preparing for Release</a></li>
                    <li><a href="#">Versioning Your Apps</a></li>
                    <li><a href="#">Signing Your Apps</a></li>
                </ul>
            </li>
        </ul>
    </li>
    <li><a href="#">Support Library</a>
        <ul>
            <li><a href="#">Features</a></li>
            <li><a href="#">Setup</a></li>
        </ul>
    </li>
    <li><a href="#">Tools Help</a>
        <ul>
            <li><a href="#">adb</a></li>
            <li><a href="#">ADT</a></li>
            <li><a href="#">monkey</a></li>
            <li><a href="#">monkeyrunner</a>
                <ul>
                    <li><a href="#">MonkeyDevice</a></li>
                    <li><a href="#">MonkeyImage</a></li>
                    <li><a href="#">MonkeyRunner</a></li>
                </ul>
            </li>
            <li><a href="#">ProGuard</a></li>
            <li><a href="#">SDK Manager</a></li>
            <li><a href="#">Systrace</a></li>
            <li><a href="#">Tracer for OpenGL ES</a></li>
            <li><a href="#">Traceview</a></li>
            <li><a href="#">uiautomator</a>
                <ul>
                    <li><a href="#">Configurator</a></li>
                    <li><a href="#">IAutomationSupport</a></li>
                    <li><a href="#">UiWatcher</a></li>
                </ul>
            </li>
            <li><a href="#">zipalign</a></li>
        </ul>
    </li>
    <li><a href="#">Revisions</a>
        <ul>
            <li><a href="#"> SDK Tools </a></li>
            <li><a href="#"> ADT Plugin </a></li>
        </ul>
    </li>
    <li><a href="#">Google</a>
        <ul>
            <li><a href="#">ADK 2012 Guide</a></li>
            <li><a href="#">ADK 2011 Guide</a></li>
        </ul>
    </li>
</ul>

<p class="external">
    <a href="#" id="collapseAll">Collapse All</a> | <a href="#" id="expandAll">Expand All</a>
</p>

<h4>Demo 2</h4>
<ul id="demo2" class="nav" style="background-color: #ecf0f1;">
    <li class="active"><a href="#">Developer Tools</a></li>
    <li><a href="#">Download</a>
        <ul>
            <li><a href="#"> Setting Up the ADT Bundle</a></li>
            <li><a href="#">Setting Up an Existing IDE</a>
                <ul>
                    <li><a href="#"> Installing the Eclipse Plugin</a></li>
                    <li><a href="#"> Adding Platforms and Packages</a></li>
                </ul>
            </li>
            <li><a href="#">Android Studio</a>
                <ul>
                    <li><a href="#"> Migrating from Eclipse</a></li>
                    <li><a href="#"> Tips and Tricks</a></li>
                    <li><a href="#"> Using the Layout Editor</a></li>
                    <li><a href="#"> Building Your Project with Gradle</a></li>
                </ul>
            </li>
            <li><a href="#"> Exploring the SDK</a></li>
            <li><a href="#">Download the NDK</a></li>
        </ul>
    </li>
    <li><a href="#">Workflow</a>
        <ul>
            <li><a href="#">Setting Up Virtual Devices</a>
                <ul>
                    <li><a href="#">With AVD Manager</a></li>
                    <li><a href="#">From the Command Line</a></li>
                    <li><a href="#">Using the Emulator</a></li>
                </ul>
            </li>
            <li><a href="#">Google</a>
                <ul>
                    <li><a href="#">USB Drivers</a></li>
                </ul>
            </li>
            <li><a href="#">Setting Up Projects</a>
                <ul>
                    <li><a href="#">From Eclipse with ADT</a></li>
                    <li><a href="#">From the Command Line</a></li>
                    <li><a href="#">Using Code Templates</a></li>
                </ul>
            </li>
            <li><a href="#">Building and Running</a>
                <ul>
                    <li><a href="#">From Eclipse with ADT</a></li>
                    <li><a href="#">From the Command Line</a></li>
                </ul>
            </li>
            <li><a href="#">Google</a>
                <ul>
                    <li><a href="#"> Fundamentals</a></li>
                    <li><a href="#"> From Eclipse</a></li>
                    <li><a href="#"> What To Test</a></li>
                    <li><a href="#"> Activity Testing Tutorial</a></li>
                </ul>
            </li>
            <li><a href="#">Debugging</a>
                <ul>
                    <li><a href="#">From Eclipse with ADT</a></li>
                    <li><a href="#">From Other IDEs</a></li>
                    <li><a href="#">Using the Dev Tools App</a></li>
                </ul>
            </li>
            <li><a href="#">Google</a>
                <ul>
                    <li><a href="#">Preparing for Release</a></li>
                    <li><a href="#">Versioning Your Apps</a></li>
                    <li><a href="#">Signing Your Apps</a></li>
                </ul>
            </li>
        </ul>
    </li>
    <li><a href="#">Support Library</a>
        <ul>
            <li><a href="#">Features</a></li>
            <li><a href="#">Setup</a></li>
        </ul>
    </li>
    <li><a href="#">Tools Help</a>
        <ul>
            <li><a href="#">adb</a></li>
            <li><a href="#">ADT</a></li>
            <li><a href="#">monkey</a></li>
            <li><a href="#">monkeyrunner</a>
                <ul>
                    <li><a href="#">MonkeyDevice</a></li>
                    <li><a href="#">MonkeyImage</a></li>
                    <li><a href="#">MonkeyRunner</a></li>
                </ul>
            </li>
            <li><a href="#">ProGuard</a></li>
            <li><a href="#">SDK Manager</a></li>
            <li><a href="#">Systrace</a></li>
            <li><a href="#">Tracer for OpenGL ES</a></li>
            <li><a href="#">Traceview</a></li>
            <li><a href="#">uiautomator</a>
                <ul>
                    <li><a href="#">Configurator</a></li>
                    <li><a href="#">IAutomationSupport</a></li>
                    <li><a href="#">UiWatcher</a></li>
                </ul>
            </li>
            <li><a href="#">zipalign</a></li>
        </ul>
    </li>
    <li><a href="#">Revisions</a>
        <ul>
            <li><a href="#"> SDK Tools </a></li>
            <li><a href="#"> ADT Plugin </a></li>
        </ul>
    </li>
    <li><a href="#">Google</a>
        <ul>
            <li><a href="#">ADK 2012 Guide</a></li>
            <li><a href="#">ADK 2011 Guide</a></li>
        </ul>
    </li>
</ul>

Load jQuery library together with the jQuery Multilevel Slide Menu library into your code

<script src="http://onlinefreetools.net/wp-content/uploads/demo/accordion/navgoco/js/highlight.pack.js"></script>
<script src="http://onlinefreetools.net/wp-content/uploads/demo/accordion/navgoco/js/jquery.navgoco.min.js"></script>
<script>
    $(document).ready(function () {
        // Initialize navgoco with default options
        $("#demo1").navgoco({
            caretHtml: '',
            accordion: false,
            openClass: 'open',
            save: true,
            cookie: {
                name: 'navgoco',
                expires: false,
                path: '/'
            },
            slide: {
                duration: 400,
                easing: 'swing'
            },
            // Add Active class to clicked menu item
            onClickAfter: function (e, submenu) {
                e.preventDefault();
                $('#demo1').find('li').removeClass('active');
                var li = $(this).parent();
                var lis = li.parents('li');
                li.addClass('active');
                lis.addClass('active');
            },
        });

        $("#collapseAll").click(function (e) {
            e.preventDefault();
            $("#demo1").navgoco('toggle', false);
        });

        $("#expandAll").click(function (e) {
            e.preventDefault();
            $("#demo1").navgoco('toggle', true);
        });

        $("#demo2").navgoco({
            accordion: true
        });

    });
</script>

Source Code

Download

For more Advanced Usages, please check the demo page or visit the official website.