JSを使わずにCSSだけで作るドロワーメニュー

• Web Create
• 2016.10.05

ドロワーメニューまたはスライドメニュー

呼び方は様々ありますが、スマホのアプリ等でもお馴染みの、
横からスライドインしてくるメニューです。

レスポンシブでもよく使われます。

JSのプラグインだと、mmenuやDrawerなどがありますが、
現在ではCSS3もほとんどのブラウザで利用可能になりましたので、
簡単なものであればCSSでも実装可能です。

※IEでは9以降で動作します。

動作デモ

まずはデモを用意しました。実際に動かしてみてください。

See the Pen Gjygdy by leo (@leo-trym) on CodePen.

ソース

HTML

<label class="toggle" for="open"><i class="fa fa-bars" aria-hidden="true"></i>
</label>
<input id="open" type="checkbox">
<div id="menu">
  <nav>
    <ul>
      <li><a href="#">HOME</a></li>
      <li><a href="#">ABOUT</a></li>
      <li><a href="#">BLOG</a></li>
    </ul>
  </nav>
</div>

肝心なのは3〜4行目です。
inputのチェックボックスの次に、隠しておきたい要素（#menu）を置きます。

CSS

ul {
  margin: 0;
  padding-left: 0;
}

li {
  list-style: none;
}

a {
  text-decoration: none;
  color: #fff;
}

#menu {
  position: fixed;
  top: 0;
  right: -340px; /* メニューのwidth + padding */
  width: 300px; /* メニューのwidth */
  height: 100%;
  padding: 20px;
  transition: left .5s, right .5s; /* アニメーション */
  background-color: rgba(86, 86, 86, .7);
}

.toggle {
  font-size: 50px;
  cursor: pointer;
}

.toggle:hover {
  text-decoration: underline;
}

#open {
  display: none;
}

/* :checked 擬似クラスを使って、#openがチェック状態になった時に、#menuが「right: 0;」になります。 */
#open:checked + #menu {
  right: 0;
}

:checked + #menu をつかうことにより、チェックされたinputの次の要素を指定できます。

まとめ

メニュー内にスクロールが必要なときには、
nav内をスクロールするように指定すれば対応できます。

高機能なプラグインには敵いませんが、シンプルですので直ぐに実装できます。
なお、:checked を利用すれば同じ方法でアコーディオンなども実装可能です。

超簡単！ CSSだけで作る高さ可変なアコーディオン