This time I will share jQuery Plugin and tutorial about Simple Lightweight Off-canvas Menu Plugin – MA5 Mobile Menu, hope it will help you in programming stack.
A simple, lightweight jQuery mobile navigation plugin allows you to create an off-canvas sidebar panel with a multi-level sliding drill down menu for your site navigation.
More features:
- Push the main content to the right side while revealing the sidebar navigation.
- Bootstrap compatible.
- Touch gestures supported based on jQuery swipeTouch plugin.
How to use it:
1. Add the ma5-mobile-menu.css and Bootstrap’s stylesheet (OPTIONAL) in the head section of the document.
1 |
<link rel="stylesheet" href="bootstrap.min.css"> |
2 |
<link href="stylesheets/ma5-mobile-menu.css" rel="stylesheet"> |
2. Create a multi-level drill down menu for the off-canvas navigation.
01 |
<nav class="ma5-menu-mobile"> |
03 |
<li class="ma5-li-1"><a href="#node1">Node 1</a></li> |
04 |
<li class="ma5-li-2"> <a class="ma5-path-to-active" href="#node2">Node 2</a><span class="ma5-btn-enter"><span class="glyphicon glyphicon-menu-right"></span></span> |
06 |
<li class="ma5-li-2-1"> |
07 |
<div class="ma5-leave-bar"><span class="ma5-btn-leave"><span class="glyphicon glyphicon-menu-left"></span></span>Node 2</div> |
08 |
<a href="#node2-1">Node 2-1</a> </li> |
09 |
<li class="ma5-li-2-2"><a href="#node2-2">Node 2-2</a></li> |
10 |
<li class="ma5-li-2-3"> <a class="ma5-path-to-active" href="#node2-3">Node 2-3</a><span class="ma5-btn-enter"><span class="glyphicon glyphicon-menu-right"></span></span> |
12 |
<ul class="ma5-active-ul ma5-ul-2-3"> |
13 |
<li class="ma5-li-2-3-1"> |
14 |
<div class="ma5-leave-bar"><span class="ma5-btn-leave"><span class="glyphicon glyphicon-menu-left"></span></span>Node 2-3</div> |
15 |
<a href="#node2-3-1">Node 2-3-1</a> </li> |
17 |
<li class="ma5-active-li ma5-li-2-3-2"> <a class="ma5-path-to-active" href="#node2-3-2">Node 2-3-2</a><span class="ma5-btn-enter"><span class="glyphicon glyphicon-menu-right"></span></span> |
18 |
<ul class="ma5-ul-2-3-2"> |
19 |
<li class="ma5-li-2-3-2-1"> |
20 |
<div class="ma5-leave-bar"><span class="ma5-btn-leave"><span class="glyphicon glyphicon-menu-left"></span></span>Node 2-3-2</div> |
21 |
<a href="#node2-3-2-1">Node 2-3-2-1</a> </li> |
22 |
<li class="ma5-li-2-3-2-1"><a href="#node2-3-2-2">Node 2-3-2-2</a></li> |
23 |
<li class="ma5-li-2-3-2-3"><a href="#node2-3-2-3">Node 2-3-2-2</a></li> |
24 |
<li class="ma5-li-2-3-2-4"><a href="#node2-3-2-4">Node 2-3-2-2</a></li> |
27 |
<li class="ma5-li-2-3-3"><a href="#node2-3-3">Node 2-3-3</a></li> |
28 |
<li class="ma5-li-2-3-4"><a href="#node2-3-4">Node 2-3-4</a></li> |
31 |
<li class="ma5-li-2-4"><a href="#node2-4">Node 2-4</a></li> |
32 |
<li class="ma5-li-2-5"><a href="#node2-5">Node 2-5</a></li> |
33 |
<li class="ma5-li-2-6"><a href="#node2-6">Node 2-6</a></li> |
34 |
<li class="ma5-li-2-7"><a href="#node2-7">Node 2-7</a></li> |
35 |
<li class="ma5-li-2-8"><a href="#node2-8">Node 2-8</a></li> |
36 |
<li class="ma5-li-2-9"><a href="#node2-9">Node 2-9</a></li> |
39 |
<li class="ma5-li-3"><a href="#node3">Node 3</a></li> |
40 |
<li class="ma5-li-4"><a href="#node4">Node 4</a></Share this: |
