モバイルメニュー開閉が思うように動きません

モバイルメニュー開閉のコードを作成しました。
動かしてみると以下3点が思うように動かず、直せないでいます。
よろしければどこが間違っているのか教えて頂きたいです。
よろしくお願いします。

①タイトルやテキストの文章がスムーズに消えない。(消える間際にかくつく)

②MenuとMenuの間にテキストの文章が見えている。

③mobileMenuの枠線内でクリックしてもmobileMenuが閉じてしまう。
(layerの子要素なのでlayerの上に乗っておりクリックイベントに反応しないと思うのですが)

html
1<!DOCTYPE html>
2<html lang="ja">
3  <head>
4    <meta charset="UTF-8" />
5    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
6    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
7    <title>Document</title>
8    <link rel="stylesheet" href="style.css" />
9  </head>
10  <body>
11    <header>
12      <div class="header__wrapper">
13        <h1 class="logo">
14          <a class="logo__link" href="#">タイトル</a>
15        </h1>
16        <div id="humberger"><span></span><span></span><span></span></div>
17        <div id="layer">
18          <div class="mobileMenu">
19            <ul class="mobileMenu__main">
20              <li class="mobileMenu__list">
21                <a href="#" class="mobileMenu__link">Menu</a>
22              </li>
23              <li class="mobileMenu__list">
24                <a href="#" class="mobileMenu__link">Menu</a>
25              </li>
26              <li class="mobileMenu__list">
27                <a href="#" class="mobileMenu__link">Menu</a>
28              </li>
29            </ul>
30          </div>
31        </div>
32      </div>
33    </header>
34    <main class="main">
35      <div class="main__wrapper">
36        <p>
37          テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
38        </p>
39        <p>
40          テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
41        </p>
42      </div>
43    </main>
44    <script src="main.js"></script>
45  </body>
46</html>
47

css
1:root {
2  font-size: 62.5%;
3}
4
5* {
6  -webkit-box-sizing: border-box;
7          box-sizing: border-box;
8  margin: 0;
9  padding: 0;
10}
11
12a {
13  color: inherit;
14  text-decoration: none;
15}
16
17ul {
18  list-style-type: none;
19}
20
21.logo {
22  position: relative;
23  z-index: 1;
24}
25
26.logo__link {
27  display: block;
28  font-size: 2.2rem;
29}
30
31.header__wrapper {
32  display: -webkit-box;
33  display: -ms-flexbox;
34  display: flex;
35  -webkit-box-pack: justify;
36      -ms-flex-pack: justify;
37          justify-content: space-between;
38  -webkit-box-align: center;
39      -ms-flex-align: center;
40          align-items: center;
41  padding: 15px;
42}
43
44#humberger {
45  position: relative;
46  z-index: 10;
47}
48
49#humberger.open span:nth-child(1) {
50  -webkit-transform: translateY(8px) rotate(45deg);
51          transform: translateY(8px) rotate(45deg);
52}
53
54#humberger.open span:nth-child(2) {
55  -webkit-transform: scaleX(0);
56          transform: scaleX(0);
57}
58
59#humberger.open span:nth-child(3) {
60  -webkit-transform: translateY(-8px) rotate(-45deg);
61          transform: translateY(-8px) rotate(-45deg);
62}
63
64#humberger:hover {
65  cursor: pointer;
66}
67
68#humberger span {
69  display: block;
70  width: 25px;
71  height: 3px;
72  background-color: black;
73  -webkit-transition: all 0.2s;
74  transition: all 0.2s;
75}
76
77#humberger span + span {
78  margin-top: 5px;
79}
80
81#layer {
82  position: fixed;
83  top: 0;
84  left: 0;
85  right: 0;
86  bottom: 0;
87  z-index: auto;
88  -webkit-transition: all 0.5s;
89  transition: all 0.5s;
90  pointer-events: none;
91  background-color: white;
92  opacity: 0;
93}
94
95#layer.open {
96  opacity: 0.8;
97  z-index: 5;
98  pointer-events: auto;
99}
100
101.mobileMenu {
102  position: relative;
103  top: 50%;
104  -webkit-transform: translateY(-50%);
105          transform: translateY(-50%);
106  text-align: center;
107  outline: 2px solid black;
108}
109
110#layer .mobileMenu__list {
111  opacity: 0;
112  -webkit-transform: translateY(50px);
113          transform: translateY(50px);
114  -webkit-transition: all 0.5s;
115  transition: all 0.5s;
116}
117
118#layer.open .mobileMenu__list {
119  opacity: 1;
120  -webkit-transform: translateY(0px);
121          transform: translateY(0px);
122}
123
124#layer.open .mobileMenu__list:nth-child(2) {
125  -webkit-transition-delay: 0.1s;
126          transition-delay: 0.1s;
127}
128
129#layer.open .mobileMenu__list:nth-child(3) {
130  -webkit-transition-delay: 0.2s;
131          transition-delay: 0.2s;
132}
133
134.mobileMenu__link {
135  font-size: 1.8rem;
136  line-height: 2.5;
137}
138
139.main__wrapper {
140  padding: 15px;
141}
142
143.main__wrapper p {
144  font-size: 1.5rem;
145}
146
147.main__wrapper p + p {
148  margin-top: 15px;
149}

js
1const humberger = document.querySelector("#humberger");
2const layer = document.querySelector("#layer");
3
4humberger.addEventListener("click", function (e) {
5  layer.classList.toggle("open");
6  humberger.classList.toggle("open");
7});
8
9layer.addEventListener("click", function (e) {
10  layer.classList.toggle("open");
11  humberger.classList.toggle("open");
12});
13
14// 追加コード
15const mobileMenu = document.querySelector(".mobileMenu");
16
17mobileMenu.addEventListener("click", function (e) {
18  e.stopPropagation();
19});
20
21

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

回答1件

ベストアンサー

2に関してはまだみてるんで理由わかったら追記しますが、
1に関しては自分のパソコンだと綺麗に閉じてるので、使ってるデバイスによる問題かもしれません。
3に関してはlayerの子要素にclickListenerがない場合親要素のlistenerが動作してしまうので、子要素に空のclickListenerに追加すれば治ると思います

投稿2022/01/04 10:08