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.
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">
<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.
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:
Inside the menu container the attribute data-target can be omitted or set to to the string this to control this menu.
See live demo and download source code.
Visit official github repository for more information.
