コピペで簡単!js使わずCSSのみでドロワーメニューを実装する方法

今回はjQueryなどのJavascriptライブラリを使わずCSSのみでハンバーガーアイコン付きドロワーメニューを実装する方法を解説します。
コピペで簡単に設置できますので、ぜひ試して下さい。

表示サンプル

画面右側にトグル用ボタンが配置されており、タップすると左側からドロワーメニューが表示されます。

左側からメニューが表示され、背景の部分か❌マークをクリックすると、メニューが閉じます。

ハンバーガーメニュー「≡」のアイコン部分はFontAwsomeのアイコンフォントを使用していますので、FontAwsomeのCSSを読み込ませる必要があります。

ライトプラン 詳細はこちら

動作サンプルページはこちら

FontAwsome5をCSSで扱う方法

まずは、以下サイトにてFontAwsome5のCDN用URLを取得します。
FontAwsome5はFreeであればライセンス費用無料で使用できます。
https://origin.fontawesome.com/

上の「Start」ボタンを押し、URLをコピーします。

使いたいアイコンを探し、Unicodeをコピーします。

CSSでFontファミリーの指定と、Content部分でUnicodeを指定します。

FontAwsome4とfont-familyの指定方法が違うのでご注意ください。

.hoge:before {
  font-family: 'Font Awesome 5 Free';
  content: "\f14a";
  font-weight: 900;
}

HTML

ドロワーメニューを実装するためのHTMLです。
labelの要素をクリックすることで、input要素のcheckboxが入力されているかどうかで、
ドロワーの開閉を制御する仕組みになっています。

<div class="content">
  <header class="header">
    <h1 class="heading-h1">ドロワーメニューをjQuery使わずCSSのみで実装する方法</h1>
    <input type="checkbox" id="togglenav">
    <label for="togglenav" class="togglenav-btn"></label>
    <label for="togglenav" class="togglenav-bg"></label>
    <nav class="drawer">
      <ul class="drawer-menu">
        <li class="drawer-menu-item">
          <a href="#article1">content1</a>
        </li>
        <li class="drawer-menu-item">
          <a href="#article2">content2</a>
        </li>
        <li class="drawer-menu-item">
          <a href="#article3">content3</a>
        </li>
        <li class="drawer-menu-item">
          <a href="#article4">content4</a>
        </li>
        <li class="drawer-menu-item">
          <a href="#article5">content5</a>
        </li>
      </ul>
    </nav>
  </header>
  <section>
    <p>本文エリア</p>
    <p>Phasellus vel felis purus. Aliquam consequat pellentesque dui, non mollis erat dictum sit amet. Curabitur non quam dictum, consectetur arcu in, vehicula justo. Donec tortor massa, eleifend nec viverra in, aliquet at eros. Mauris laoreet condimentum mauris, non tempor massa fermentum ut. Integer gravida pharetra cursus. Nunc in suscipit nunc.</p>
  </section>
</div>

CSS

CSSの役割は以下のように分類されています。

/* トグルボタン */
ハンバーガーメニュー「≡」部分の装飾

/* ドロワーメニュー */
左から表示されるメニューの装飾

/* トグルを押した際の背景 */
本文の上にオーバーレイされる背景のCSS

@charset "UTF-8";
/* トグルボタン */
#togglenav {
  display: none; }
  #togglenav:checked + .togglenav-btn {
    background-color: #495057; }
  #togglenav:checked + .togglenav-btn:before {
    font-family: 'Font Awesome 5 Free';
    content: "\f00d";
    font-weight: 900;
    font-size: 2em; }
  #togglenav:checked ~ .togglenav-bg {
    pointer-events: auto;
    background-color: rgba(0, 0, 0, 0.3); }

.togglenav-btn {
  cursor: pointer;
  position: fixed;
  top: 10px;
  right: 10px;
  z-index: 2;
  width: 50px;
  height: 50px;
  color: #fff;
  background-color: #28A7E1;
  line-height: 50px;
  text-align: center;
  -webkit-transition: background-color .6s, -webkit-transform .6s;
  transition: background-color .6s, transform .6s; }
  .togglenav-btn:before {
    font-family: 'Font Awesome 5 Free';
    content: "\f0c9";
    font-weight: 900;
    font-size: 2em; }

/* トグルを押した際の背景 */
.togglenav-bg {
  cursor: pointer;
  position: fixed;
  top: 0px;
  right: 0px;
  pointer-events: none;
  z-index: 1;
  width: 100%;
  height: 100%;
  transition: background-color .6s; }

/* ドロワーメニュー */
.drawer {
  z-index: 1;
  position: fixed;
  top: 0;
  left: 0;
  width: 300px;
  height: 100%;
  background-color: white;
  -webkit-transform: translateX(-100%);
  transform: translateX(-100%);
  -webkit-transition: -webkit-transform .4s;
  transition: transform .4s; }
  .drawer .drawer-menu {
    padding: 0;
    list-style-type: none; }
    .drawer .drawer-menu .drawer-menu-item {
      font-size: 14px; }
      .drawer .drawer-menu .drawer-menu-item a {
        display: block;
        padding: 1em 2em;
        text-decoration: none;
        transition: background-color 0.4s;
        cursor: pointer;
        color: #333; }
        .drawer .drawer-menu .drawer-menu-item a:hover {
          background-color: #eee;
          color: #666; }
        .drawer .drawer-menu .drawer-menu-item a:before {
          font-family: 'Font Awesome 5 Free';
          content: "\f105";
          font-weight: 900;
          font-size: 1em;
          margin: 0 0.5em 0 0; }

#togglenav:checked ~ .drawer {
  -webkit-transform: translateX(0);
  transform: translateX(0); }

/*その他
---------------------------------------------------------------------------*/
.u-mb-20 {
  margin: 0 0 20px 0; }

.content {
  max-width: 800px;
  margin: 40px auto;
  padding: 10px; }

.heading-h1 {
  font-weight: boder;
  font-size: 20px;
  margin: 0 0 20px 0;
  color: #28A7E1; }

まとめ

javascriptを使わなくてもHTMLとCSSのみで実装できるので、ぜひお試しください。

ライトプラン 詳細はこちら

動作サンプルページはこちら

この記事が気に入ったら
いいね ! しよう