jQuery

【jQuery】シンプルなキャンバスメニューBurgerMenu

April 29, 2017
burgermenu

BurgerMenuはシンプルなキャンバスメニュー。レスポンシブまたはモバイルのWebサイト/ Webアプリケーションで使用できます。

Browser support

  1. Chrome
  2. iOS Safari
  3. Firefox
  4. Opera
  5. Android Browser
  6. IE9+

jQuery 1.6以降が必要

HTML

<nav id="menu-example" class="burgermenu-left">
  <ul>
    <li><a href="#">Home</a></li>
    <li class="has-children">
      <a href="#">Slide Panel Submenu</a>
      <ul class="is-children">
        <li class="back"><a href="#">&lt; Back</a></li>
        <li><a href="#">Submenu element</a></li>
        <li><a href="#">Submenu element</a></li>
        <li><a href="#">Submenu element</a></li>
      </ul>
    </li>
    <li class="dropdown">
      <a href="#">Dropdown Submenu</a>
      <ul>
        <li><a href="#">Dropdown element</a></li>
        <li><a href="#">Dropdown element</a></li>
        <li><a href="#">Dropdown element</a></li>
      </ul>
    </li>
  </ul>
</nav>

<div class="page-wrapper">
  <a id="menu-toggle" href="#menu-example">Toggle Menu</a>
</div>

JS

$(function() {
  $('#menu-example').burgermenu();
});

MIT