javascriptでハンバーガーメニューを作成する方法

スマホでWEBサイトを閲覧していると、下記のような三本線を見かけることが多いですよね。

これはハンバーガーメニューと言われるもので、タップするとWEBサイトのメニューが開きます。今回はこのハンバーガーメニューをjavascriptで実装する方法を解説します。

ハンバーガーメニューを実装できるコード

ハンバーガーメニューを実装できるコードは下記のとおりです。

▢HTML

<header>
        <div class="header_content">
            <button type="button" class="btn">
                <span class="btn-line"></span>
            </button>
            <nav class="hum_menu">
                <div class="menu_title">MENU</div>
                <ul>
                    <li>ホーム</li>
                    <li>会社情報</li>
                    <li>企業ブログ</li>
                    <li>問い合わせ</li>
                </ul>
            </nav>

            <nav class="nav_header_menu">
                <ul class="header_menu">
                    <li>ホーム</li>
                    <li>会社情報</li>
                    <li>企業ブログ</li>
                    <li>問い合わせ</li>
                </ul>
            </nav>
        </div>
    </header>
        <section class="main_content_box">
            <div class="main_content">
            </div>
            <div class="main_content">
            </div>
            <div class="main_content">
            </div>
            <div class="main_content">
            </div>
            <div class="main_content">
            </div>
            <div class="main_content">
            </div>
            <div class="main_content">
            </div>
        </section>

▢CSS

* {
  margin: 0px;
  padding: 0px;
}

.scroll_restrict {
  overflow: hidden;
}

header {
  height: 60px;
  width: 100%;
  background-color: #ffffff;
}

header .header_content {
  width: 100%;
  height: 60px;
  position: relative;
}

header .header_content .btn {
  position: fixed;
  top: 5px;
  right: 5px;
  z-index: 30;
  width: 64px;
  height: 64px;
  background: #ffffff;
  border-radius: 50%;
  border-color: #000000;
  cursor: pointer;
  display: none;
}

header .header_content .btn .btn-line {
  display: block;
  position: relative;
  width: 50%;
  height: 3px;
  margin: 0 auto;
  background-color: #000000;
}

header .header_content .btn .btn-line.open {
  background-color: transparent;
}

header .header_content .btn .btn-line::before {
  content: "";
  position: absolute;
  right: 0px;
  top: -12px;
  left: 0px;
  bottom: 0px;
  width: 100%;
  height: 100%;
  background-color: #000000;
  -webkit-transition: .5s;
  transition: .5s;
}

header .header_content .btn .btn-line::after {
  content: "";
  position: absolute;
  right: 0px;
  top: 12px;
  left: 0px;
  bottom: 0px;
  width: 100%;
  height: 100%;
  background-color: #000000;
  -webkit-transition: .5s;
  transition: .5s;
}

header .header_content .btn .btn-line.open::before {
  top: 0px;
  -webkit-transform: rotate(-45deg);
          transform: rotate(-45deg);
}

header .header_content .btn .btn-line.open::after {
  top: 0px;
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
}

header .header_content .hum_menu {
  width: 80%;
  position: fixed;
  display: none;
  top: 0px;
  right: 0px;
  z-index: 20;
  -webkit-transform: translateX(100%);
          transform: translateX(100%);
  -webkit-transition: 0.5s;
  transition: 0.5s;
}

header .header_content .hum_menu .menu_title {
  background-color: #aad2ee;
  height: 40px;
  line-height: 40px;
  padding-left: 20px;
  font-size: 20px;
}

header .header_content .hum_menu ul {
  list-style: none;
  background-color: #ffffff;
  height: 100vh;
  padding-left: 20px;
  padding-top: 10px;
}

header .header_content .hum_menu ul li {
  margin-bottom: 10px;
  border-bottom: solid 1px black;
  padding-bottom: 5px;
  cursor: pointer;
}

header .header_content .open {
  -webkit-transform: translateX(0);
          transform: translateX(0);
}

header .header_content .nav_header_menu .header_menu {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  list-style: none;
  margin-right: 40px;
}

header .header_content .nav_header_menu .header_menu li {
  margin-left: 40px;
  line-height: 60px;
}

.main_content_box {
  background-color: #f8f8f8;
  padding-top: 40px;
}

.main_content_box .main_content {
  width: 90%;
  height: 400px;
  margin: 0 auto;
  margin-top: 40px;
  background-color: #97f9d8;
}

@media screen and (min-width: 0px) and (max-width: 599px) {
  header .header_content .btn {
    display: block;
  }
  header .header_content .hum_menu {
    display: block;
  }
  header .header_content .nav_header_menu {
    display: none;
  }
}

▢JS

 const hummenu = document.querySelector(".hum_menu")
        const button = document.querySelector(".btn")
        const btnline = document.querySelector(".btn-line")
        const body = document.body

        button.addEventListener("click", () => {
            hummenu.classList.toggle("open")
            btnline.classList.toggle("open")
            body.classList.toggle("scroll_restrict")
        })

詳しい実装方法については下記にて詳しく解説します。

CSSでメニューを隠す

.hum_menu {
transform: translateX(100%);
}

画面を開いた状態ではメニューが表示されていない状態なので、transform: translateX(100%);で画面に表示させないようにします。

.open {
transform: translateX(0);
}

そしてメニューが表示されていない状態を打ち消すopenクラスも作成しておきます。このopenクラスを付け外しで、ハンバーガーメニューの表示・非表示が実装できます。

ボタンを作成する

メニューを表示するためのボタンの作成をします。

▢HTML

<button type="button" class="btn">
   <span class="btn-line"></span>
</button>

▢CSS

.btn {
  position: fixed;
  top: 5px;
  right: 5px;
  z-index: 30;
  width: 64px;
  height: 64px;
  background: #ffffff;
  border-radius: 50%;
  border-color: #000000;
  cursor: pointer;
  display: none;
}
 
.btn-line {
  display: block;
  position: relative;
  width: 50%;
  height: 3px;
  margin: 0 auto;
  background-color: #000000;
}

今回は三本線のボタンを作成しています。真ん中の2番目の線を.btn-lineで作成します。そして1本目と3本目に関しては下記のように.btn-lineの疑似クラスで作成しています。

header .header_content .btn .btn-line::before {
  content: "";
  position: absolute;
  right: 0px;
  top: -12px;
  left: 0px;
  bottom: 0px;
  width: 100%;
  height: 100%;
  background-color: #000000;
  transition: .5s;
}
 
header .header_content .btn .btn-line::after {
  content: "";
  position: absolute;
  right: 0px;
  top: 12px;
  left: 0px;
  bottom: 0px;
  width: 100%;
  height: 100%;
  background-color: #000000;
  transition: .5s;
}

javascriptでクラスの付け外しをする

ではjavascriptでさきほど書いたopenクラスの付け外しをしましょう。

const hummenu = document.querySelector(".hum_menu")
const button = document.querySelector(".btn")
 
button.addEventListener("click", () => {
  hummenu.classList.toggle("open")
})

addEventListenerでclickを指定するとクリックイベントが作れます。そしてtoggle(“open”)により、openクラスの付け外しを実行しています。これで最低限のハンバーガーメニューが完成しました。

アニメーションをつける

最低限のハンバーガーメニューはできたので、動きをつけていきましょう。

メニューの表示、非表示に動きをつける

.hum_menu {
transition: 0.5s;
}

transitionを設定することで、ハンバーガーメニューを表示、非表示する際に動きがつけられます。

ボタンを切り替える

今回はメニューが開いている際には「×」マーク、メニューが閉じている際には「三」マークが表示されるように設定しています。

 const hummenu = document.querySelector(".hum_menu")
 const button = document.querySelector(".btn")
 const btnline = document.querySelector(".btn-line")
 
 button.addEventListener("click", () => {
 hummenu.classList.toggle("open")
 btnline.classList.toggle("open")     
 })

上記のように.btn-lineにオープンクラスを付与することで「×」マークと「三」マークの切り替えができるようにしています。

.btn-line.open::before {
  top: 0px;
　transform: rotate(-45deg);
}
 
.btn-line.open::after {
  top: 0px;
　transform: rotate(45deg);
}
 
.btn-line.open {
  background-color: transparent;
}

openクラスが付与された疑似クラスを「top: 0px;」で真ん中の線の位置に移動。次にtransform: rotateで1本目の線と3本目の線を斜めに傾けます。

そして真ん中の線である「.btn-line.open」を「background-color: transparent;」
で透明にして画面に映さないようにすると「×」マークが表示されるようになります。

 .btn-line::before {
    transition      : .5s;
 }
 
 .btn-line::after {
    transition      : .5s;
  }

なお.btn-lineにもtransitionを設定すると、ボタンの切り替えにもアニメーションがつけられます。

スクロールを防止する

メニューが開いた際に、スクロールを防止する方法も紹介します。

.scroll_restrict {
overflow: hidden;
}

overflow: hidden;を設定すれば、スクロールされなくなります。

const body = document.body
button.addEventListener("click", () => {
body.classList.toggle("scroll_restrict")
})

bodyにクラスを付け外しすることで、メニューの下にあるコンテンツはスクロールされなくなります。

GIV株式会社は、埼玉県川越市にあるWEB（ホームページ）制作会社です。お困りごと、ご相談、お気軽にご連絡ください。お問い合わせは、こちらから。