jQuery

【jQuery】レスポンシブメニュープラグインFlex Responsive jQuery Burger Menu

February 28, 2018
Invent Flex Responsive jQuery Burger Menu

Flex Responsive jQuery Burger Menuは、デスクトップ/大型タブレットディスプレイ上に水平メニューを表示し、小さなモバイルデバイス上でバーガーメニューをスライドさせるように折り畳まれます。ハンバーガーはデフォルトで右に揃えられ、画面の右側からスライドします。メニューボタンとメニュー自体にleftのクラスを追加することで、左揃えにすることができます。

Usage

headに次のコードを追加します

<link rel="stylesheet" href="https://cdn.rawgit.com/InventPartners/flex-responsive-burger-menu/master/css/nav.min.css" /> 
<script src="https://cdn.rawgit.com/InventPartners/flex-responsive-burger-menu/master/js/nav.min.js"></script>

メニューボタン(モバイルでのみ表示)は、inv-nav-main-btnというIDを使用してマークアップされます。

<button type="button" id="inv-nav-main-btn" class="hamburger right">
	<span class="hamburger-box">
		<span class="hamburger-inner"></span>
	</span>
	<span class="text">Menu</span>
</button>
<ul id="inv-menu" class="right">
	<li><a href="#">Home</a></li>
	<li><a href="#">Our Clients</a></li>
	<li>
		<a href="#">Shop</a>
		<ul>
			<li><a href="#">Product One</a></li>
			<li><a href="#">Product Two</a></li>
			<li><a href="#">Product Three</a></li>
			<li><a href="#">Product Four</a></li>
		</ul>
	</li>
	<li><a href="#">Blog</a></li>
	<li><a href="#">Contact Us</a></li>
</ul>

MIT