 |
| FlyPanels - Canvas Push Menu JavaScript Plugins |
FlyPanels is a Vanilla JavaScript off-canvas navigation plugin which simplifies the task of creating a multi-level, cross-browser, sidebar push menu for your responsive website or cross-platform webapp.
Note that the plugin no longer depends on jQuery library since v2.
How to use it
1. Include the flypanels plugin's stylesheet and JavaScript on the webpage.
<link rel="stylesheet" href="dist/flyPanels.css" /> <script src="dist/flypanels.min.js"></script>
2. Include additional modules as per your needs.
- treemenu: make your nested menus behavior like a tree
- search: add a search panel to the page
<script src="modules/fpm.treemenu.min.js"></script> <script src="modules/fpm.search.min.js"></script>
3. Or load the full JavaScript file in the document..
<script src="dist/flypanels.all.min.js"></script>
4. Create a multi-level, off-canvas, expanding tree menu following the markup structure like this:
<div class="offcanvas flypanels-left">
<div class="panelcontent" data-panel="treemenu">
<nav class="flypanels-treemenu" role="navigation">
<ul>
<li class="haschildren">
<div> <a href="#" class="link">Node 1</a> <a href="#" class="expand">2</a></div>
<ul>
<li>
<div><a href="#" class="link">Node 1-1</a></div>
</li>
<li>
<div><a href="#" class="link">Node 1-2</a></div>
</li>
</ul>
</li>
<li class="haschildren">
<div class="link"> <a href="#" class="link">Node 2</a> <a href="#" class="expand">2</a></div>
<ul>
<li>
<div><a href="#" class="link">Node 2-1</a></div>
</li>
<li>
<div><a href="#" class="link">Node 2-2</a></div>
</li>
</ul>
</li>
</ul>
</nav>
</div>
</div>
3. Add your main content with the nab bar into the 'flypanels-main' container:
<div class="flypanels-main">
<div class="flypanels-topbar">
<a class="flypanels-button-left icon-menu" data-panel="default" href="#">Hamburger Icon Here</a>
<a class="flypanels-button-right icon-menu" data-panel="search" href="#">Search Icon Here</a>
</div>
<div class="flypanels-content">
Main Content Here
</div>
</div>
4. Create a search panel which will slide from the right of the screen. OPTIONAL.
<div class="offcanvas flypanels-right">
<div class="panelcontent" data-panel="search">
<div class="searchbox" data-searchurl="json/searchresult.json?search=true">
<input type="text" />
<a href="#" class="searchbutton"></a>
</div>
<div class="resultinfo" style="display:none">
You search for "<span class="query">lorem ipsum</span>" resulted in <span class="num">5</span> hits.
</div>
<div class="errormsg" style="display:none">
Something went wrong, please refresh the page and try again.
</div>
<div class="loading" style="display:none"><div class="loader"></div><span>Searching...</span></div>
<nav class="flypanels-searchresult" style="display:none"></nav>
</div>
</div>
5. Wrap the off-canvas menu and the main content in the 'flypanels-container' container.
<div class="flypanels-container preload"> <!-- Off-canvas menu here --> <!-- search panel here --> <!-- main content here --> </div>
6. You're also allowed to load menu data from a JSON file.
<nav class="flypanels-treemenu" role="navigation" aria-label="Main navigation" data-json="json/treemenu.json" id="flypanels-treemenu"> ... </nav>
7. Call the function to initialize the plugin. That's it.
flyPanels.init();
8. Available plugin options to customize the menu.
flyPanels.init({
// parent container
initClass: 'js-flyPanels',
// tree menu options
treeMenu: {
init: false,
expandHandler: 'span.expand',
UseJSON: false, // use JSON data for the menu
OnExpandOpen: function () {},
OnExpandClose: function () {},
OnJSONLoaded: function () {},
JSONLoadError: function () {}
},
// search options
search = {
init: false,
saveQueryCookie: false
}
});
9. Callback functions.
flyPanels.init({
onInit: function () {},
onInitTreeMenu: function () {},
onOpen: function () {},
onClose: function () {},
onOpenLeft: function () {},
onCloseLeft: function () {},
onOpenRight: function () {},
onCloseRight: function () {},
afterWindowResize: function () {},
OnAttachEvents: function () {},
onWindowResize: function () {},
onEmptySearchResult: function () {},
onSearchError: function () {},
onSearchSuccess: function () {},
onInitSearch: function () {},
onDestroy: function () {}
});
Live Demo
See the Pen Untitled by Teguh Sigit (@teguhsigit) on CodePen.
File Info
- File Name :
- flyPanels-master.zip
- Size :
- 736KB
- Site Download :
- Github.com
- Official Website:
- Go to website
- License:
- MIT