Sleek Off-canvas Push Menu Plugin For jQuery - FlyPanels

Sleek Off-canvas Push Menu Plugin For jQuery - FlyPanels
File Size: 1.25 MB
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. Include addons as per your needs.

  • treemenu: make your nested menus behavior like a tree
  • search: add a search panel to the page
<script src="fpm.treemenu.js"></script>
<script src="fpm.search.js"></script>

3. Or load the full JavaScript file in the document..

<script src="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. Plugin's default options to customize the menu.

flyPanels.init({

  // parent container
  container: '.flypanels-container',

  // 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 () {}
});

Changelog:

v3.2.0 (2019-09-10)

  • Added support for generating a treemenu from a JSON file.

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