htmlでハンバーガーメニューを実装した際、非表示なのにクリック出来てしまいます

前提・実現したいこと

htmlとcss、jqueryでハンバーガーボタンを設置しました。
メニュー内容を表示していない透明な状態でクリックが可能な状態になっています。
メニュー表示をしていない状態でクリックが出来ないようにするにはどうすればよいのでしょうか？

発生している問題・エラーメッセージ

ハンバーガーボタンの中のリンクが押せてしまいます。

該当のソースコード

html
1<body>
2    <header>
3      <div class="headerbox">
4      <div class="hamburger">
5  <span></span>
6  <span></span>
7  <span class="nav-toggle-btn_label">MENU</span>
8</div>
9
10<nav class="globalMenuSp">
11    <ul>
12        <li><a href="/ファイル名/">トップページ</a></li>
13        <li><a href="#">コンテンツ</a></li>
14        <li><a href="/ファイル名/">コンテン２</a></li>
15    </ul>
16</nav>
17</div>
18</header>
19

css
1.nav-toggle-btn_label {
2  position: absolute;
3  left: 50px;
4  top:30px;
5  bottom: 3px;
6  font-size: 10px;
7  color: white;
8}
9
10.hamburger {
11  display : block;
12  position: fixed;
13  z-index : 3;
14  left: 15px;
15  top   : 30px;
16  width : 50px;
17  height: 50px;
18  cursor: pointer;
19  text-align: center;
20  background-color: black;
21}
22.hamburger span {
23  display : block;
24  position: absolute;
25  width   : 30px;
26  height  : 2px ;
27  left    : 10px;
28  background : white;
29  -webkit-transition: 0.3s ease-in-out;
30  -moz-transition   : 0.3s ease-in-out;
31  transition        : 0.3s ease-in-out;
32}
33.hamburger span:nth-child(1) {
34  top: 10px;
35}
36.hamburger span:nth-child(2) {
37  top: 20px;
38}
39
40/* ナビ開いてる時のボタン */
41.hamburger.active span:nth-child(1) {
42  top : 16px;
43  left: 6px;
44  background :#fff;
45  -webkit-transform: rotate(-45deg);
46  -moz-transform   : rotate(-45deg);
47  transform        : rotate(-45deg);
48}
49
50.hamburger.active span:nth-child(2) {
51  top: 16px;
52  background :#fff;
53  -webkit-transform: rotate(45deg);
54  -moz-transform   : rotate(45deg);
55  transform        : rotate(45deg);
56}
57
58nav.globalMenuSp {
59  position: fixed;
60  z-index : 2;
61  top  : 0;
62  left : 0;
63  color: #fff;
64  background: rgba(0,0,0,0.7);
65  text-align: center;
66  width: 100%;
67  opacity: 0;
68  transition: opacity .6s ease, visibility .6s hidden;
69}
70
71nav.globalMenuSp ul {
72  margin: 0 auto;
73  padding: 0;
74  width: 100%;
75}
76
77nav.globalMenuSp ul li {
78  list-style-type: none;
79  padding: 0;
80  width: 100%;
81  transition: .4s all;
82}
83nav.globalMenuSp ul li:last-child {
84  padding-bottom: 0;
85}
86nav.globalMenuSp ul li:hover{
87  background :#ddd;
88}
89
90nav.globalMenuSp ul li a {
91  display: block;
92  color: #fff;
93  padding: 1em 0;
94  text-decoration :none;
95}
96
97/* このクラスを、jQueryで付与・削除する */
98nav.globalMenuSp.active {
99  opacity: 100;
100  visibility: visible;
101}
102

試したこと

https://teratail.com/questions/286643
→特に変化なし
https://teratail.com/questions/293038
→メニュー内部が左端に見切れ＆数文字しか見えない状態になってしまった（私のやり方が間違っているのかもしれません）

補足情報（FW/ツールのバージョンなど）

windowsとxampp、microsoft eggeを使用しています

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

回答2件

ベストアンサー

opacityは透過率を変更するだけで、0でも要素自体はそこにあります。
素直にdisplay:none;、もしくはtransformで画面外まで移動させるかのどちらかかな。
z-indexをマイナスにする方法も使えるみたい。※teratailのtipsアイコンで試した。
お好みでどうぞ～

以下蛇足です。
opacity: 100;←確か0～1の間までのはず。

以下おまけです。
hatena19様ご提示のvisibility: hidden;は領域を確保したまま非表示にする記述です。

投稿2021/03/23 04:39

編集2021/03/23 04:41

退会済みユーザー

総合スコア0

最初のリンク先の方法なら、visibility: hidden; を追加しないとダメですよ。

css
1nav.globalMenuSp {
2  position: fixed;
3  z-index : 2;
4  top  : 0;
5  left : 0;
6  color: #fff;
7  background: rgba(0,0,0,0.7);
8  text-align: center;
9  width: 100%;
10  opacity: 0;
11  transition: opacity .6s ease, visibility .6s;
12  visibility: hidden; /* 追加 */
13}