jQuery Vertical Menu with Submenu

January 04, 2020 No comments jQuery Plugin Submenu Vertical JavaScript

1. Introduction

The Stack Menu is a simple jQuery plugin to create a vertical navigation menu with submenu. The plugin takes unordered HTML components (ul elements) and creates a vertical menu with nested elements. The resulting menu is fully customizable and easy to adapt. User can navigate using back and forward buttons and select choosed links.

Jquery stack menu

2. Plugin Overview

Library jquery-stack-menu
Author Max Zhurkin
Licence MIT Licence
Repository GitHub
Dependencies jQuery 1.3.1

Demo

3. How to install jquery-stack-menu plugin

Follow these steps in order to install Stack Menu jQuery plugin.

1. first load the jQuery in your HTML document

<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>

2. second, install jquery-stack-menu CSS styles and JavaScripts

<!-- Stack Menu CSS -->
<link href="./dist/jquery-stack-menu.min.css" rel="stylesheet"/>

<!-- Stack Menu Js -->
<script src="./dist/jquery-stack-menu.min.js"></script>

3. the last step is to place jquery-stack-menu plugin initialization script

<script>
    $(document).ready(function(){
           $("#stack-menu").stackMenu()
    });
</script>

The plugin takes unordered items on the list and creates a vertical menu that can be used in navigation. The unordered list must be wrapped with other ui elements for example div. 

<div class="menu">
        <nav id="stack-menu">
            <ul>
                <li><a href="#">Main Menu Link 1</a>
                    <ul>
                        <li><a href="#">Submenu 1.1</a></li>
                        <li><a href="#">Submenu 1.2</a>
                            <ul>
                                <li><a href="#">Submenu 1.2.1</a></li>
                                <li><a href="#">Submenu 1.2.2</a></li>
                                <li><a href="#">Submenu 1.2.3</a></li>
                                <li><a href="#">Submenu 1.2.4</a></li>
                                <li><a href="#">Submenu 1.2.5</a></li>
                                <ul>
                                    <li><a href="#">Submenu 1.3</a></li>
                                    <li><a href="#">Submenu 1.4</a></li>
                                    <li><a href="#">Submenu 1.5</a></li>
                                    <li><a href="#">Submenu 1.6</a></li>
                                </ul>
                            </ul>
                        </li>
                        <li><a href="#">Vitae</a></li>
                        <li><a href="#">Ipsum</a></li>
                    </ul>
                </li>
                <li><a href="#">Main Menu Link 2</a>
                    <ul>
                        <li><a href="#">Similique</a></li>
                        <li><a href="#">Distinctio</a></li>
                        <li><a href="#">Porro</a></li>
                        <li><a href="#">Illum</a></li>
                    </ul>
                </li>
                <li><a href="#">Main Menu Link 3</a></li>
                <li><a href="#">Main Menu Link 4</a>
                    <ul>
                        <li><a href="#">Quod</a></li>
                        <li><a href="#">Provident</a></li>
                        <li><a href="#">Cumque</a></li>
                    </ul>
                </li>
            </ul>
        </nav>
    </div>
</pre>

4. Conclusion

In this article, we presented a Vertical Menu with Submenu plugin written in jQuery. The plugin should be useful for anyone who wants to create simple navigation panel based on HTML unordered (UL) tree structure.

{{ message }}

{{ 'Comments are closed.' | trans }}