締切済み

ドロップダウンメニューについて

2014/07/26 14:18

JavascriptやJquoryを使わずにcssのみで、動きのあるドロップダウンメニューを作ることができました。しかし、スマートフォンなどのタッチデバイスで動作確認をすると、メニューからサイドメニューが出っぱなしの状態になってしまい、引っ込んでくれません。メニューの部分をクリックして開閉できるようにすればいいのでしょうか。やり方を教えて下さい。また、Javascriptを無効にしてる方でも問題なく使えるようにしたいです。

noname#243511

CSS
回答数3
ありがとう数7

みんなの回答 （3）
専門家の回答

みんなの回答

ORUKA1951
ベストアンサー率45% (5062/11036)

2014/07/26 19:48 回答No.3

ちょっと確認 ★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">  ＿</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>

質問者

補足 2014/07/28 08:59

先ほど実践してみました。しかし、結局スマートフォンなどのタッチデバイスで動作確認すると出っぱなしの状態でした。

ORUKA1951
ベストアンサー率45% (5062/11036)

2014/07/26 14:49 回答No.2

ところで、本当に出っぱなしになりますか？？？スマホがユーザーエージェントの一つでしたら、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使われているのかな・・

質問者

お礼 2014/07/28 08:56

教えていただきありがとうございました。

質問者

補足 2014/07/26 15:51

本当に出っぱなしになってしまいます。確かに、cssのほうで:hoverを使っていました。 :hoverを外して書き換えて、マウスオーバーからクリックで動作するには上の書き方でよろしいですか？

ORUKA1951
ベストアンサー率45% (5062/11036)

2014/07/26 14:23 回答No.1

:target擬似クラスを使いましょう。

質問者

お礼 2014/07/28 08:56

教えていただきありがとうございました。

質問者

補足 2014/07/28 08:56

わかりました。調べてみます。

関連するQ&A

ドロップダウンメニューに関する質問。超初心者です。
ドロップダウンメニュー（親メニューだけgif画像で子メニューはcssで表示）を作りたいと思っています。 javascript又はCSS+htmlを使ってドロップダウンメニューを作りたいと良いサンプルを探しております。親メニューは画像で、子メニューはcssで表示させたいと思います。サイドメニューとして、縦並びに配置して、オンマウスで右側に子メニューのリストが展開するように。ネット上でサンプルを探しているのですが、全部cssで展開だったり、全部画像で展開だったりして、親メニューだけ画像で、子メニューはcssで表示というのがなかなかみつかりません。。超超初心者の私にどなたかご教授願えないでしょうか。よろしくお願い致します。m(_ _)m 　
- ベストアンサー
- JavaScript
ドロップダウンメニューについて
javascriptのドロップダウンメニューの作成について質問させてください。現在、あるサイトでグローバルナビゲーションにドロップダウンメニューを実装しようとしているのですが、壁にあたってしまいました。 ↓参考サイト http://jsajax.com/EditRunDemo.aspx こういったドロップダウンメニューなのですが、これを例にあげさせてもらうと、例えばこのメニューのDownloadというページをクリックしてDownloadページに自分がいる時はDownloadのドロップダウンメニューを"出さない"ということがやりたいのです。自分なりに色々とやってはみたものの、javascriptの経験が浅いので正直なところよくわからないのが現状です。どなたかこのような事例のサンプルを紹介しているサイトをお知りの方、もしくは解決法をご教授いただければ幸いです。そこまで至らなくてもどのような手法を取ればできそうかということだけでも良いのでご意見をください。よろしくお願いします。
- ベストアンサー
- JavaScript
タブレットのドロップダウンメニューについて
会社のWebの管理をしていますが、５年前に作ったサイトはJavaScriptを使ってドロップダウンにしました。しかしタブレットではドロップダウンメニューが開かずページの遷移ができません。メニューを修正してタブレットやスマホでもリンク先のページに遷移させるのにはどうしたら良いか教えて下さい。商品のところはドロップダウンで20個程表示されます。 Webについてはほぼ素人でHTMLとCSSは独学で勉強し、JavaScriptは本やサイトのサンプルデータを使わせていただいていて、内容についてはあまり理解していません。タブレットやスマホではそもそもドロップダウンメニューが使えないようなのですが。サイトで検索しましたが、今一参考にできそうなサイトにたどりつけませんでした。アドバイスよろしくお願いします。
- 締切済み
- JavaScript
ドロップダウンメニュー。
個人でＨＰを運営しているのですが、この度、フレーム機能とドロップダウンメニューを使用してページを製作しました。ところが、メニューから項目を選んでクリックしてちゃんと表示されるのですが、クリックしても何も表示されない部分（メニューの中の最初の表示部分や、ｈｔｍなど設定されていない部分）も何故か、何にもない真っ白なページが表示されてしまいます。ドロップダウンメニューのソースはサンプルから頂いてきて、自分なりに何とか形になったのですが、上記のトラブルを解消するほどの知識がありません。何卒、ご教授お願いいたします。 http://www003.upp.so-net.ne.jp/tochio-cinema/cinema_review.htm の右上にあるドロップダウンメニューです。メニューの中の　ＬＡＳＴ　ＵＰＤＡＴＥと、その下の6/26をクリックすると、下のフレームが真っ白になってしまいます。
- ベストアンサー
- HTML
ドロップダウンメニューのプログラムを教えて・・・
今非常に困っています・・・。プログラムのどの本を見てもドロップダウンメニューのプログラムが無いし、インターネットで検索してソースコードを貼ってみても、全然動きのあるドロップダウンメニューにならずに、単なる縦列横列のリンクになってしまい、ドロップダウンメニューを作れません。今現在JavaScriptでドロップダウンメニューの着いた自分用のＨＰを作りたいと強く思っているのですが、下のようなプログラムの中にドロップダウンメニューを入れるためには、どのように入力したら良いのかご教授願えないでしょうか？。非常に身勝手な質問とは承知しているのですが、画像のイメージは添付ファイルの通りで、縦と横にそれぞれメニューが出てくるようにしたいです・・・。ご回答をお待ちしております。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd"> <title></title> <script language="JavaScript"> </script> <body> <form name=""> </form> </body>
- ベストアンサー
- その他(ソフトウェア)
JavaScriptを使用する入れ子のドロップダウンメニューについて
仕事で、入れ子のドロップダウンメニューを作成することになりました。入れ子でなく、通常のドロップダウンメニューを、こちらのWebサイト↓ http://exyz.cocolog-nifty.com/good_sleep/2007/09/javascript_8131.html を拝見させて頂き、作成したのですが、こちらの方法を応用して入れ子にしようとすると、ドロップダウンメニューが使い物にならないものになってしまいます。参考としては、こういったものを作りたいと考えています↓。 http://www.ebase.co.jp/solution/index.html こちらのWebサイトの、左側のメニューです。カテゴリによって、２段になってます。いろいろなサイトを調べてみましたが、 CSSによるものしか見当たらず、かつサンプルが、私のブラウザ(Sleipnir、IE)では見ることが出来ませんでした。参考サイトのように、綺麗なドロップダウンメニューにするには、一体どうしたらいいのでしょうか。また、参考サイトは、親メニューの部分だけが画像で、子メニュー部分は全てテキストになっていますが、この、子メニューも画像で入れ子のドロップダウンメニューを作成することは可能でしょうか？分かりにくい質問で申し訳ございません。よろしくお願い致します。
- 締切済み
- JavaScript
ドロップダウンメニュー
以下のサイトで、 http://www.sakura.ne.jp/ 「レンタルサーバー」「VPS」と書かれているところのメニュー（ドロップダウンメニュー？）を作りたいのですが、同じような動きをするjQueryなどのライブラリをご存知の方、いらっしゃったら教えていただければありがたいです。よろしくお願いします。
- ベストアンサー
- JavaScript
CSSのドロップダウンメニューが見出しで切れる
CSSでドロップダウンメニューを作りました。ページの上部に横並びの状態です。メニューを押すと下に4項目程度のリストが下がってきます。今まで本文の見出しには<h1>タグを使用せず画像でのみで作っており、リストには影響がありませんでした。 <h1>を使用しCSSで装飾したところ、ドロップダウンメニューの<h1>にかぶる部分が切れてしまいます。解決策はありますでしょうか。宜しくお願い致します。
- ベストアンサー
- CSS
ドロップダウンメニュー
http://www.microsoft.com/japan/ ↑のページの右上の方にある、マウスカーソルを持っていくとドロップダウンメニューが表示される方法を知りたいのですが、どなたか教えてもらえませんか？ JavaScriptで実現できるのかどうかも分かっていないので、もしかするとこのカテゴリへの投稿も間違っているかもしれませんが・・・。宜しくお願いします。
- ベストアンサー
- JavaScript
WindowsXPライクなドロップダウンメニュー
windows osのようなプルダウンメニューをウェブページのナビゲーションとして再現したいです。 windows osのようなプルダウンメニューとはファイルメニュー -> 新規作成　というようなアレです。特に欲しい機能としては、プルダウンメニューを表示している状態でメニュー外の部分をクリックすると、プルダウンメニューが閉じるという動きです。 javascript プルダウンメニュー　で検索するとそれらしいメニューのサンプルはでてきますが、そういうのは見つかりませんでした。。 WindowsXPライクなドロップダウンメニューのADxMenuというツールを発見したのですがリンク先を見ると、webページがみれません。このサイトは無くなってしまったのでしょうか。。また代替ページか似たようなツールはないでしょうか。意味不明でしたら加筆修正しますのでよろしくお願いします。
- 締切済み
- JavaScript

ドロップダウンメニューについて