こんにちは、ハル@haru_elpisです。
ドロワーメニューを簡単にできるjQueryプラグインの紹介です。
drawerとは
ボタンをクリックすると横からスライドして現れるドロワーメニュー、コーディングも比較的簡単なので是非ご活用ください。
ダウンロード
GitHub - blivesta/drawer: Flexible drawer menu using jQuery, iScroll and CSS.
Flexible drawer menu using jQuery, iScroll and CSS. - blives...
github.com
ダウンロードした「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">
コメント