Create Multilevel Responsive CSS menu, with a slide effect

by Posted on

Today I am going to introduce one more awesome plugin to Create Multilevel Responsive CSS menu, with a slide effect developed by grubersjoe. You can simply use this plugin on your website to create a simple multilevel CSS menu, with a slide effect and various options.
slide-menu


Integration Of Multilevel Responsive CSS menu, with a slide effect on website

The integration of this plugin on website is quite simple in just few minutes you can add Multilevel Responsive CSS menu on your website just follow below steps.

Libraries

Include required JS and CSS libraries on page.

<!-CSS -->
<link rel="stylesheet" href="slide-menu.css">
<link rel="stylesheet" href="preview.css">
 
<!--JS -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="slide-menu.js"></script>

HTML

Here I am adding basic html navigation code you can replace with yours.

nav class="slide-menu" id="my-menu">
    <ul>
        <li>
            <a href="#">Home</a>
            <ul>
                <li><a href="#">Submenu entry 1</a></li>
                <li><a href="#">Submenu entry 2</a></li>
                <li><a href="#">Submenu entry 3</a></li>
            </ul>
        </li>
        <li>
            <a href="/blog">Blog</a>
        </li>
        <li>
            <a href="/about">About</a>
        </li>
    </ul>
</nav>



JS

Finally make your sliding menu actionable by simply adding following code.

$(function() {  
    var menu = $('#my-menu').slideMenu();
});

Control buttons

Buttons to control the menu can be created easily. Add the class slide-menu-control to links or buttons and set the data attributes target to the ID of the desired menu and action to the API method:

<a class="slide-menu-control" data-target="my-menu" data-action="open">Open</a>
<a class="slide-menu-control" data-target="my-menu" data-action="close">Close</a>

Inside the menu container the attribute data-target can be omitted or set to to the string this to control this menu.

<a class="slide-menu-control" data-action="close">Close this menu</a>
<a class="slide-menu-control" data-target="this" data-action="close">Close this menu</a>

See live demo and download source code.

DEMO | DOWNLOAD

Visit official github repository for more information.


Published by admin