【drawer】ドロワーメニューを簡単にできるjQuery

スポンサーリンク
HTML・JavaScript..

こんにちは、ハル@haru_elpisです。

ドロワーメニューを簡単にできるjQueryプラグインの紹介です。

drawerとは

ボタンをクリックすると横からスライドして現れるドロワーメニュー、コーディングも比較的簡単なので是非ご活用ください。

ダウンロード

blivesta/drawer
Flexible drawer menu using jQuery, iScroll and CSS. - blivesta/drawer

ダウンロードした「drawer.min.js」「iscroll.min.js」「drawer.min.css」ファイルをjsフォルダなど任意の場所へ移動しておきましょう。

head

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/drawer/3.1.0/css/drawer.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/iScroll/5.1.3/iscroll.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/drawer/3.1.0/js/drawer.min.js"></script>

HTML

<body class="drawer drawer--left">

	<header role="banner">
		<!-- ハンバーガーボタン -->
		<button type="button" class="drawer-toggle drawer-hamburger">
		  <span class="sr-only">toggle navigation</span>
		  <span class="drawer-hamburger-icon"></span>
		</button>
		<!-- ナビゲーションの中身 -->
		<nav class="drawer-nav" role="navigation">
		  <ul class="drawer-menu">
			<li><a class="drawer-brand" href="#">Brand</a></li>
			<li><a class="drawer-menu-item" href="#">Nav1</a></li>
			<li><a class="drawer-menu-item" href="#">Nav2</a></li>
		  </ul>
		</nav>
	  </header>
	  <main role="main">

</body>

JavaScript

script>

	$(document).ready(function() {
	    $('.drawer').drawer();
	});

</script>

オプション

bodyの開始タグのクラス名を変更すれば右から表示されるようにできます。

<body class="drawer drawer--right">

コメント

タイトルとURLをコピーしました