HTML/CSSだけで作る！ハンバーガーメニュー！

作成:2018.09.19 02:00 更新:2020-05-23T09:30:09Z

こんにちは！きっしーです。

今日は、HTML/CSSをつかってハンバーガーメニューを作ってみます。

- ソースコード＆プレビュー
- ソースコードの解説
  - HTMLの解説
  - CSSの解説

ソースコード＆プレビュー

まずは、いつもの通りソースコードとプレビューからです。

ぬめっと動いていい感じです。

ソースコードの解説

HTMLの解説

まずはHTML側です。

HTML

  <div  id="nav-drawer">
    <input  type="checkbox"  id="nav-input"  class="nav-state">
     label  id="nav-opener"  for="nav-input"></label>
    <label  class="nav-background"  id="nav-closer"  for="nav-input"></label>
    <div  id="nav-content">
      <ul>
        <li>メニュー1</li>
        <li>メニュー2</li>
        <li>メニュー3</li>
      </ul>
    </div>
  </div>

ハンバーガーメニューも基本的な仕組みはアコーディオンメニューと一緒です。

非表示にしたチェックボックスをつくる
チェックボックスとfor属性で紐づけたラベルをつくる
メニュー表示中に、メニューの背後を暗くするための薄皮をつくる
表示させる中身のメニューをつくる

for属性をつかって、ラベルとチェックボックスと紐づけをすると、ラベルをクリックするとチェックボックスのオン／オフが切り替わるのは、アコーディオンメニューと一緒。

違うのは、メニューの背後を暗くするための薄皮を作るところと、薄皮とチェックボックスもfor属性で紐づけることろ。

このようにしておくと薄皮をクリックしてもチェックのオン／オフが切り替わります。

CSSの解説

次にCSS側です。

CSS

#nav-drawer {
  position: relative; 
  width:  80%; 
  background:  SkyBlue;  
}  

.nav-state { 
  display:none;  
}

.nav-background { 
  display:none;  
}

#nav-opener {
  display:  inline-block;
}
#nav-opener:before { 
  display: block; 
  position: absolute; 
  top:  0; 
  left:  0; 
  font-family:  "FontAwesome"; 
  content:  '\f0c9'; 
  cursor: pointer;  
}

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

#nav-content { 
  overflow:  auto; 
  position:  fixed; 
  top:  0; 
  left:  0; 
  z-index:  9999; 
  width:  90%; 
  max-width:  330px; 
  height:  100%; 
  background:  White; 
  transition:  .3s ease-in-out;  
  -webkit-transform: translateX(-105%); 
  transform: translateX(-105%);  
}

#nav-input:checked ~ #nav-closer { 
  display: block; 
  opacity:  .5;
}
#nav-input:checked ~ #nav-content {
  -webkit-transform: translateX(0%); 
  transform: translateX(0%); 
  box-shadow:  6px  0  25px rgba(0,0,0,.15);  
}

CSS側のポイントです。