JQueryでハンバーガーメニューを実装したい

Question

前提

WEBページのサンプルを作成しているとき、レスポンシブデザインで画面幅が狭くなったとき、JQueryでハンバーガーメニューを表示させる機能を実装しようとしたところうまく起動しなくて困っております。

実現したいこと-

• ハンバーガーメニューを実装する。

該当のソースコード

    <header class="fadein-first fadein-from-up">
      <div class="wrap">
        <img src="image/logo_green.png" class="link">
        <nav class="nav-01">
          <ul>
            <li class="link">News</li>
            <li class="link">About</li>
            <li class="link">Service</li>
            <li class="link">Recruit</li>
            <li class="link">Contact</li>
          </ul>
        </nav>
        <div class="hamburger">
          <span class="bar bar-top"></span>
          <span class="bar bar-middle"></span>
          <span class="bar bar-bottom"></span>
        </div>
      </div>
    </header>
    <nav class="nav-02">
      <ul>
        <li class="link">News</li>
        <li class="link">About</li>
        <li class="link">Service</li>
        <li class="link">Recruit</li>
        <li class="link">Contact</li>
      </ul>
    </nav>

@media (max-width: 768px) {

	.nav-01 {
		display: none;
	}

	.nav-02 {
		display: block;
		position: fixed;
		right: -40%;
		width: 40%;
		height: 100%;
		background-color: white;
		opacity: 0.8;
		padding: 7.5rem 2.5rem;
		z-index: 1;
		transition:0.7s;
		overflow-x: hidden;
	}

	.nav-02 ul{
		display: flex;
		flex-direction: column;
	}

	.nav-02 ul li {
		margin-bottom: 2.5rem;
		color: #2da690;
	}

	.nav-02-active {
		display: block;
		right: 0;
	}

	.hamburger {
		display: block;
		position: relative;
		width: 3rem;
		height: 3rem;
		z-index: 3;
	}

	.hamburger .bar{
		position: absolute;
		width: 2rem;
		height: 2px;
		display: block;
		background: #2da690;
		transition: 0.1s;
		box-sizing: border-box;
	}

	.hamburger .bar-top {
		top: 10px;
	}

	.hamburger .bar-middle {
		line-height: 1.5rem;
		top: 48%;
	}

	.hamburger .bar-bottom {
		bottom: 10px;
	}

	.hamburger.close .bar-top{
		transform: rotate(45deg);
		top: 48%;
	}
	.hamburger.close .bar-middle{
		display: none;
	}
	.hamburger.close .bar-bottom{
		transform: rotate(-45deg);
		bottom: 48%;
	}

'use strict';

$(function() {

	var scroll = 0;

   /*  メインビジュアルの切り替え */
    $('.img-wrap img:nth-child(n+2)').hide();
    setInterval(function() {
        $(".img-wrap img:first-child").fadeOut(2000);
        $(".img-wrap img:nth-child(2)").fadeIn(2000);
        $(".img-wrap img:first-child").appendTo(".img-wrap");
    }, 4000);

    /* フェードイン */
    /* メインビジュアル */
    $('.top p').addClass('fadein-active01');
    $('header').addClass('fadein-active02');

    /* メインビジュアル以下 */
    $(window).scroll(function () {
        $('.fadein-scroll').each(function(){
            var elemPos = $(this).offset().top,
                windowHeight = $(window).height();
				scroll = $(window).scrollTop();

            if (scroll > elemPos - windowHeight ) {
                $(this).addClass('fadein-active01');
            }

            if (scroll > elemPos + $(this).height() || scroll < elemPos - windowHeight) {
                $(this).removeClass('fadein-active01');
            }
        });
    });

    /* ハンバーガーメニュー */
    $('.hamburger').on('click',function() {
			 console.log("ok")
        $('.nav-02').toggleClass('nav-active');
        $(this).toggleClass('close');
    });

});

試したこと

まずハンバーガーメニューを動かすために記入したクリックアクションはエラーはでておらず動いているようです。
その後の記述、もしくは表示させる為のCSSに問題があるように思えるが何が間違えているのかわかりません。。
お分かりの方がいらっしゃいましたらご教示いただけたら幸いです。

Answer 1

JQueryのセレクタとCSSのセレクタが合致していないです。

JQueryでは$('.nav-02').toggleClass('nav-active');とnav-activeクラスの付加/除去をしているので、CSSは下記になります。

/*	.nav-02-active { これを削除して下記を挿入    */
	.nav-02.nav-active {
		display: block;
		right: 0;
	}

Comments

[datiko]

そういった仕様だったのですね、よく理解もせず使用していたのでとても勉強になりました。
ありがとうございます。