横からスライドして表示されるメニューを実装できるjQueryプラグイン「Drawer」

横からスライドして表示されるメニューを実装できるjQueryプラグイン「Drawer」

横からスライドして表示されるメニューを実装できるjQueryプラグイン「Drawer」
  • シェアしてね♪
  • このエントリーをはてなブックマークに追加


  • 一式98,000円~の格安プランをご用意!Web制作お任せください!
  • このエントリーをはてなブックマークに追加

Drawerは、横からスライドして表示されるメニューを実装することができるjQueryプラグインです。

デモは以下ページでご確認いただけます。

デモページを見る

スポンサードリンク

Drawerの使い方

ステップ1. 必要なファイルの読み込み

まずは、必要なCSSファイルとJSファイルを読み込みます。すべてCDN経由で配信されていますが、ファイルを自サーバーに設置したい場合は、GitHubからダウンロードしましょう。

<!-- drawer.css -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/drawer/3.2.2/css/drawer.min.css">
<!-- jquery & iScroll -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/iScroll/5.2.0/iscroll.min.js"></script>
<!-- drawer.js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/drawer/3.2.2/js/drawer.min.js"></script>

記述する場所は<head>~</head>内ですが、JSファイルは</body>の直前でもOKです。

ステップ2. HTMLのマークアップ

続いて、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">
<!-- Page content -->
</main>
</body>

button要素がハンバーガーボタンで、navの中身がメニューとして表示されます。

クラスは変えずにそのまま記述するようにしましょう。

ステップ3. Drawerの呼び出し

最後に、Drawerを呼び出せば、スライドして表示されるメニューが機能します。

<script>
$(document).ready(function() {
$('.drawer').drawer();
});
</script>

Drawerのオプション

以下のようにオプションを追加することもできます。

<script>
$('.drawer').drawer({
class: {
nav: 'drawer-nav',
toggle: 'drawer-toggle',
overlay: 'drawer-overlay',
open: 'drawer-open',
close: 'drawer-close',
dropdown: 'drawer-dropdown'
},
iscroll: {
// Configuring the iScroll
// https://github.com/cubiq/iscroll#configuring-the-iscroll
mouseWheel: true,
preventDefault: false
},
showOverlay: true
});
</script>

メニューが開いた時、もしくは閉じた時に何か処理を行いたい場合は、以下のように処理を追加します。

<script>
$(document).ready(function() {
$('.drawer').drawer();
$('.drawer').on('drawer.opened', function(){ ここに処理を記述 });
$('.drawer').on('drawer.closed', function(){ ここに処理を記述 });
});
</script>

長いメニューが途中で切れてしまう場合

メニューが長くなって、画面からはみ出す部分が切れてしまう場合は、CSSに以下を追加します。

.drawer-nav {
overflow: scroll;
}

上記を追加することで、メニュー内でのスクロールが可能になります。

あとがき

簡単にハンバーガーボタンとスライド表示するメニューが実装できますね。

ハンバーガーメニューをサクッと導入したい場合は、ぜひDrawerの活用をご検討ください。

この記事が気に入ったら
いいね!してね♪

Twitter で
スポンサードリンク

関連記事

コメントを残す

メールアドレスが公開されることはありません。