jQuery

【jQuery】オフキャンバスナビゲーションプラグインHC Off-canvas Nav

November 21, 2018
HC Off-canvas Nav

HC Off-canvas Navは複数のサブメニュー要素に入れ子を可能にするオフキャンバスナビゲーションjQueryプラグイン。

Usage

Call the plugin

<link rel="stylesheet" href="/path/to/hc-offcanvas-nav.css">
<script src="/path/to/jquery.js"></script>
<script src="/path/to/hc-offcanvas-nav.js"></script>
<script>
  jQuery(document).ready(function($) {
    $('#main-nav').hcOffcanvasNav({
      maxWidth: 980
    });
  });
</script>

Example HTML menu structure

<nav id="main-nav">
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li>
      <a href="#">Services</a>
      <ul>
        <li>
          <a href="#">Hosting</a>
          <ul>
            <li><a href="#">Private Server</a></li>
            <li><a href="#">Managed Hosting</a></li>
          </ul>
        </li>
        <li><a href="#">Domains</a></li>
        <li><a href="#">Websites</a></li>
      </ul>
    </li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>

Options

  1. maxWidth
  2. pushContent
  3. position
  4. levelOpen
  5. levelSpacing
  6. levelTitles
  7. navTitle
  8. navClass
  9. disableBody
  10. closeOnClick
  11. customToggle
  12. insertClose
  13. insertBack
  14. labelClose
  15. labelBack

Methods

  1. settings
  2. isOpen
  3. update
  4. open
  5. close
var Nav = $('#main-nav').hcOffcanvasNav({
  maxWidth: 980
});

// update the settings
Nav.update({
  maxWidth: 1024,
  navTitle: 'All pages'
});

// update the nav DOM
Nav.update(true);

// update the settings and the DOM
Nav.update({
  maxWidth: 1024,
  navTitle: 'All pages'
}, true);

Events

  1. open
  2. close
  3. close.once
var Nav = $('#main-nav').hcOffcanvasNav();

// change nav open side after each close
Nav.on('close', function(event, settings) {
  Nav.update({
    side: settings.side === 'left' ? 'right' : 'left'
  });
});

// will change nav open side only once
Nav.on('close.once', function(event, settings) {
  Nav.update({
    side: settings.side === 'left' ? 'right' : 'left'
  });
});

MIT