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

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

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

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

1回答

6926閲覧

スマホ用プルダウンメニューをCSSで作成した際に、メニュー項目のタップと同時にメニューを非表示にする方法

obukko

総合スコア11

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2017/08/08 10:37

編集2017/08/08 10:43

スマホ向けのプルダウンメニューを作っています。

非表示にしておき、ホバー時に表示するようCSSで記述しました。

css

1#hoge li ul{ 2 display: none; 3} 4#hoge li:hover ul{ 5 display: block; 6}

PCではマウスホバー時、iphoneではタップ時にメニューが出現します。
メニューはページ内アンカーへのリンクです。

html

1<ul id="hoge" class="dropmenu"> 2 <li ontouchstart="">menu 3 <ul> 4 <li ontouchstart=""><a href="#tokutyou">特徴</a></li> 5 <li ontouchstart=""><a href="#siyourei">使用例</a></li> 6 <li ontouchstart=""><a href="#toiawase">問い合わせ</a></li> 7 </ul> 8 </li> 9</ul>

PCでの動作は特に問題ないのですが、
iphoneでメニュー内のリンクをタップした後にそのままメニューが表示されたままになっているのを
タップと同時に非表示にしたく、以下のように記述しましたが上手くいきません。

css

1#hoge li ul:hover .dropmenu li ul li{ 2 visibility:hidden; 3}

タップと同時に非表示にするのはどのようにすればよいでしょうか。
よろしくお願いします。

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

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

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

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

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

guest

回答1

0

ベストアンサー

:hoverは「マウスポインタがその要素の上に乗っているとき」の動作を意味します。
スマホやタブレットの場合「マウスポインタを動かす」という動作がPCのようにはできないので、
クリック(タップ)でコントロールする方が動作が安定するかと思います。

少し遠回しな提案になりますが、iphoneの際には:hoverではなく
チェックボックスを活用したメニューにしてはいかがでしょうか?
チェックボックスを活用することで
「最初のクリック(チェックする)で開く」→「次のクリック(チェックが外れる)で閉じる」→「さらに次のクリック(チェックする)で開く」
というようにクリックで開閉させることが可能になります。

↓下記のサイトがとても親切ですので、よろしければご参考ください。
動くcssのためのメモ 画面の端からニュッと出るメニュー
https://lopan.jp/css-animation/

上記のサイトよりメニュー部分のソースを抜粋
動くサンプル:https://jsfiddle.net/yqxzoser/5/

html

1<div id="wrapper"> 2<input type="checkbox" id="navTgl"> 3<label for="navTgl" class="open"></label> 4<label for="navTgl" class="close"></label> 5<nav class="menu"> 6<h2>menu</h2> 7<ul> 8<li><a href="#article1">なつかしくってあったかい、きりぎりす。</a></li> 9<li><a href="#article2">透明ノイズと紙テクスチャ。</a></li> 10<li><a href="#article3">Webサイトの作り方のまとめ!ブラウザチェック。</a></li> 11<li><a href="#article4">Photoshopのシェイプでできること。</a></li> 12<li><a href="#article5">CSSだけでスライドショーはつくれるよ。</a></li> 13</ul> 14</nav> 15</div>

css

1/* :::::: contents :::::: */ 2 3#navTgl:checked ~ .contents { 4-webkit-transform: translateX(250px); 5transform: translateX(250px); 6} 7/* :::::: toggle button :::::: */ 8#navTgl { 9display: none; 10overflow: hidden; 11} 12label { 13cursor: pointer; 14position: fixed; 15top: 0; 16left: 0; 17} 18.open { 19z-index: 2; 20width: 50px; 21height: 50px; 22color: white; 23background-color: lightSeaGreen; 24font-size: 2em; 25line-height: 50px; 26text-align: center; 27-webkit-transition: background-color .6s, -webkit-transform .6s; 28transition: background-color .6s, transform .6s; 29} 30#navTgl:checked + .open { 31background-color: indianRed; 32-webkit-transform: translateX(250px); 33transform: translateX(250px); 34} 35.close { 36pointer-events: none; 37z-index: 1; 38width: 100%; 39height: 100%; 40transition: background-color .6s; 41} 42#navTgl:checked ~ .close { 43pointer-events: auto; 44background-color: rgba(0,0,0,.3); 45} 46/* :::::: drawer menu :::::: */ 47.menu { 48z-index: 1; 49position: fixed; 50overflow: auto; 51top: 0; 52left: 0; 53width: 250px; 54height: 100%; 55padding: 10px; 56background-color: rgba(0,0,0,.6); 57-webkit-transform: translateX(-100%); 58transform: translateX(-100%); 59-webkit-transition: -webkit-transform .6s; 60transition: transform .6s; 61} 62#navTgl:checked ~ .menu { 63-webkit-transform: translateX(0); 64transform: translateX(0); 65} 66.menu h2, 67.menu li a { 68color: white; 69} 70.menu h2 { 71text-align: center; 72} 73.menu ul, 74header nav ul { 75padding: 0; 76} 77.menu li { 78border-bottom: 1px solid rgba(255,255,255,.6); 79font-size: .8em; 80line-height: 1.4; 81} 82.menu li:first-child { 83border-top: 1px solid rgba(255,255,255,.6); 84} 85.menu li a, 86header nav li a { 87display: block; 88padding: 1em 2em; 89text-decoration: none; 90transition: background-color .6s; 91} 92.menu li a:hover { 93background-color: black; 94} 95 96/* :::::: header, footer :::::: */ 97header, 98footer, 99.menu { 100box-sizing: border-box; 101}

投稿2017/08/13 13:19

shiroikoma

総合スコア38

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

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

obukko

2017/08/14 04:28

丁寧に教えていただいてありがとうございます。そんな方法があったとは知りませんでした。 勉強になりました。
obukko

2017/08/17 17:13

教えたいただいた方法で実装することができました。 本当にありがとうございました。
shiroikoma

2017/08/29 06:29

おめでとうございます!何よりです!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問