- 締切済み
ドロップダウンメニューについて
JavascriptやJquoryを使わずにcssのみで、動きのあるドロップダウンメニューを作ることができました。 しかし、スマートフォンなどのタッチデバイスで動作確認をすると、メニューからサイドメニューが出っぱなしの状態になってしまい、引っ込んでくれません。 メニューの部分をクリックして開閉できるようにすればいいのでしょうか。やり方を教えて下さい。また、Javascriptを無効にしてる方でも問題なく使えるようにしたいです。
- CSS
- 回答数3
- ありがとう数7
- みんなの回答 （3）
- 専門家の回答
みんなの回答
- ORUKA1951
- ベストアンサー率45% (5062/11036)
ちょっと確認 ★header内のナビゲーションは:focus、section内のナビゲーションは:target ★Another HTML Lint - Gateway( http://www.htmllint.net/html-lint/htmllint.html# ) W3C CSS 検証サービス( http://jigsaw.w3.org/css-validator/#validate_by_input ) で検証済みのHTML5 + CSS3(targetのみ) ★タブは＿に置換してあるので戻す。文字コードUTF-8 ★リキッド(640px～900px) <!doctype html> <html> <head> ＿<meta charset="utf-8"> ＿<title>サンプル</title> ＿<meta name="description" content=""> ＿<meta name="author" content="IRUKA"> ＿<style media="screen"> <!-- html,body{margin:0;padding:0;} h1,h2,h3,h4,h5,h6{margin:0;line-height:1.6em;} p{text-indent:1em;} header,section,footer{width:90%;min-width:630px;max-width:900px;margin:0 auto;padding:5px;} /* プルダウンメニュー */ nav{line-height:2em;text-align:center;} nav ul,nav ul li{list-style:none;margin:0;padding:0;} nav ul{font-size:0;} nav ul li{font-size:16px;display:inline-block;position:relative;width:25%;} nav ul li ul{font-size:16px;position:absolute;top:2em;width:100%;display:none;} nav ul li ul li{width:100%;} /* header内のナビ */ header nav ul li:hover ul,header nav ul li:focus ul{display:block;} /* 本文内のナビ */ section nav ul li ul:target{display:block;} /* 色分けなど */ nav ul li a{display:block;width:100%;height:100%;text-decoration:none;} nav ul li{background-color:yellow;} nav ul li:hover{background-color:orange;} nav ul li ul li:hover{background-color:lime;} body{background-color:gray;} header,section,footer{background-color:white;} --> ＿</style> </head> <body> ＿<header> ＿＿<h1>タイトル</h1> ＿＿<p>このページでは・・・・</p> ＿＿<nav> ＿＿＿<ul> ＿＿＿＿<li><a href="/">Top</a></li> ＿＿＿＿<li><a href="/Books">Books</a> ＿＿＿＿＿<ul> ＿＿＿＿＿＿<li><a href="/Books/001.html">ABCD</a></li> ＿＿＿＿＿＿<li><a href="/Books/002.html">EFGH</a></li> ＿＿＿＿＿＿<li><a href="/Books/003.html">IJK</a></li> ＿＿＿＿＿</ul> ＿＿＿＿</li> ＿＿＿＿<li><a href="/Product">Product</a> ＿＿＿＿＿<ul> ＿＿＿＿＿＿<li><a href="/Product/001.html">LMNO</a></li> ＿＿＿＿＿＿<li><a href="/Product/002.html">PQRS</a></li> ＿＿＿＿＿＿<li><a href="/Product/003.html">TUVW</a></li> ＿＿＿＿＿</ul> ＿＿＿＿</li> ＿＿＿＿<li><a href="/Manual">Manual</a> ＿＿＿＿＿<ul> ＿＿＿＿＿＿<li><a href="/Manual/001.html">XYZA</a></li> ＿＿＿＿＿＿<li><a href="/Manual/002.html">BCDE</a></li> ＿＿＿＿＿＿<li><a href="/Manual/003.html">FGHI</a></li> ＿＿＿＿＿</ul> ＿＿＿＿</li> ＿＿＿</ul> ＿＿</nav> ＿</header> ＿<section> ＿＿<h2>見出し</h2> ＿＿<p>本文はsection</p> ＿＿<section> ＿＿＿<h3>項見出し</h3> ＿＿＿<p>本文項記事</p> ＿＿＿<p>sectionの階層でレベルが判断される</p> ＿＿</section> ＿＿<nav> ＿＿＿<ul> ＿＿＿＿<li><a href="/">Top</a></li> ＿＿＿＿<li><a href="#Book">Book</a> ＿＿＿＿＿<ul id="Book"> ＿＿＿＿＿＿<li><a href="/Books/001.html">ABCD</a></li> ＿＿＿＿＿＿<li><a href="/Books/002.html">EFGH</a></li> ＿＿＿＿＿＿<li><a href="/Books/003.html">IJK</a></li> ＿＿＿＿＿</ul> ＿＿＿＿</li> ＿＿＿＿<li><a href="#Products">Products</a> ＿＿＿＿＿<ul id="Products"> ＿＿＿＿＿＿<li><a href="/Product/001.html">LMNO</a></li> ＿＿＿＿＿＿<li><a href="/Product/002.html">PQRS</a></li> ＿＿＿＿＿＿<li><a href="/Product/003.html">TUVW</a></li> ＿＿＿＿＿</ul> ＿＿＿＿</li> ＿＿＿＿<li><a href="#Manuales">マニュアル</a> ＿＿＿＿＿<ul id="Manuales"> ＿＿＿＿＿＿<li><a href="/Manual/001.html">XYZA</a></li> ＿＿＿＿＿＿<li><a href="/Manual/002.html">BCDE</a></li> ＿＿＿＿＿＿<li><a href="/Manual/003.html">FGHI</a></li> ＿＿＿＿＿</ul> ＿＿＿＿</li> ＿＿＿</ul> ＿＿</nav> ＿</section> ＿<footer> ＿＿<h2>文書情報</h2> ＿＿<dl id="documentHistry"> ＿＿＿<dt id="FIRST-PUBLISHED">First Published</dt> ＿＿＿<dd>2013-03-03</dd> ＿＿</dl> ＿</footer> </body> </html>
- ORUKA1951
- ベストアンサー率45% (5062/11036)
ところで、本当に出っぱなしになりますか？？？ スマホがユーザーエージェントの一つでしたら、HTML5でマークアップされていることが多いので <body> <header> ・・・ <nav> <ul> <li><a href=""></a></li> <li><a href=""></a> <ul> <li><a href=""></a></li> <li><a href=""></a></li> <li><a href=""></a></li> </ul> </li> とかだと思います。 それで、 スタイルシートは header nav ul li{position:relative;line-height:2em;} header nav ul li:honer ul{display:block;position:absolute;top:2em;width:100%;} header nav ul li ul li{width:100%;} header nav ul li ul{display:none;} などが定番の書き方ですが、:hoverが外れると、引っ込むはずですが、それともtransformやline-height使われているのかな・・
お礼
教えていただきありがとうございました。
補足
本当に出っぱなしになってしまいます。 確かに、cssのほうで:hoverを使っていました。 :hoverを外して書き換えて、マウスオーバーからクリックで動作するには上の書き方でよろしいですか？
- ORUKA1951
- ベストアンサー率45% (5062/11036)
:target擬似クラスを使いましょう。
お礼
教えていただきありがとうございました。
補足
わかりました。調べてみます。
補足
先ほど実践してみました。しかし、結局スマートフォンなどのタッチデバイスで動作確認すると出っぱなしの状態でした。