jQuery

【jQuery】マルチレベルナビゲーションメニューを作成するK Resposive Menu

June 1, 2018
k-responsive-menu

K Resposive Menuははマルチデバイスサポートに対応したマルチレベルナビゲーションメニューを作成するための軽量jQueryプラグインです。

Install

<link rel="stylesheet" type="text/css" href="bower_components/k-responsive-menu/dist/css/k-responsive-menu.css">
<script src="bower_components/k-responsive-menu/dist/js/k-responsive-menu.js"></script>

HTML

<nav>
  <div class="menu-toggle">
    <h3>Menu</h3>
    <button type="button" id="menu-btn">
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </button>
  </div>
  <ul id="demoMenu" class="k-responsive-menu" data-menu-style="horizontal">
    <li><a href="">Item one  </a></li>
    <li><a href="">Item two </a>
      <ul>
        <li><a href="">sub Item one </a></li>
        <li><a href="">sub Item two </a></li>
        <li><a href="">sub Item Three </a></li>
      </ul>
    </li>
    <li><a href="">Item three </a></li>
    <li><a href="">Item four </a></li>
  </ul>
</nav>

JS

$(document).ready(function() {
  $('#demoMenu').kResponsiveMenu({
    resizeWidth: '768', // Set the breakpoint same in Media query       
    animationSpeed: 'fast', //slow, medium, fast
    accoridonExpAll: false //Expands all the accordion menu on click
  });
});