jQuery

【jQuery】マルチレベルナビゲーションメニューを実装する軽量プラグインAce Responsive Menu

December 17, 2017
Ace Responsive Menu

Ace Responsive Menuは複数のデバイスをサポートし、レスポンシブ対応でマルチレベルナビゲーションメニューを作成するための軽量jQueryプラグイン。horizo​​ntal / vertical / accordionの3種類があります。

Compatible Browsers

  1. Internet Explorer 7+
  2. Firefox 3+
  3. Chrome 4+
  4. Safari 4+
  5. Opera 10+

How to use

スタイルを変更する場合はdata-menu-style = ""をhorizo​​ntal / vertical / accordionに変更

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

オプションのパラメータ

<script type="text/javascript">
	  $("#demoMenu").aceResponsiveMenu({
		 resizeWidth: '768', // Set the breakpoint same in Media query       
		 animationSpeed: 'fast', //slow, medium, fast
		 accoridonExpAll: false //Expands all the accordion menu on click
	});     
</script>

MIT