【Web制作に必須!!】モバイル対応のナビメニューの設置方法

こんにちは、SouDogです。

昨今、モバイル端末でウェブサイトにアクセスするのが一般的ですのでスマホに対応させるのはWeb制作において必要な作業ですのでその一環として、アイコンなどをタップしてナビメニューを表示させるjQueryを使ったハンバーガーメニューの設置について紹介していきます。

ハンバーガーメニューの設置
まとめ

ハンバーガーメニューの設置
まとめ

ハンバーガーメニューの設置

ハンバーガーメニューとは、ナビメニューを展開するためのアイコンが3本線で構成されており、それがハンバーガーに見えることからそう呼ばれています。

ここで紹介するハンバーガーメニューでは、この部分をタップすることで

クラス名「active」が追加され、フワッとナビメニューが表示される
クラス名「active」が追加され、3本線がアニメーションで×に変形する
×をタップするとクラス名「active」は外され、ナビメニューが消えて×から3本線へアニメーションで変形する。

といった動きをjQueryとアニメーションCSSで表現したものになります。

・ナビメニュー展開前

ハンバーガーのアイコンをタップ。

・ナビメニュー展開後

3本線が×になり、ナビメニューが展開される。

また、このハンバーガーメニューでは、メディアクエリを使うことで

スマホ表示の時はハンバーガーメニュー。
PC表示の時は横並びのナビメニュー。

といった感じで、「1つのナビメニューを切り替えて表示する」ものになります。

※当ブログはWordPressテーマ【cocoon】を使っており、cocoon設定にて行っております。

WordPressテーマ【cocoon】での設定方法はコチラへ

jQueryのライブラリを読み込む

今回はjQueryを使用するため、事前に<head>タグ内にjQueryのライブラリをCDN経由で読み込みます。

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

ナビメニューを設置する（HTML)

ナビメニューの要素をHTMLで設置します。

jQueryやCSSではクラス名が違うと適用されなくなるため、クラス名を変更する時は気を付けてください。

<!-- ハンバーガーメニューボタン部分 -->
<div class="hamburger">
    <span></span>
    <span></span>
    <span></span>
</div>

<!--ナビメニュー部分-->
<nav class="navi-sp">
    <ul class="navi01">
        <li><a href="#">メニュー1</a></li>
        <li><a href="#">メニュー2</a></li>
        <li><a href="#">メニュー3</a></li>
        <li><a href="#">メニュー4</a></li>
        <li><a href="#">メニュー5</a></li>
    </ul>
</nav>

スタイルを設定する（CSS）

ハンバーガーメニュー部分とナビメニューのスタイルをCSSで設定します。

この時にメディアクエリを使い、「画面幅が600pxまでの時はハンバーガーメニューで表示」「画面幅が601px以上の時は横並びのナビメニューとして表示」とすることで、画面幅でメニューの形を切り替えることができるようになります。

※モバイルファースト（スマホ画面から制作）する場合はメディアクエリの指定が変わるので注意してください。

/*PC表示のナビメニュー*/
nav.navi-sp {
  display: flex;
  justify-content: center;
  padding: 10px 0;
}

.navi01 {
  display: flex;
  justify-content: space-between;
  list-style: none;
  padding: 0;
}

.navi01 a {
  text-decoration: none;
  color: #333;
  padding: 5px 10px;
  margin: 0 10px;
  transition: 0.3s;
}

.navi01 a:hover {
  background: #ccc;
}


/* ハンバーガーメニューの設定 */
@media (max-width: 600px) {

  /*　ハンバーガーメニューボタン　*/
  .hamburger {
    display: block;
    position: fixed;
    z-index: 110;
    right: 15px;
    top: 17px;
    width: 42px;
    height: 42px;
    cursor: pointer;
    text-align: center;
    background: #fff;
    border-radius: 5px;
  }

  .hamburger span {
    display: block;
    position: absolute;
    width: 30px;
    height: 2px;
    left: 6px;
    background: #BBBBBB;
    transition: 0.3s ease-in-out;
  }

  .hamburger span:nth-child(1) {
    top: 10px;
  }

  .hamburger span:nth-child(2) {
    top: 20px;
  }

  .hamburger span:nth-child(3) {
    top: 30px;
  }

  /* ナビメニュー展開時のボタン */
  .hamburger.active span:nth-child(1) {
    top: 20px;
    left: 6px;
    background: #bbbbbb;
    transform: rotate(-45deg);
  }

  .hamburger.active span:nth-child(2),
  .hamburger.active span:nth-child(3) {
    top: 20px;
    background: #bbbbbb;
    transform: rotate(45deg);
  }

  /* メニュー展開時　*/
  nav.navi-sp {
    position: fixed;
    z-index: 100;
    top: 0;
    left: 0;
    color: #fff;
    background: rgba(0, 0, 0, 0.7);
    text-align: center;
    width: 100%;
    height: auto;
    opacity: 0;
    visibility: hidden;
    padding: 20px 0;
    transition: 0.3s;
  }

  nav.navi-sp ul {
    display: flex;
    margin: 0 auto;
    padding: 0;
    width: 100%;
    height: auto;
    flex-direction: column;
    justify-content: space-between;
  }

  nav.navi-sp ul li a {
    display: block;
    color: #fff;
    padding: 10px 0;
    margin: 5px 0;
    text-decoration: none;
  }



  /* クリックでナビメニュー開閉 */
  nav.navi-sp.active {
    opacity: 100;
    visibility: visible;
  }
}

ナビメニューのデザインは制作しているWebサイトに合わせて調整してください。

タップに合わせてクラス名「active」を付け外しする（jQuery）

jQueryのクリックイベントを使ってクラス名の付け外しを行うのが下記のコードになります。

このコードを</body>タグの手前に追加します。

<!--ハンバーガーメニュー-->
<script>
    $(function () {
    //メニューボタンのタップでメニューを開閉
    $('.hamburger').click(function () {
        $(this).toggleClass('active');
        $('.navi-sp').toggleClass('active', $(this).hasClass('active'));
    });
    //メニューのリンクタップでメニューを閉じる
    $('.navi-sp a').click(function () {
        $('.hamburger').removeClass('active');
        $('.navi-sp').removeClass('active');
    });

    // ページ内ジャンプのaタグがタップでメニューを閉じる
    $('a[href^="#"]').click(function () {
        $('.hamburger').removeClass('active');
        $('.navi-sp').removeClass('active');
    });
});
</script>

HTMLファイルに書く場合は<script>タグで囲み、.jsファイルに追加した場合はファイルの読み込みを忘れないようにしてください。