ハンバーガーメニューを組み込むと、はじめから見えないリンクが出てしまう

前提・実現したいこと

自分が作ったサイトにハンバーガーメニュー（Web上に無料公開されていたソース）を組み込みました。
この組み込んだソースはHTML,CSS,Javascript(jQuery)からできています。
画面幅が600px以下の時に、ナビゲーションメニュー（通常は横並び）がハンバーガーメニューに変化し、ハンバーガーメニューをクリックしたときに「メニューが縦に並ぶ」ようにしたいです。
しかし、１点問題が起きました。

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

画面幅が600px以下になりハンバーガーメニューが表示された時、既にドロップダウンメニューが「見えない状態」で出てしまっています。
マウスをハンバーガーメニュー（3本線）の下に移動すると、メニューは表示されていないのにマウスの状態が「リンクを指す手の形」になります。そしてマウスが手の形になった状態でクリックすると、そのページに飛んでしまいます。
つまり、ハンバーガーメニューをクリックしてもいないし見えてもいないのに、はじめからドロップダウンメニューが表示されてしまっているのです。

「header ul」に「flex-direction:column;」を自分で設定したのが原因のようですが、こうしないとハンバーガーメニューに入ったナビメニューが縦に並ばないのです。

該当のソースコード

HTML
1<head>
2    <script type="text/javascript" src="js/jquery-3.3.1.min.js"></script><!--jQuery読み込み-->
3</head>
4<body>
5	<header>
6		<div class="title_background">
7			<h1>TEST</h1>
8		</div>
9		<!----ハンバーガーメニュー追加中---->
10		<div class="hamburger">
11			<span></span>
12			<span></span>
13			<span></span>
14		</div>
15		<nav class="globalMenuSp">
16			<ul>
17				<li><a href="#">トップ</a></li>
18				<li><a href="#">メニュー</a></li>
19				<li><a href="#">アクセス</a></li>
20				<li><a href="#">お問い合わせ</a></li>
21			</ul>
22		</nav>
23	</header>
24</body>

CSS
1(下記のCSS以外にresetCSSをはじめに入れています。)
2.title_background{
3	background-color: black; height:100px;
4}
5h1{
6  padding:20px;
7  font-size:4rem;
8  line-height:3vh;
9  text-align:center;
10  color:#fff;
11  font-family: serif;
12}
13header{
14	top:0;
15	width:100%;
16	position:fixed;
17	z-index:50;
18	margin:auto;
19}
20header ul{/*** header menu ***/
21	display: flex;
22	justify-content: center;
23	background-color:lightgray;
24}
25header li{
26	margin:2vh 3vw;
27}
28header a{
29	color:#000;
30	text-decoration: none;
31}
32header h1 a{
33	color:#fff;
34	text-decoration: none;
35}
36@media (max-width:600px){
37/*********** ハンバーガーボタン ***********/
38header ul{/*** header menu ***/
39	display: flex;
40	justify-content: center;
41	flex-direction:column;
42	z-index:70;
43}
44/*　ハンバーガーボタン　*/
45.hamburger {
46  display : block;
47  position: fixed;
48  z-index : 3;
49  right : 13px;
50  top   : 12px;
51  width : 42px;
52  height: 42px;
53  cursor: pointer;
54  text-align: center;
55}
56.hamburger span {
57  display : block;
58  position: absolute;
59  width   : 30px;
60  height  : 2px ;
61  left    : 6px;
62  background : #fff;
63  -webkit-transition: 0.3s ease-in-out;
64  -moz-transition   : 0.3s ease-in-out;
65  transition        : 0.3s ease-in-out;
66}
67.hamburger span:nth-child(1) {
68  top: 10px;
69}
70.hamburger span:nth-child(2) {
71  top: 20px;
72}
73.hamburger span:nth-child(3) {
74  top: 30px;
75}
76
77/* ナビ開いてる時のボタン */
78.hamburger.active span:nth-child(1) {
79  top : 16px;
80  left: 6px;
81  background :#fff;
82  -webkit-transform: rotate(-45deg);
83  -moz-transform   : rotate(-45deg);
84  transform        : rotate(-45deg);
85}
86.hamburger.active span:nth-child(2),
87.hamburger.active span:nth-child(3) {
88  top: 16px;
89  background :#fff;
90  -webkit-transform: rotate(45deg);
91  -moz-transform   : rotate(45deg);
92  transform        : rotate(45deg);
93}
94nav.globalMenuSp {
95  position: fixed;
96  z-index : 2;
97  top  : 0;
98  left : 0;
99  color: #fff;
100  background: rgba(0,0,0,0.7);
101  text-align: center;
102  width: 100%;
103  opacity: 0;
104  transition: opacity .6s ease, visibility .6s ease;
105}
106nav.globalMenuSp ul {
107  margin: 0 auto;
108  padding: 0;
109  width: 100%;
110}
111nav.globalMenuSp ul li {
112  list-style-type: none;
113  padding: 0;
114  width: 100%;
115  transition: .4s all;
116}
117nav.globalMenuSp ul li:last-child {
118  padding-bottom: 0;
119}
120nav.globalMenuSp ul li:hover{
121  background :#ddd;
122}
123nav.globalMenuSp ul li a {
124  display: block;
125  color: #000;
126  padding: 1em 0;
127  text-decoration :none;
128}
129/* このクラスを、jQueryで付与・削除する */
130nav.globalMenuSp.active {
131  opacity: 100;
132}
133}

Javascript
1$(function() {
2	$('.hamburger').click(function() {
3		$(this).toggleClass('active');
4
5		if ($(this).hasClass('active')) {
6			$('.globalMenuSp').addClass('active');
7		} else {
8			$('.globalMenuSp').removeClass('active');
9		}
10	});
11});

試したこと

「flex-direction:column;」の記述を移動しましたが、思った通りになりません。
これをulから消してしまうとハンバーガーメニューをクリックしてもメニューが横並びになってしまいます。

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

ここにより詳細な情報を記載してください。

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

回答1件

ベストアンサー

visibility を追加するだけでいけました。

CSS
1nav.globalMenuSp {
2  visibility: hidden;
3}
4nav.globalMenuSp.active {
5  opacity: 100;
6  visibility: visible;
7}

投稿2021/02/16 13:54

編集2021/02/16 14:31

pinoko

総合スコア127

kumacyan

2021/02/17 02:16

ありがとうございます!おかげさまでできました!

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

あなたの回答

tips

プレビュー

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

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！