ハンバーガーボタンとドロワーメニュー

13876 ワード
自分用メモ 自分用メモ テキストリンク

ハンバーガーメニュー仕組み

・HTML
・CSS
・javascript(jquery)

1．HTMLで「ハンバーガーアイコン」と「表示されるメニュー」を作成
2．JavaScript(jquery)でハンバーガーアイコンのクリックアクションを作成
3．2のクリックアクションでそれぞれのdivにclassを加えたり消したりする
4．3のclassの有無でdivのCSSが変化し、メニューの表示・非表示が行われる

1．ハンバーガー（三）ボタン
　　(三)ボタンを押すと(☓)ボタンに切り替わりメニューが表示される
2．閉じる（☓）ボタン
　　閉じるボタンを押すとメニューが非表示になり、(三)ボタンに切り替わる
3．メニュー部分（通常時非表示）(クリック時表示)
　　閉じるボタンを押すとメニュー部分が非表示になる

(例)ハンバーガーメニューの作り方(順番)

1．ハンバーガーメニューになる元を作る
2．ハンバーガーメニューの背景を作る(配置)
3．ボタン(三本線)を作る
4．クリックしたら閉じるボタン(☓)にする(切り替え)
5. メニューを表示・非表示にする
他にも作り方があり、このつくり方が正しいとは限らない。
※spanで作ったり、divやチェックボックス、a、buttonなどで作っているのを見かける。

1. ハンバーガーボタンのもとになるコード

<div class="humburger"><!--ハンバーガーボタン-->
      <span></span>
      <span></span>
      <span></span>
</div>

2．背景作る

.humburger {
background-color: beige;　/*分かりやすく色をbeigeに*/
position: fixed;　　　　　 /*今回は固定して作ってます*/
top: 10px;
right: 10px;
width: 40px;
height: 40px;
}

3．三本線を作る

.humburger span {
  width: 30px;
  height: 1px;
  background-color: #333;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: 0.3s; /*真ん中の線がゆっくり消えるように*/
}

.humburger span:nth-of-type(1) {
  transform: translate(-50%, -10px);
}

.humburger span:nth-of-type(3) {
  transform: translate(-50%, 9px);
}

4．クリックしたら☓ボタンになるように切り替え
　 真ん中の線を消して、上下の線を☓にする。　

.humburger.active span:nth-of-type(1) {
transform: rotate(45deg) translate(-50%, 0);
transform-origin: 0% 50%;
}

.humburger.active span:nth-of-type(2) {
    opacity: 0;
}

.humburger.active span:nth-of-type(3) {
transform: rotate(-45deg) translate(-50%, 0);
transform-origin: 0% 50%;
}

クリックしたらactiveを追加するようにする

 document.addEventListener('DOMContentLoaded', function() {
   document.getElementById("humburger").addEventListener("click", function() {
    this.classList.toggle("active")
   })
  });

5.メニューを表示・非表示にする
元になるメニュー作り、CSSで配置や色などを決める。

クリックしたら右からnavが表示され、もう一度クリックすると閉じるようにする。(ドロワーメニュ－みたいにする)

<nav id="nav">
   <ul>
          <li><a href="">menu0</a></li>
      <li><a href="">menu1</a></li>
      <li><a href="">menu2</a></li>
      <li><a href="">menu3</a></li>
      <li><a href="">menu4</a></li>
   </ul>
  </nav>

nav {
    position: fixed;
    top: 0px;
    right: -200px;
    width: 180px;
    height: 100%;
    padding: 40px 30px 0 0;
    opacity: 0;
    transition: 0.4s;
    visibility: hidden;
    background-color: #ddd;
    text-align: center; 
    z-index: -1;
}

nav.active {
    opacity: 1;
    visibility: visible;
    right: 0;
}

a {
    font-size: 2rem;
    color: black; 
}   

li {
    padding: 5px 0 10px 0;
    padding-top: 20px;
}

4で書いたjavascriptに(navのactiveを追加する)

document.addEventListener('DOMContentLoaded', function() {
   document.getElementById("humburger").addEventListener("click", function() {
    this.classList.toggle("active");
    document.getElementById("nav").classList.toggle("active");
   })
  });

今回記述したコードで作ったもの

(クリック前)　画像は拡大してます。
左の文字やボタンは気にしないでください。

(クリック後)