This time I will share jQuery Plugin and tutorial about Responsive Sliding Hamburger Menu Plugin For jQuery – elmenu, hope it will help you in programming stack.
Just another jQuery based responsive nav solution that converts the normal horizontal dropdown navigation into a mobile-friendly sliding hamburger menu (aka off-canvas menu) on small screens. Supports nested, multi-level sub menus and has the ability to take all menus in the header and clones them into the mobile nav. Fully customizable via SCSS.
How to use it:
1. First you need to put jQuery library and the jQuery elmenu plugin’s script at the bottom of your html document.
1 |
<script src="//code.jquery.com/jquery-latest.min.js"></script> |
2 |
<script src="js/elmenu.js"></script> |
2. Put the compiled CSS file in the head section of the document.
1 |
<link rel="stylesheet" href="css/styles.min.css"> |
3. Create a multi-level site navigaton and insert it together with the main page content to a container named ‘canvas’.
04 |
<div class="elmtoggle__holder"> |
08 |
<div class="navholder--utility cf"> |
11 |
<ul class="nav--utility elm__list"> |
12 |
<li class="elm__item"><a class="elm__link" href="#!">About</a></li> |
13 |
<li class="elm__item"><a class="elm__link" href="#!">Contact</a></li> |
14 |
<li class="elm__item"><a class="elm__link" href="#!">Blog</a></li> |
18 |
<ul class="nav--social elm__list"> |
20 |
<li class="elm__item"><a class="elm__link" href="#!">Twitter</a></li> |
25 |
<div class="navholder--main"> |
28 |
<ul class="nav--main elm__list"> |
29 |
<li class="elm__item hassub"><a class="elm__link" href="#!">Product 1</a> |
30 |
<ul class="elm__list--sub"> |
31 |
<li class="elm__item--sub hassubsub"><a class="elm__link--sub" href="#!">Product 1.1</a> |
32 |
<ul class="elm__list--subsub"> |
33 |
<li class="elm__item--subsub"><a class="elm__link--subsub" href="#!">Product 1.1.1</a></li> |
34 |
<li class="elm__item--subsub"><a class="elm__link--subsub" href="#!">Product 1.1.2</a></li> |
35 |
<li class="elm__item--subsub"><a class="elm__link--subsub" href="#!">Product 1.1.3</a></li> |
38 |
<li class="elm__item--sub"><a class="elm__link--sub" href="#!">Product 1.2</a></li> |
39 |
<li class="elm__item--sub"><a class="elm__link--sub" href="#!">Product 1.3</a></li> |
42 |
<li class="elm__item"><a class="elm__link" href="#!">Product 2</a></li> |
43 |
<li class="elm__item"><a class="elm__link" href="#!">Product 3</a></li> |
51 |
Main content goes here |
4. Initialize the plugin and set the order you want the nav elements to show up in the mobile nav. Reminder: it’s an array, so 0 is the first item. .
1 |
var menuOrder = ['2','0','1']; |
2 |
$( '#elmain' ).elmenu( menuOrder ); |
Change log:
2017-03-16
- v1.1.0 Fixes a bug where multiple toggle icons where spinning on a single icon click, so individual elements needed to be targeted specifically
2017-02-01
Thi
source : jqueryscript.net
