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だけだとちょっと要望もでてきます。たとえばドロワーメニューの箇所はスクロールしないです。つまり、メニューに書ける数が制限されてしまいます。数が決まっていて今後増えないと分かっているならいいですが。

Tweet
このエントリーをはてなブックマークに追加
Pocket