スマホで見たときのドロワーメニューが閉じてもカーソルがついてしまう問題

前提

テンプレを使ってクリニックのサイトを作りました。

ドロワーメニューが古臭い感じだったので変更したのですが、スマホで見たときにメニューが閉じたときまでカーソルがついてタップ（リンク）できてしまいます。

PCでのメニュー表示は問題ありません　

ウェブ制作が数年ブランクあるので知恵を貸してください。

※コメントを頂きましたのでHTMLのソースも掲載します。

実現したいこと

スマホで見たときにハンバーガーメニューが閉じたときはメニュー項目を選択できない(非表示)にしたい

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

下記のサイトをスマホで見て頂くとすぐにわかります。　画面サイズを変えたときにドロワーがでてきてしまいます。
[ウェブサイト](http://m7844.html.xdomain.jp/2/index.html)

該当のソースコード

css
1nav ul {
2	display: flex;
3    	flex-direction: row;
4    	justify-content: space-around;
5    	list-style: none;
6	margin: 1rem 0 0 0;
7}
8nav li {
9	flex: 1 0 auto;
10}
11
12
13nav li a {
14    text-decoration: none;
15    text-align: center;
16    width: 100%;
17}
18nav a:hover {
19    background-color: #f7f7f7;    
20}
21nav a {
22    padding: 0.5rem;
23}
24
25
26
27
28
29
30
31
32
33@media screen and (min-width: 768px){
34/* PC時はMENUボタンを非表示 */
35
36
37.hamburger {
38    display: none !important;
39}
40
41
42#navi {
43    display: block !important;
44}
45
46
47}
48
49
50
51@media screen and (max-width: 768px){
52.header {
53	flex-direction: column;
54        margin-bottom: 10px;
55}
56.header #open,#close  {
57    position: absolute;
58    top: 20px;
59    right: 12px;
60}
61
62
63
64
65nav ul {
66	flex-direction: column;
67}
68
69
70
71
72
73.header li {
74	padding-top: 0;
75}
76
77
78
79
80/* スマホ時はMENUボタンを表示 */
81
82
83
84/*　ハンバーガーボタン　*/
85.hamburger {
86  display : block;
87  position: fixed;
88  z-index : 3;
89  right : 13px;
90  top   : 12px;
91  width : 42px;
92  height: 42px;
93  cursor: pointer;
94  text-align: center;
95}
96.hamburger span {
97  display : block;
98  position: absolute;
99  width   : 30px;
100  height  : 2px ;
101  left    : 6px;
102  background : #555;
103  -webkit-transition: 0.3s ease-in-out;
104  -moz-transition   : 0.3s ease-in-out;
105  transition        : 0.3s ease-in-out;
106}
107.hamburger span:nth-child(1) {
108  top: 10px;
109}
110.hamburger span:nth-child(2) {
111  top: 20px;
112}
113.hamburger span:nth-child(3) {
114  top: 30px;
115}
116
117/* ナビ開いてる時のボタン */
118.hamburger.active span:nth-child(1) {
119  top : 16px;
120  left: 6px;
121  background :#fff;
122  -webkit-transform: rotate(-45deg);
123  -moz-transform   : rotate(-45deg);
124  transform        : rotate(-45deg);
125}
126
127.hamburger.active span:nth-child(2),
128.hamburger.active span:nth-child(3) {
129  top: 16px;
130  background :#fff;
131  -webkit-transform: rotate(45deg);
132  -moz-transform   : rotate(45deg);
133  transform        : rotate(45deg);
134}
135
136nav.globalMenuSp {
137  position: fixed;
138  z-index : 2;
139  top  : 0;
140  left : 0;
141  color: #fff;
142  background: rgba(0,0,0,0.7);
143  text-align: center;
144  width: 100%;
145  opacity: 0;
146  transition: opacity .6s ease, visibility .6s ease;
147}
148
149nav.globalMenuSp ul {
150  margin: 0 auto;
151  padding: 0;
152  width: 100%;
153}
154
155nav.globalMenuSp ul li {
156  list-style-type: none;
157  padding: 0;
158  width: 100%;
159  transition: .4s all;
160}
161nav.globalMenuSp ul li:last-child {
162  padding-bottom: 0;
163}
164nav.globalMenuSp ul li:hover{
165  background :#ddd;
166}
167
168nav.globalMenuSp ul li:hover a{
169  color:#668497;
170}
171
172nav.globalMenuSp ul li a {
173  display: block;
174  color: #fff;
175  padding: 1em 0;
176  text-decoration :none;
177}
178
179/* このクラスを、jQueryで付与・削除する */
180nav.globalMenuSp.active {
181  opacity: 100;
182
183}
184
185/* スマホ時はメニューを非表示 */
186
187
188/*
189
190#navi {
191    display: none;
192}
193
194*/

【HTML】

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
    <title>銀座美容メディカルクリニック</title>
<meta name="keywords" content="">
<meta name="description" content="">
<link rel="icon" type="image/vnd.microsoft.icon"  href="img/favicon.ico">
<link rel="stylesheet" media="all" href="css/ress.min.css" />
<link rel="stylesheet" media="all" href="css/style.css" />
<script src="js/jquery-2.1.4.min.js"></script>
<script src="js/style.js"></script>
<script src="js/drawer.js"></script>

	
<!-- Favicon -->
<link rel="icon" type="image/png" href="img/favicon.png">
    
</head>
<body>
<header>    
<div class="container">
<div class="row">
    <div class="col span-12 header">
        <h1><a href="index.html"><img src="img/shop_logo.jpg" alt="銀座メディカルクリニック"></a></h1>
		<div class="header-box"><a href="#8"><span class="contact-button">お問い合わせ</span></a></div>
        </div>
    </div>
<div class="row">
    <div class="col span-12">

<div class="hamburger">
  <span></span>
  <span></span>
  <span></span>
</div>

<nav class="globalMenuSp">
	
      <div id="navi">
    	<ul>
            <li><a href="index.html">ホーム</a></li>
            <li><a href="#2">ピコレーザーとは</a></li>
            <li><a href="#3">ピコレーザーによる治療</a></li>
            <li><a href="#4">当院のピコレーザーについて</a></li>
            <li><a href="#5">診療費用</a></li>
	　　<li><a href="#6">治療の流れ</a></li>
            <li><a href="#7">Ｑ＆Ａ</a></li>
    	</ul>
      </div>
	
</nav>    

<!--
    <nav>    
        <div id="open"><img src="img/button.png"></div>
        <div id="close"><img src="img/button2.png"></div>    
            <div id="navi">
        <ul>
            <li><a href="index.html">ホーム</a></li>
            <li><a href="#2">ピコレーザーとは</a></li>
            <li><a href="#3">ピコレーザーによる治療</a></li>
            <li><a href="#4">当院のピコレーザーについて</a></li>
            <li><a href="#5">診療費用</a></li>
	　　<li><a href="#6">治療の流れ</a></li>
            <li><a href="#7">Ｑ＆Ａ</a></li>
         </ul>
             </div>
     </nav>

-->

        </div>
    </div>
    </div>

【drawer.js】

$(function() {
    $('.hamburger').click(function() {
        $(this).toggleClass('active');
 
        if ($(this).hasClass('active')) {
            $('.globalMenuSp').addClass('active');
        } else {
            $('.globalMenuSp').removeClass('active');
        }
    });
});

試したこと

自身で下のコードをつけると、スマホで見たときにメニュー項目が消えるので対処に困ってます。　現状、コメントアウトしてます。　

#navi {
display: none;
}

テンプレートのul要素と新しいドロワーメニューのul要素がバッティングしてると思ってます。

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

新しいドロワーメニューは下記サイトの一番上から引っ張ってきてます。

https://knoweb.net/html-css/css/responsive-hamburgermenu/#%E3%81%B5%E3%82%8F%E3%81%A3%E3%81%A8%E5%87%BA%E3%81%A6%E3%81%8F%E3%82%8B%E3%83%A1%E3%83%8B%E3%83%A5%E3%83%BC

Cocode

2022/10/16 11:56

ご提示いただいているURLに接続できませんでした。 CSSだけでは不具合の原因がわかりませんので、HTMLとJS（いずれもドロワーメニューに関係のある部分のみ）をご提示いただければ幸いです。（このコメント欄にではなく、質問を編集してコードを追加してください）

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

回答2件

ベストアンサー

不具合の原因

opacityというのは要素の透明度です。
0にしたら完全に透明になるので見えなくなりますが、要素はそこに存在しているので、見えないけどクリックできてしまいます。
ですのでドロワーメニューはdisplay: none <-> blockの切り替えをする必要があります。

※あと、opacityの数字は0~1です。「100」は誤りですのでご注意ください。

diff
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+ display: none;
12  transition: opacity .6s ease, visibility .6s ease;
13}
14
15nav.globalMenuSp.active {
16- opacity: 100;
17+ display: block;
18}

しかし上記のようなコードにすると一つ問題が発生します。
それは、transitionが効かず、ふわっとしなくなります。
displayの切り替えはtransitionの効果の対象外だからです。

ではどうしたらいいかといいますと…

完成コード例

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  display: none;
11}
12
13/* ↓不要 */
14/* nav.globalMenuSp.active {
15  opacity: 100;
16} */

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

ドロワーメニューに.activeというclassをつけはずしするのをやめ、jQueryのメソッドである.fadeIn() .fadeOut()を利用します。
これを書くだけでdisplay: none<->blockを切り替えながら、ふわっと表示・非表示ができてしまうすぐれものです。

また、()の中に数値（ミリ秒）をかくことで、ふわっとする時間を変更することができます。
デフォルトは400ミリ秒（0.4秒）です。

例）

.fadeIn(1000) -> 1000ミリ秒（1秒）でふわっと表示
.fadeOut(200) -> 200ミリ秒（0.2秒）でふわっと非表示

その他も設定できますので、色々試してみてください。

参考URL

opacityについて：https://www.w3schools.com/css/css_image_transparency.asp
jQueryの.fadeIn()について：https://js.studio-kingdom.com/jquery/effects/fade_in

投稿2022/10/16 13:58

編集2022/10/16 14:11

Cocode

総合スコア2316

Cocode

2022/10/16 15:41

回答欄に誤って投稿されている追加の質問に対してのお返事です。 > スマホのブラウザで開いたままだったのでキャッシュの問題かまた別の原因があるのでしょうか？原因が少々わかりませんので、キャッシュをクリアして一度ご確認ください。

Cocode

2022/10/16 15:44

今自分のiPhoneで　http://m7844.html.xdomain.jp/2/index.html　を確認してみましたが、ドロワーメニュー問題なく動いております。

chamaki40

2022/10/17 03:57

ご返信遅れて申し訳ございません。　スマホでも問題なく動作しました。　改めてありがとうございます。 iphone13とか機種によっても変わるのでしょうか？　

Cocode

2022/10/17 06:27

絶対ないとは言い切れませんが、おそらく変わることはあまりないのではないでしょうか。ただ一点気になるのは、質問者様はjQueryのバージョン2系を使われていますが、差し支えなければ3系をご利用ください。 jQueryのバージョンで機能面に差があります。

chamaki40

2022/10/17 12:30

スマホはiphone13とドコモのかんたんスマホでも問題なく表示できました。また、Jqueryのヴァージョンについてはご教示して頂いたように３系を確認してみます。とにかく今回は的確な措置とコードまで提示して頂きありがとうございました。　

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

夜分、遅くに申し訳ございません。

教えて頂いたコードに差し替えたらPCは問題なかったのですが、スマホで見るとメニューが表示されなくなりました。

スマホのブラウザで開いたままだったのでキャッシュの問題かまた別の原因があるのでしょうか？

度々申し訳ございません。

投稿2022/10/16 15:33

編集2022/10/16 15:39

chamaki40

総合スコア32

Cocode

2022/10/16 15:38

丁寧な御礼文をありがとうございます！お役に立ててよかったです。恐縮ですが…ここは回答欄ですので、御礼文を投稿するにはふさわしくありません。ですので削除依頼を出された方がいいと思います。御礼文などは、回答の下にある「コメント」という文字をクリックするとコメント記入欄が現れますので、そちらにてご投稿ください。お気持ちはとても嬉しく感じております。ありがとうございます。よろしくお願いいたします。

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

あなたの回答