【JS】ハンバーガーメニューの実装方法【CSS】サンプルコード付き

今回は「JavaScript」と「CSS」を使ったハンバーガーメニューの実装方法を紹介していきたいと思います。
Webサイトにハンバーガーメニューを実装したいと考えている方、よかったら覗いて見てください。

2021/12追記：一部ソースコードを修正いたしました！

ハンバーガーメニューの実装

今回は左上にあるハンバーガーメニューをタップすると、左側からナビメニューが出てくる仕組みでコードを組みます。

サンプルを用意したのでそちらをご覧ください。

ハンバーガーメニュー：サンプル

HTML、CSS、JavaScript、順に見ていきましょう。

HTML

HTMLはサクッと説明していきます。

ナビメニュー

ハンバーガーメニューの中に表示される、ナビメニューの骨組みです。

後でJSでID名を取得したいので、navタグにはidでクラス名を与えるのを忘れないようにしてください。

よくあるナビの構成ですね！サクッといきます！

<nav id="nav">
    <ul>
        <li><a href="#">SUMPLE1</a></li>
        <li><a href="#">SUMPLE2</a></li>
        <li><a href="#">SUMPLE3</a></li>
    </ul>
</nav>

ハンバーガーメニューのアイコン

よくあるハンバーガーメニューになる、横棒3本線を表現するための骨組みです。

今回はspanタグを使います。

ナビメニュー同様に、JSでID名を取得するためにspanタグを囲ったdivタグにクラス名を与えます。CSSで高さを設定するので、spanタグそれぞれにもクラス名を与えておきます。

<div id="hamburger">
    <!-- 1番上の線 -->
    <span class="inner_line" id="line1"></span>
    <!-- 真ん中の線 -->
    <span class="inner_line" id="line2"></span>
    <!-- 1番下の線 -->
    <span class="inner_line" id="line3"></span>
</div>

h1とh2に関しては特に説明することないので飛ばします。

次はCSSで装飾していきます。

CSS

まずはハンバーガーメニューが開く前の状態（閉じた状態）の画面をCSSで装飾していきます。

ページ全体とヘッダー部

ここら辺はさっくりと。

ページ全体とヘッダーの色を決め、ヘッダーの高さ・幅を指定し、ヘッダーを固定します。

* {
    margin: 0;
    padding: 0;
}
body {
    /*ページ全体の背景色*/
    background: #b4ada9;
}
header {
    /*ヘッダーを固定*/
    position: fixed;
    width: 100%;
    height: 90px;
    background: #000000;
}

ナビメニュー

ナビニューの装飾をしていきます。

widthでナビメニューの幅を決めて、left: -40%;を指定するおかげで、ナビメニューは左側に隠れた状態になります。この幅はお好みで変えてください。

#nav{
    position: absolute;
    top: 0;
    /*ナビメニューを左に隠した状態になる*/
    left: -40%;
    width: 40%;
    height: 100vh;
    background: #ffffff;
    /*０.7秒かけてナビメニューがスライドする*/
    transition: .7s;
}
#nav ul{
    padding-top: 80px;
}
#nav ul li{
    list-style-type: none;
    font-size: 20px;
}
#nav a{
    display: block;
    text-decoration: none;
    color: #000000;
    margin: 0 15px;
    padding: 10px;
    transition: .5s;
}
#nav li a:hover{
    color: #ffffff;
    background: #cd5c5c;
    border-bottom: none;
}

ハンバーガーメニューのアイコン

横棒3本線の設定をします！

親要素の#hamburgerでアイコンの位置と幅・高さを決めます。

#hamburger {
    display: block;
    position: absolute;
    top: 20px;
    left: 30px;
    width: 50px;
    height: 44px;
    cursor: pointer;
    transition: 1s;
}

線の縦幅・色などを指定していきます。

.inner_line {
    display: block;
    position: absolute;
    left: 0;
    width: 50px;
    height: 3px;
    background-color: #ffffff;
    transition: 1s;
    border-radius: 4px;
}

それぞれの線の位置を指定します。

これで横棒3本線の形になります。

#line1 {
    top: 0;
}
#line2 {
    top: 20px;
}
#line3 {
    bottom: 0px;
}

ハンバーガーメニューの動き

アイコンをクリックした時の動作のCSSを指定します。

クラス名を指定し、色や動きをお好みで指定してください。

.in{
    transform: translateX(100%);
  }
  .line_1,.line_2,.line_3{
    background: #000000;
  }
  .line_1 {
    /*-45度回転させる*/
    transform: rotate(-45deg);
    top: 0;
  }
  .line_2 {
    opacity: 0;
  }
  .line_3 {
    /*45度回転させる*/
    transform: rotate(45deg);
    bottom: 0;
  }

次はJSで動きをつけていきます。

JavaScript

hamburgerという関数を宣言します。

getElementByIdでHTML（document）からID名を取得し、CSSで指定した動きの動作のクラス名をclassList.toggleで与えます。

function hamburger() {
  document.getElementById('line1').classList.toggle('line_1');
  document.getElementById('line2').classList.toggle('line_2');
  document.getElementById('line3').classList.toggle('line_3');
  document.getElementById('nav').classList.toggle('in');
}
document.getElementById('hamburger').addEventListener('click' , function () {
  hamburger();
} );

getElementByIdでHTMLからIDhamburgerを取得し、addEventListenerでイベント処理を指定します。

ここで最初に宣言した関数hamburgerを呼び起こします。

これでアイコンをクリックしたら、ナビメニューが出てきたり閉じたりする動きがつきます！