【自作・簡単】ドロアーをjQueryを使わないでCSSだけで簡単に自作する方法

コーディング
2019.11.09

jQueryの使い方はよくわからないけど、ドロアーやナビゲーションメニューをCSSだけで自作してみたいという方向けの記事になっています。

ドロアーとはどんなもの？

ドロアーとはどんなもの❓という方もいると思います🤔
htmlとcssだけで作った簡単なサンプルを触ってみるのが一番わかりやすいと思います。
下のサンプルの右にある三本線をクリックすると右からスゥーとメニューが飛び出てくると思います。これがドロアーと呼ばれるものです。ナビゲーションメニューと呼ばれることもあります。
ドロアーはスマホ向けのサイトによく利用されています。

👇HTMLとCSSだけで作ったドロアーのサンプルです
👇右の三本線をクリックすると動きます

See the Pen NWWzVON by 心@プログラミング勉強中 (@satoshiokahiro) on CodePen.

CSSだけでドロアー開け閉めをする方法

jQueryでドロアーを自作する場合はclickイベントとtoggleClassを使ってドロアーにクラスをつけたり外したりすることでドロアーの開け閉めを表現します。

jQueryを使わずにcssだけでドロアーを作る場合はチェックボックスを使ってチェックの有無によってドロアーの開け閉めを表現します。

CSSのみでドロアーを作る手順は以下の通りです。

1　チェックボックスを作る
2　チェックボックスは常に非表示にする
3　チェックボックを操作できる<label>を二つ作る
4　一つ目の<label>にハンバーガーメニュを作る
5　二つ目の<label>は画面全体に半透明の黒いレイヤーを作りドロアークローズ時は非表示にする
6　ドロアーの中身を作り transform: translateX(100%); で画面外に配置する
7　checked時の「ドロアーの動き」「ハンバーガーメニューの動き」「黒い半透明のレイヤーの動き」を作る

完成時のhtmlとCSSは以下の通りです。

<header>
     <h1 class="navbar_brand">
         Sample
     </h1>
     <div id="nav_drawer">
         <input type="checkbox" id="nav_input" class="nav_unshown">
         <label for="nav_input" id="nav_open">
             <span class="navbar_toggle_icon"></span>
             <span class="navbar_toggle_icon"></span>
             <span class="navbar_toggle_icon"></span>
         </label>
         <label for="nav_input" class="nav_unshown" id="nav_close"></label>
         <div id="nav_content">
             <div class="menu">
                 <ul>
                     <li><a href="#">Card</a></li>
                     <li><a href="#">News</a></li>
                     <li><a href="#">Price</a></li>
                     <li><a href="#">Access</a></li>
                     <li><a href="#">Contact</a></li>
                 </ul>
             </div>
         </div>
     </div>
 </header>
header {
  display: flex;
  justify-content: space-between;
  background-color: #3F51B5;
  height: 100px;
}

#nav_drawer {
  position: relative;
}

.nav_unshown {
  display: none;
}

#nav_open {
  margin: 18px 18px 0 0;
  display: inline-block;
  width: 28px;
  height: 22px;
  vertical-align: middle;
  cursor: pointer;
  transition: ease .5s;
}

.navbar_toggle_icon {
  position: relative;
  display: block;
  height: 4px;
  width: 28px;
  background: #FFFFFF;
  -webkit-transition: ease .5s;
  transition: ease .5s;
}

.navbar_toggle_icon:nth-child(1) {
  top: 0;
}

.navbar_toggle_icon:nth-child(2) {
  margin: 5px 0;
}

.navbar_toggle_icon:nth-child(3) {
  top: 0;
}

#nav_close {
  display: none;
  position: fixed;
  z-index: 99;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: black;
  opacity: 0;
  transition: ease .5s;
}

#nav_content {
  overflow: auto;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  width: 100%;
  height: 100%;
  background: #FFFFFF;
  transition: ease .5s;
  -webkit-transform: translateX(100%);
  transform: translateX(100%);
}

#nav_input:checked ~ #nav_close {
  display: block;
  opacity: 0.7;
}

#nav_input:checked ~ #nav_content {
  position: fixed;
  transform: translateX(calc(100% - 200px));
  box-shadow: 6px 0 25px rgba(0, 0, 0, 0.15);
}

#nav_input:checked ~ #nav_open {
  margin-right: 218px;
}

#nav_input:checked ~ #nav_open .navbar_toggle_icon {
  z-index: 100;
}

#nav_input:checked ~ #nav_open .navbar_toggle_icon:nth-child(1) {
  top: 8.6px;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}

#nav_input:checked ~ #nav_open .navbar_toggle_icon:nth-child(2) {
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  opacity: 0;
}

#nav_input:checked ~ #nav_open .navbar_toggle_icon:nth-child(3) {
  top: -8.6px;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

.navbar_brand {
  margin-top: 31px;
}

@media (max-width: 1028px) {
  .navbar_brand {
    margin-left: 16px;
  }
}

@media (max-width: 767px) {
  .navbar_brand {
    margin-top: 16px;
    width: 147px;
  }
}

.menu li {
  position: relative;
  font-size: 1.6rem;
  color: #707070;
  padding-top: 15px;
  padding-bottom: 14px;
  padding-left: 20px;
  border-bottom: 1px dotted #707070;
}

.menu li::before {
  position: absolute;
  left: 174px;
  content: url(../img/arrow-b.svg);
}

「checkboxを二つのlabelで操作すること」と、checkboxが有効なときに「ドロアー」と「ハンバーガーメニュー」と「半透明の黒いレイヤー」を変化せるということを理解できればドロアーの自作の難易度はそんなに高くないと思います。

チェックボックスを作り非表示にする

ここからはコードの解説です。

まずはHTMLでチェックボックスを作ります。ただ作ったチェックボックス自体は使わないのでcssで非表示にします。

<input type="checkbox" id="nav_input" class="nav_unshown">
.nav_unshown{
    display: none;
}

チェックボックスの操作ができるラベルをふたつ作る

チェックボックスを操作するためのラベルを二つ作ります。

一つはハンバーガーメニューと呼ばれる３本線のアイコンです。

もう一つはドロアーが開いたときにドロアー以外の部分を覆う半透明の黒いレイヤー部分です。

<input type="checkbox" id="nav_input" class="nav_unshown">
<label for="nav_input" id="nav_open"></label>
<label for="nav_input" class="nav_unshown" id="nav_close"></label>

一つ目の<label> ハンバーガーメニューを作る

ハンバーガーメニューはspanタグ3つで作ります。擬似要素で作る方法もありますがあくまでシンプルに作るためにspanタグ３つで作っています。

<input type="checkbox" id="nav_input" class="nav_unshown">
<label for="nav_input" id="nav_open">
   <span class="navbar_toggle_icon"></span>
   <span class="navbar_toggle_icon"></span>
   <span class="navbar_toggle_icon"></span>
</label>
<label for="nav_input" class="nav_unshown" id="nav_close"></label>
.navbar_toggle_icon {
    position: relative;
    display: block;
    height: 4px;
    width: 28px;
    background: #FFFFFF;
    -webkit-transition: ease .5s;
    transition: ease .5s;
    &:nth-child(1){
        top: 0;
    }
    &:nth-child(2){
        margin: 5px 0;
    }
    &:nth-child(3){
        top: 0;
    }
}

二つ目の<label> 黒い半透明のレイヤーを作る

画面全体を黒いレイヤーで覆います。しかし、ドロアーが閉じているときは必要がないので　display:none; で非表示にします。HTMLはとくに編集する必要はありません。二つ目の<label>にスタイルを当てていきます。

#nav_close{
    display: none;
    position: fixed;
    z-index: 99;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: black;
    opacity: 0;
    transition: .3s ease-in-out;
}

ドロアーの中身を作り transform: translateX(100%); で画面外に配置する

ドロアーの中身であるナビゲーションメニューを作ります。

<div id="nav_content">
  <div class="menu">
    <ul>
      <li><a href="#">Card</a></li>
      <li><a href="#">News</a></li>
      <li><a href="#">Price</a></li>
      <li><a href="#">Access</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </div>
</div>
#nav_content{
    overflow: auto;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999;
    width: 100%;
    height: 100%;
    background: $white;
    transition: .3s ease-in-out;
    -webkit-transform: translateX(100%);
    transform: translateX(100%);
}

#nav_inputにチェックがない時は transform: translateX(100%); でドロアーを画面の外で待機させます。

checked時の「ドロアーの動き」「ハンバーガーメニューの動き」「黒い半透明のレイヤーの動き」を作る

<label>部分をクリックしてcheckboxにチェックがついた時の動きは3つあります。

一つはドロアーが飛び出してくる動き
二つ目はハンバーガーメニューが❌になるうごき
三つ目はドロアー以外の部分に半透明の黒いレイヤーで覆う動きです。

この三つの動きをクリックするたびにオンオフを切り替えることでドロアーの動きが完成します。

ドロアーが飛び出してくる動きを作る

transform: transrateX(100%); で右端に隠れていたドロアーを内側に200px動かします。ここの数字を編集することでドロアーの幅を変えることができます。

//ドロアーオープン時
#nav_input:checked ~ #nav_content{
    position: fixed;
    -webkit-transform: translateX(calc (100% - 200px));
    transform: translateX(calc(100% - 200px));
    box-shadow: 6px 0 25px rgba(0,0,0,.15);
}

ハンバーガーメニューが❌になる動きを作る

ハンバーガーメニューの三本線のうち上と下の線をtransform: rotate(45deg);で45度傾けます。
綺麗なバッテンになるように位置を微調整します。
真ん中の線は opacity: 0; で非表示にします。

//ドロアーオープン時
#nav_input:checked ~ #nav_open{
    margin-right: 218px;
    .navbar_toggle_icon{
        z-index: 100;
        &:nth-child(1){
            top: 8.6px;
            -webkit-transform: rotate(45deg);
            transform: rotate(45deg);
        }
            &:nth-child(2){
            -webkit-transform: translateY(-50%);
            transform: translateY(-50%);
            opacity: 0;
        }
            &:nth-child(3){
            top: -8.6px;
            -webkit-transform: rotate(-45deg);
            transform: rotate(-45deg);
        }
    }
}

黒い半透明のレイヤーの動きをつくる

ドロアー以外の部分は半透明の黒いレイヤーで覆います。

//ドロアーオープン時
#nav_input:checked ~ #nav_close{
    display: block;
    opacity: 0.7;
}

以上で基本的なドロアーの動きをCSSだけで作ることができます。

参考記事
サルワカ　CSSだけで簡単！ハンバーガーメニューの作り方（スマホ対応）
わやずぶろぐ【Cocoon】記事内にソースコードを埋め込む方法【テンプレあり】
HPcode ドロワーやモーダルをCSSだけで実現する方法

コメント

  1. 【脱初心者】30Daysトライアル 2nd 最終課題の答え合わせ | ききみみ!! お得な情報 考察ブログ より:
    2019年11月24日 11:58 PM

    […] 【自作・簡単】ドロアーをjQueryを使わないでCSSだけで簡単に自作する方法 […]

    返信
タイトルとURLをコピーしました