FlyPanels - Canvas Push Menu JavaScript Plugin

FlyPanels - Canvas Push Menu JavaScript Plugins
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/"></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">
        <li class="haschildren">
          <div> <a href="#" class="link">Node 1</a> <a href="#" class="expand">2</a></div>
              <div><a href="#" class="link">Node 1-1</a></div>
              <div><a href="#" class="link">Node 1-2</a></div>
        <li class="haschildren">
          <div class="link"> <a href="#" class="link">Node 2</a> <a href="#" class="expand">2</a></div>
              <div><a href="#" class="link">Node 2-1</a></div>
              <div><a href="#" class="link">Node 2-2</a></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 class="flypanels-content">
    Main Content Here

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 class="resultinfo" style="display:none">
      You search for "<span class="query">lorem ipsum</span>" resulted in <span class="num">5</span> hits.
    <div class="errormsg" style="display:none">
      Something went wrong, please refresh the page and try again.

    <div class="loading" style="display:none"><div class="loader"></div><span>Searching...</span></div>
    <nav class="flypanels-searchresult" style="display:none"></nav>

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 -->

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">

7. Call the function to initialize the plugin. That's it.


8. Available plugin options to customize the menu.


  // 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.

  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 :
Size :
Site Download :
Official Website:
Go to website
Previous Post Next Post