ニュルンベルクとでてくるんじゃよ。
よくある頼もしい味方。ドロワーメニュー。こいつを楽ちんに実装できるプラグインのお話になります。
必要なものリスト
- drawer.js
- iscroll.js
- drawer.css
上記3つです。
CDNが用意されているので、CDN使って楽チンしてもいいですし、パッケージDLから自サイト組み込みでもお好きな方をお選びください。
<!-- jQueryは省略! --> <!-- drawer.css --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/drawer/3.2.0/css/drawer.min.css"> <!-- jquery & iScroll --> <script src="https://cdnjs.cloudflare.com/ajax/libs/iScroll/5.1.3/iscroll.min.js"></script> <!-- drawer.js --> <script src="https://cdnjs.cloudflare.com/ajax/libs/drawer/3.2.0/js/drawer.min.js"></script>
DLして設置したのん!動かしたいのね!!!
マークアップ編
そいではいつもどおり公式のソースを丸パクリしますね。うぇひひ
<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>
色々デフォルトで使う場合はクラスや属性はそのまま流用するのが良いでしょう。
で、ここで注意点。bodyの所に赤字でなんやら指定されていますが、これがないと動きません。
はーーー!?いっこいっこclass追記すんのめんどくさいんですけどぉ!!!!
大丈夫です。わざわざモタモタ追加する必要はないです。JSにやらせればええのです。
カカッと動的にな!
JavaScript編
まずは一番簡単なパターンを
if($('.drawer').length > 0){
if($('body').hasClass('drawer') == FALSE){
$('body').addClass('drawer drawer--right');
}
$('.drawer').drawer();
}
実行だけなら赤字の所だけでよいのですが
イチイチbodyに書いていくのめんどくさい人用にコネコネしてます。
らくちんらくちん。
オプション
このプラグインも色々なオプションが用意されていたりします。
ではまずオプションですが、正直な所結構がしがしやり変えたい時にしか使わないものなので
パス
メソッド系の説明だけにします。
// 開いた時に実行 $('.drawer').on('drawer.opened', function(){}); // 閉じた時に実行 $('.drawer').on('drawer.closed', function(){}); // ひらく $('.drawer').drawer('open'); // とじる $('.drawer').drawer('close'); // とぐる $('.drawer').drawer('toggle'); // ですとろい $('.drawer').drawer('destroy');
案外すくない。
callback系の2つを除いた4つに関しては、イベントバインド後に実行したりなど使えたりしますので
ロードして自動的に開きたいなぁみたいな時に(あるのかしらねぇですが)便利っすね
ドロワーの出現方法
さてさて、ドロワーメニューですが、出現位置もサクッと指定することができます。
<!-- 右からのメニュー --> <body class="drawer drawer--right"> <!-- 左からのメニュー --> <body class="drawer drawer--left"> <!-- 上からのメニュー --> <body class="drawer drawer--top">
上からの表示の場合、初期値CSSで少し工夫する必要がありそうですね。