This time I will share jQuery Plugin and tutorial about Sleek Off-canvas Push Menu Plugin For jQuery – FlyPanels, hope it will help you in programming stack.
FlyPanels is a jQuery off-canvas navigation plugin which simplifies the task of creating a multi-level, cross-browser, sidebar push menu for your responsive website.
Basic usage:
1. Include jQuery JavaScript library together with jQuery flypanels plugin’s stylesheet and JavaScript on the webpage.
1 |
<link rel="stylesheet" href="css/flyPanels.css"> |
2 |
<script src="jquery.min.js"></script> |
3 |
<script src="jquery.flypanels.js"></script> |
2. Include addons as per your needs.
- treemenu: make your nested menus behavior like a tree
- search: add a search panel to the page
1 |
<script src="fpm.treemenu.js"></script> |
2 |
<script src="fpm.search.js"></script> |
3. Or load the full JavaScript file in the document..
1 |
<script src="flypanels.all.min.js"></script> |
4. Create a multi-level, off-canvas, expanding tree menu following the markup structure like this:
01 |
<div class="offcanvas flypanels-left"> |
02 |
<div class="panelcontent" data-panel="treemenu"> |
03 |
<nav class="flypanels-treemenu" role="navigation"> |
05 |
<li class="haschildren"> |
06 |
<div> <a href="#" class="link">Node 1</a> <a href="#" class="expand">2</a></div> |
09 |
<div><a href="#" class="link">Node 1-1</a></div> |
12 |
<div><a href="#" class="link">Node 1-2</a></div> |
16 |
<li class="haschildren"> |
17 |
<div class="link"> <a href="#" class="link">Node 2</a> <a href="#" class="expand">2</a></div> |
20 |
<div><a href="#" class="link">Node 2-1</a></div> |
23 |
<div><a href="#" class="link">Node 2-2</a></div> |
3. Add your main content with the nab bar into the ‘flypanels-main’ container:
1 |
<div class="flypanels-main"> |
2 |
<div class="flypanels-topbar"> |
3 |
<a class="flypanels-button-left icon-menu" data-panel="default" href="#">Hamburger Icon Here</a> |
4 |
<a class="flypanels-button-right icon-menu" data-panel="search" href="#">Search Icon Here</a> |
6 |
<div class="flypanels-content"> |
4. Create a search panel which will slide from the right of the screen. OPTIONAL.
01 |
<div class="offcanvas flypanels-right"> |
02 |
<div class="panelcontent" data-panel="search"> |
03 |
<div class="searchbox" data-searchurl="json/searchresult.json?search=true"> |
05 |
<a href="#" class="searchbutton"></a> |
07 |
<div class="resultinfo" style="display:none"> |
08 |
You search for "<span class="query">lorem ipsum</span>" resulted in <span class="num">5</span> hits. |
10 |
<div class="errormsg" style="display:none"> |
11 |
Something went wrong, please refresh the page and try again. |
14 |
<div class="loading" style="display:none"><div class="loader"></div><span>Searching...</spanShare this: |
