エンジニアブログ

HOME > css > CSS + jQueryハンバーガメニュー実装方法

CSS + jQueryハンバーガメニュー実装方法

css
CSS + jQueryハンバーガメニュー実装方法

ハンバーガーメニューは、モバイルフレンドリーなウェブデザインの一環として、重要な要素となっています。

この記事では、CSSとjQueryを使用して、簡単かつ効果的にハンバーガーメニューを実装する方法に焦点を当てます。

先に解答例

See the Pen css+jquery hamburger-menu by hide (@hide225) on CodePen.

HTMLの構造を設定する

ハンバーガーメニューは、通常、スマートフォンやタブレットなどの小型デバイスでウェブサイトのナビゲーションを効果的にまとめるためのアイコンです。通常は三本の水平バーから成り、クリックまたはタップすることでメニューが表示されます。

ハンバーガーアイコンは大枠にmenu-iconクラスを付けそれぞれの水平バーにbarクラスを付けています。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="styles.css">
  <title>Hamburger Menu</title>
</head>
<body>

<header class="header">
  <div class="menu-icon" id="menuIcon">
    <span class="bar"></span>
    <span class="bar"></span>
    <span class="bar"></span>
  </div>
  <ul class="nav-list" id="navList">
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Services</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</header>

<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
<script src="script.js"></script>
</body>
</html>

スタイルを設定する

CSSの詳細には触れませんが、メニューの状態をクラスの付け外しで管理する為、
メニュー、アイコンそれぞれに.activeクラスを付与しています。

body {
  margin: 0;
  font-family: 'Arial', sans-serif;
  box-sizing: border-box;
}

.header {
  background-color: #333;
  padding: 15px;
  display: flex;
  align-items: center;
  height: 60px;
}

.menu-icon {
  cursor: pointer;
  display: none;
  position: fixed;
  height: 27px;
  width: 25px;
  top: 15px;
  left: 15px;
  z-index: 100;
}

.bar {
  background-color: #fff;
  height: 3px;
  width: 25px;
  position: absolute;
  transition: all ease 0.3s;
}

.bar:nth-child(1) {
  top: 0;
}

.bar:nth-child(2) {
  top: 50%;
  transform: translateY(-50%);
}

.bar:nth-child(3) {
  bottom: 0;
}

.bar:nth-child(1).active { // activeクラスがついているとき
  transform: translateY(-50%) rotate(45deg);
  top: 50%;
}

.bar:nth-child(2).active { // activeクラスがついているとき
  opacity: 0;
}

.bar:nth-child(3).active { // activeクラスがついているとき
  transform: translateY(-50%) rotate(-45deg);
  top: 50%;
}

.nav-list {
  list-style: none;
  display: flex;
  gap: 20px;
}

.nav-list a {
  text-decoration: none;
  color: #fff;
  font-weight: bold;
  transition: all ease .3s;
}

.nav-list a:hover {
  opacity: 0.6;
}

@media (max-width: 768px) {
  .header {
    height: 30px;
  }
  
  .menu-icon {
    display: flex;
  }

  .nav-list {
    display: none;
    flex-direction: column;
    position: absolute;
    top: 40px;
    left: 0;
    width: 100%;
    background-color: #333;
    padding: 15px;
  }

  .nav-list.active { // activeクラスがついているとき
    display: block;
  }

  .nav-list li {
    margin-right: 0;
    margin-bottom: 10px;
  }
}

これで、ハンバーガーメニューを実装する準備が整いました。
最後にjQueryを実装して終わりたいと思います。

jQueryの導入

jQueryを導入しましょう。
今回は下記CDNからjQueryを取得してHTMLファイルに組み込んでいきます。
</body>タグの手前に下記コードを貼り付けてください。

<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>

これでjQueryを使用する準備ができました。

メニューのトグル機能

toggleClassを使用することで、クラスの追加と削除を切り替えることができます。

$(document).ready(function () {
  $("#menuIcon").click(function () { // メニューアイコンクリック時
    $("#navList").toggleClass("active"); // .activeの付け外し
    $(".bar").toggleClass("active");
  });
});

これによりハンバーガーメニューの実装をすることができました。閲覧ありがとうございました。

\ シェアしてね！ /

関連記事