【CSS】CSSだけで動くドロワーメニューPure Drawerの使い方
CSSだけで動くドロワーメニューの紹介です。
Pure Drawerです。
CSSを読み込むだけでドロワーメニューを使えます。動きは滑らかで、いくつか動きのパターンが用意されています。
導入
公式サイトのDownloadボタンよりファイル一式をダウンロードします。
Pure Drawer
公式サイトのメインビジュアルかっこいいですね。オーロラの写真かな。
読み込み
読み込むのはもちろんCSSだけです。
ダウンロードしたファイル内のdistフォルダの中にあるCSSフォルダを開きます。
圧縮版と非圧縮版がありますが、実際に読み込むのは圧縮された「pure-drawer.min.css」の方がいいと思います。
HTML
HTMLの構造は以下のようにします。
<!-- data-effectで動きの設定ができます。 --> <div class="pure-container" data-effect="pure-effect-scaleRotate"> <input type="checkbox" id="pure-toggle-left" class="pure-toggle" data-toggle="left"/> <label class="pure-toggle-label" for="pure-toggle-left" data-toggle-label="left"><span class="pure-toggle-icon"></span></label> <nav class="pure-drawer" data-position="left"> <ul> <!-- ここがドロワーメニュー --> <li>リスト1</li> <li>リスト2</li> <li>リスト3</li> <li>リスト4</li> <li>リスト5</li> <li>リスト6</li> <li>リスト7</li> <li>リスト8</li> <li>リスト9</li> <li>リスト10</li> <li>リスト11</li> <li>リスト12</li> <li>リスト13</li> <li>リスト14</li> <li>リスト15</li> </ul> </nav> <div class="pure-pusher-container"> <div class="pure-pusher"> <div class="inner"> <!-- ここがコンテンツ --> </div> </div> </div> <!-- ボタンの位置をleft,top,rightから選べます。 --> <label class="pure-overlay" for="pure-toggle-left" data-overlay="left"></label> </div>
Pure Drawerはいくつかドロワーが開いたり閉じたりするときのエフェクトが用意されています。
その設定はHTMLでやります。
上記サンプルコードの最初の行にあるこちらです。
<div class="pure-container" data-effect="pure-effect-scaleRotate">
上記のscaleRotateの部分を書き換えて設定します。
<div class="pure-container" data-effect="pure-effect-bounce"> <div class="pure-container" data-effect="pure-effect-fade"> <div class="pure-container" data-effect="pure-effect-fall"> <div class="pure-container" data-effect="pure-effect-flipX"> <div class="pure-container" data-effect="pure-effect-flipY"> <div class="pure-container" data-effect="pure-effect-push"> <div class="pure-container" data-effect="pure-effect-reveal"> <div class="pure-container" data-effect="pure-effect-reverseSlide"> <div class="pure-container" data-effect="pure-effect-scaleDown"> <div class="pure-container" data-effect="pure-effect-scaleRotate"> <div class="pure-container" data-effect="pure-effect-scaleUp"> <div class="pure-container" data-effect="pure-effect-slide"> <div class="pure-container" data-effect="pure-effect-slideAlong"> <div class="pure-container" data-effect="pure-effect-zoom">
これだけ種類があります!
動きのサンプルは公式サイトに準備されています。
また、ボタンの位置はサンプルコードの一番下で設定します。
<label class="pure-overlay" for="pure-toggle-left" data-overlay="left"></label>
left / right / topから選べます。
CSS
CSSについては使う分には特に何もしなくていいですが、色を変えたり少しカスタマイズ例を書いておきます。
ドロワーが出てくる速度
初期設定で500msが設定されています。
エディタで500msを検索して、好きな速度に一括置換するのが手っ取り早くて楽かなと思います。
ドロワーの背景色を変える
.pure-drawer { background-color: #243040; }
ハンバーガーボタンの囲いをなくす
.pure-toggle-label { border: none; }
ハンバーガーボタンの色を変える
通常時
.pure-toggle-label .pure-toggle-icon, .pure-toggle-label .pure-toggle-icon:before, .pure-toggle-label .pure-toggle-icon:after { background-color: #999; }
hover時
.pure-toggle-label:hover .pure-toggle-icon, .pure-toggle-label:hover .pure-toggle-icon:before, .pure-toggle-label:hover .pure-toggle-icon:after { background-color: #00bfff; }
さいごに
CSSで簡単にここまでできるのはすごいと思います。
ただ、やはりCSSだけだとちょっと要望もでてきます。たとえばドロワーメニューの箇所はスクロールしないです。つまり、メニューに書ける数が制限されてしまいます。数が決まっていて今後増えないと分かっているならいいですが。