Sleek Off-canvas Push Menu Plugin For jQuery - FlyPanels

Sleek Off-canvas Push Menu Plugin For jQuery - FlyPanels
File Size: 676 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

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.

<link rel="stylesheet" href="css/flyPanels.css">
...
<script src="jquery.min.js"></script>
<script src="jquery.flypanels.js"></script>

2. 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="treemenu" href="#"></a> 
  </div>
  <div class="flypanels-content">
    Main content goes here
  </div>
</div>

4. Wrap the off-canvas menu and the main content in the 'flypanels-container' container.

<div class="flypanels-container preload">

  <!-- Off-canvas menu here -->
  <!-- main content here -->
 
</div>

5. Call the function to initialize the plugin.

$('.flypanels-container').flyPanels({
  treeMenu: {
    init: true
  },
});

6. Plugin's default options.

$('.flypanels-container').flyPanels({

  // init the expanding treemenu
  treeMenu: {
    init: false,
    expandHandler: 'span.expand'
  },

  // init the search component
  search = {
    init: false,
    saveQueryCookie: false
  },

  // callback functions
  onInit: function () {},
  onLoad: function () {},
  onOpenLeft: function () {},
  onOpenRight: function () {},
  onCloseLeft: function () {},
  onCloseRight: function () {},
  onDestroy: function () {}
  
});

This awesome jQuery plugin is developed by SubZane. For more Advanced Usages, please check the demo page or visit the official website.