ぶろぐらまー

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>

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

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

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側のポイントです。

  1. チェックボックスは常に非表示する
  2. メニューは通常は画面の左外側に隠しておく
  3. 薄皮は通常は非表示にする
  4. チェックがオンの時にメニューを移動する
  5. チェックがオンの時に薄皮を表示する

アコーディオンメニューの記事では高さを変更することで、 ぬめっと表示されるメニューを表現していました。

この記事のアコーディオンメニューでは、左画面の外側にメニューを隠しておき、 transrateXプロパティを使って、左からにょろりと表示させるメニューを表現しています。

最後まで読んでいただきありがとうございます。
また読んでくださいませ。
そんじゃーね。

SPONSORED LINK
SPONSORED LINK