Sleek Off-canvas Push Menu JavaScript Plugin - FlyPanels

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

FlyPanels is a Vanilla JavaScrip 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 () {}
});

Changelog:

v4.0.2 (2022-12-18)

v4.0.1 (2022-02-20)

  • New: Re-written HTML markup. The component no longer wraps around your content, making it easier to implement and less cumbersome.

v4.0.1 (2022-02-20)

  • New: Re-written HTML markup. The component no longer wraps around your content, making it easier to implement and less cumbersome.
  • New: Added some neat animations to the panels. Currently there's only two animations but I will add some more soon enough.
  • New: The buttons to open the panels are now separated and can be placed anywhere you like.
  • Note: The treemenu and search components still works exactly the same.

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