こんにちは、ハル@haru_elpisです。
ドロワーメニューを簡単にできるjQueryプラグインの紹介です。
目次
drawerとは
ボタンをクリックすると横からスライドして現れるドロワーメニュー、コーディングも比較的簡単なので是非ご活用ください。
ダウンロード
https://github.com/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>[affi id=18]
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">
コメント