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

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

新規登録して質問してみよう
ただいま回答率
85.50%
CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

SCSS

SCSSは、SassのCSSメタ言語です。Webページのスタイルを指定するCSSを効率的に記述することができます。ネストと呼ばれる入れ子構造で記述するため、CSSの全体の記述量を減らせる点が特徴です。さらに変数も利用できるため、変更や修正の際に少ない作業量で対応することもできます。

jQuery UI

jQuery UI はjQuery公式のインターフェースライブラリであり、対話型のウェブアプリケーションを作る際に役立ちます。

Q&A

解決済

2回答

725閲覧

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

chamaki40

総合スコア32

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

SCSS

SCSSは、SassのCSSメタ言語です。Webページのスタイルを指定するCSSを効率的に記述することができます。ネストと呼ばれる入れ子構造で記述するため、CSSの全体の記述量を減らせる点が特徴です。さらに変数も利用できるため、変更や修正の際に少ない作業量で対応することもできます。

jQuery UI

jQuery UI はjQuery公式のインターフェースライブラリであり、対話型のウェブアプリケーションを作る際に役立ちます。

0グッド

0クリップ

投稿2022/10/15 10:02

編集2022/10/17 21:30

前提

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

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

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">Q&A</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">Q&A</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

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

Cocode

2022/10/16 11:56

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

回答2

0

ベストアンサー

不具合の原因

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

投稿2022/10/16 13:58

編集2022/10/16 14:11
Cocode

総合スコア2314

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

Cocode

2022/10/16 15:41

回答欄に誤って投稿されている追加の質問に対してのお返事です。 > スマホのブラウザで開いたままだったのでキャッシュの問題かまた別の原因があるのでしょうか? 原因が少々わかりませんので、キャッシュをクリアして一度ご確認ください。
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のヴァージョンについてはご教示して頂いたように3系を確認してみます。 とにかく今回は的確な措置とコードまで提示して頂きありがとうございました。 
guest

0

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

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

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

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

投稿2022/10/16 15:33

編集2022/10/16 15:39
chamaki40

総合スコア32

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

Cocode

2022/10/16 15:38

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問