Navgoco – jQuery Multilevel Slide Menu

Live Demo

Demo 1

Collapse All | Expand All

Demo 2

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