ハンバーガーメニューが機能しない

前提

HTMLとCSS、JSでホームページを作っています。
サンプルサイトを見本にしてハンバーガーメニューを設置しましたが
メニューが出たままの状態で消えたり表示したりができません。
ハンバーガー自体はアクションします。

該当のソースコード

HTML
1<ul>
2	<li>
3		<ul class="drop-nav">
4			<li></li>
5			<li>
6				<div class="hamburger">
7					<span></span>
8					<span></span>
9					<span></span>
10				</div>
11			</li>
12		</ul>
13	</li>
14	<li>
15		<nav id="nav">
16			<nav class="globalMenu">
17				<ul>
18					<li><a href="#.html">トップページ</a></li>
19					<li>
20						<a href="service.html" class="nav02">商品紹介</a>
21					</li>
22					<li>
23						<a href="concept.html" class="nav03">商品へのこだわり</a>
24					</li>
25					<li>
26						<a href="topics.html" class="nav04">お知らせ</a>
27					</li>
28					<li>
29						<a href="company.html" class="nav05">会社紹介</a>
30					</li>
31					<li>
32						<a href="contact.html" class="nav06">お問い合わせ</a>
33					</li>
34				</ul>
35			</nav>
36		</nav>
37	</li>
38</ul>
39
40</footer>
41<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
42<script src="assets/js/script.js"></script>

CSS
1.drop-nav {
2  background-image: url(./assets/img/hamburger_bg.svg);
3  position: fixed;
4  width: 89px;
5  height: 127px;
6  top: -7px;
7  right: 20px;
8  z-index: 10;
9
10  /*　ハンバーガーボタン　*/
11  .hamburger {
12    display: block;
13    position: fixed;
14    z-index: 3;
15    right: 43px;
16    top: 50px;
17    width: 42px;
18    height: 42px;
19    cursor: pointer;
20    text-align: center;
21
22    span {
23      display: block;
24      position: absolute;
25      width: 30px;
26      height: 1px;
27      left: 6px;
28      background: #333;
29      transition: 0.3s ease-in-out;
30
31      &:nth-child(1) {
32        top: 10px;
33      }
34
35      &:nth-child(2) {
36        top: 20px;
37      }
38
39      &:nth-child(3) {
40        top: 30px;
41      }
42    }
43
44    /* ナビ開いてる時のボタン */
45    &.active {
46      span {
47        &:nth-child(1) {
48          top: 19px;
49          left: 6px;
50          transform: rotate(-45deg);
51        }
52
53        &:nth-child(2) {
54          top: 19px;
55          transform: rotate(45deg);
56        }
57
58        &:nth-child(3) {
59          top: 19px;
60          transform: rotate(45deg);
61        }
62      }
63    }
64  }
65
66  nav {
67    &.globalMenu {
68      position: fixed;
69      z-index: 2;
70      top: 0;
71      left: 0;
72      color: #000;
73      background: #fff;
74      text-align: center;
75      transform: translateY(-100%);
76      transition: all 0.6s;
77      width: 100%;
78      height: 100%;
79      overflow-y: scroll;
80      -webkit-overflow-scrolling: touch;
81
82      /* このクラスを、jQueryで付与・削除する */
83      &.active {
84        transform: translateY(0%);
85      }
86    }
87  }
88}

JavaScript
1$(function () {
2  $(".hamburger").click(function () {
3    $(this).toggleClass("active");
4
5    if ($(this).hasClass("active")) {
6      $(".globalMenu").addClass("active");
7    } else {
8      $(".globalMenu").removeClass("active");
9    }
10  });
11});
12
13$(function () {
14  var state = false;
15  var scrollpos;
16  $(".hamburger").on("click", function () {
17    $("this").toggleClass("open");
18    if (state == false) {
19      scrollpos = $(window).scrollTop();
20      $("body").addClass("is-fixed").css({ top: -scrollpos });
21      state = true;
22    } else {
23      $("body").removeClass("is-fixed").css({ top: 0 });
24      window.scrollTo(0, scrollpos);
25      state = false;
26    }
27  });
28});

行動規範の内容に同意します

回答1件

ベストアンサー

SCSSの階層構造がHTMLと合致していないです。
下記のように } の位置を変更すると、ハンバーガーのクリックで、ナビメニューが上から降りてきたり、上に移動して画面外に消えたりします。

SCSS
1.drop-nav {
2  background-image: url(./assets/img/hamburger_bg.svg);
3  position: fixed;
4  width: 89px;
5  height: 127px;
6  top: -7px;
7  right: 20px;
8  z-index: 10;
9
10  /*　ハンバーガーボタン　*/
11  .hamburger {
12    display: block;
13    position: fixed;
14    z-index: 3;
15    right: 43px;
16    top: 50px;
17    width: 42px;
18    height: 42px;
19    cursor: pointer;
20    text-align: center;
21
22    span {
23      display: block;
24      position: absolute;
25      width: 30px;
26      height: 1px;
27      left: 6px;
28      background: #333;
29      transition: 0.3s ease-in-out;
30
31      &:nth-child(1) {
32        top: 10px;
33      }
34
35      &:nth-child(2) {
36        top: 20px;
37      }
38
39      &:nth-child(3) {
40        top: 30px;
41      }
42    }
43
44    /* ナビ開いてる時のボタン */
45    &.active {
46      span {
47        &:nth-child(1) {
48          top: 19px;
49          left: 6px;
50          transform: rotate(-45deg);
51        }
52
53        &:nth-child(2) {
54          top: 19px;
55          transform: rotate(45deg);
56        }
57
58        &:nth-child(3) {
59          top: 19px;
60          transform: rotate(45deg);
61        }
62      }
63    }
64  }
65} //追加
66  nav {
67    &.globalMenu {
68      position: fixed;
69      z-index: 2;
70      top: 0;
71      left: 0;
72      color: #000;
73      background: #fff;
74      text-align: center;
75      transform: translateY(-100%);
76      transition: all 0.6s;
77      width: 100%;
78      height: 100%;
79      overflow-y: scroll;
80      -webkit-overflow-scrolling: touch;
81
82      /* このクラスを、jQueryで付与・削除する */
83      &.active {
84        transform: translateY(0%);
85      }
86    }
87  }
88// } 削除