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

css 2020.03.27

ブログメインビジュアル

初めまして、2020年１月にフロントエンジニアとして入社した鬼頭です。

ただ今レスポンシブwebデザインについて勉強中です。
その中で、多くのスマートフォンサイトで使用されているハンバーガーメニューについて紹介していきたいと思います。

ハンバーガーメニューとは

ハンバーガーメニューとは3本の線が並んだアイコンのことで、三本の線がハンバーガーに見える事からこう呼ばれるようになったそうです。
スマートフォンはpcサイトに比べ、画面サイズが小さいため、表示させたいナビゲーションメニューが画面に収まらなくなってしまいますが、ハンバーガーメニューをタップすることで、コンテンツの表示エリアを大きく獲得できるので、多くのwebサイトで使用されています。
今回はハンバーガーメニューの実装していきたいと思います。

HTML

<header>
  <!-- 表示させるナビゲーション -->
  <div class="header-nav move" id="header_nav">
    <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
      <li>5</li>
    </ul>
  </div>
  <!-- メニューボタン -->
  <a class="menu-btn" id="menu_btn" href="">
    <span class="line"></span>
  </a>
</header>

css

メニューボタンを押した時に、バツ印に変更したいので、
バツ印のスタイルをactiveクラスにてあらかじめ用意しておきます。

*{
  margin: 0;
  padding: 0;
}

header {
  height: 60px;
  background-color: rgb(151, 192, 230);
  position: relative;
  border-bottom: 0.5px solid rgb(184, 184, 185);
}

.header-nav {
  width: 100%;
  height: 100vh;
  position: absolute;
  left: 0;
  top: 60px;
  background-color: rgb(210, 226, 236);
  transition: .6s;
  z-index: -1;
}

/* ナビゲーションの非表示にさせておく */
.move {
  top: -100vh;
}

.header-nav li {
  margin: 30px auto 0;
  background-color: rgb(30, 134, 194);
  text-align: center;
  list-style: none;
  height: 30px;
  line-height: 30px;
  width: 50%;
  color: #fff;
}

.menu-btn {
  display: block;
  position: absolute;
  right: 0;
  top: 0;
  width: 62px;
  height:60px;
  text-align: center;
}

.menu-btn::before {
  content: '';
  display: block;
  width: 22px;
  height: 2px;
  background: #716767;
  position: absolute;
  top: 30px;
  right: 19px;
  transition:all .3s;
}

.menu-btn::after {
  content: '';
  display: block;
  width: 22px;
  height: 2px;
  background: #716767;
  position: absolute;
  top: 30px;
  right: 19px;
  transition:all .3s;
}

.menu-btn span {
  display: block;
  width: 22px;
  height: 2px;
  background: #716767;
  position: absolute;
  top: 30px;
  right: 19px;
  transition:all .3s;
}

.menu-btn::before {
  margin-top: 8px;
}

.menu-btn::after {
  margin-top: -8px;
}

/* バツ印のスタイル */
.menu-btn.active::before {
  transform: translateY(-8px) rotate(-45deg);
}

.menu-btn.active span {
  opacity: 0;
}

.menu-btn.active::after {
  transform: translateY(8px) rotate(45deg);
}

JS

//メニューボタン
let menuBtn = document.getElementById('menu_btn');
//ナビゲーション
let headerNav = document.getElementById('header_nav');

//メニューボタンクリック時に
menuBtn.addEventListener('click', function(e){
  e.preventDefault();
//メニューボタンがactiveクラスを所持してたら削除・所持していなければ追加
  menuBtn.classList.toggle('active');
//ナビゲーションがmoveクラスを所持してたら削除・所持していなければ追加
  headerNav.classList.toggle('move');
});

メニューボタンクリック時にナビゲーションが表示されるようになりました。

まとめ

ハンバーガーメニューはメリットも多いですが、ナビゲーションの内容が分からないなど、ユーザビリティの低下につながる場合があります。サイトの特徴や状況に応じて使い分けていけるといきたいですね。
至らないところもありますが、少しでも参考になれば幸いです。
最後までお読みいただきありがとうございました!

この記事を書いた人 kito エンジニアになるために愛知から上京しました。

TOP