はじめまして。
cssのみを使ってプルダウンするメニューを作ろうとしているのですが、上手くいきません。
コードとcssは以下です。
aboutにロールオーバーすると子孫リストがプルダウンする、というようにしたいです。
.main li .sub{
visibility:hidden;
}
で子孫リストは消えるものの、
.main li : hover .sub{
visibility:visible;
}
と設定しても現れてくれません。
どうすれば上手くいくでしょうか。
すみませんがよろしくお願いします。
・html
<nav class="common_width">
<ul class="main">
<li><a href="#">profile</a></li>
<li><a href="#">about</a>
<ul class="sub">
<li><a href="#">profile</a></li>
<li><a href="#">blog</a></li>
<li><a href="#">itai</a></li>
</ul>
</li>
<li><a href="#">test</a></li>
</ul>
</nav>
・css
li{
list-style:none;
}
.common_width{
width:900px;
margin:0 auto;
}
a {
color: #000;
text-decoration: none;
transition: background 0.3s ease 0s, color 0.3s ease 0s;
}
/*全部のリスト*/
nav li{
width:150px;
}
/*直下のul*/
nav > ul{
width:650px;
margin:0 auto;
overflow:hidden;
}
/*直下のリスト*/
nav .main li{
float:left;
color: #9f9f9f;
position: relative;
margin-left:100px;
}
nav .main li:first-child{
border-left:none;
margin-left:0px;
}
nav ul>li a{
padding:10px 0 10px 0 ;
background-color: #ccc;
display: block;
text-align: center;
line-height:1;
}
nav li:hover > a{
color: #fff;
background-color: #000;
}
.main li .sub{
visibility:hidden;
}
.main li : hover .sub{
visibility:visible;
}
nav ul li a:hover{
color: #fff;
display:block;
background-color: #000;
}
nav .sub li {
font-size: 12px;
color:#fff;
border-top:1px dotted #fff;
text-align:center;
margin-left:0px;
}
No.3ベストアンサー
- 回答日時:
文法的なことはさておいて、気になる点が2つ。
1. liとhoverの間の:(コロン)の両端に余分な半角スペースがありますが、コピペしたとしたら、これでは動作しません。
.main li : hover .sub{
visibility:visible;
}
2.display:noneではなく、visivility:hiddenにするのはなぜでしょう。
html/cssに慣れていない方全般に言えることですが、ブラウザには標準で強力な開発ツールがついています。開発ツールの使い方を覚えれば、今回のレベルの質問はほぼなくなると思います。
この回答への補足
ご回答ありがとうございます。
chromeのデベロッパーツールを使用することはあるのですが、エラーの原因が分からなかった場合に見て貰える人もいないので、中々抜け出せないのが正直なところです...
文法的なこと、というのも気になるのですが、ご指摘があった2点についてです。
1,
「可読性のため」と思って安易に半角スペースを入れていましたが、これが原因だったんですね...
2,
参考にしたサイトがvisivilityで設定していたので、そのまま使用していました。
プルダウンメニューを用いるときはdisplayで設定するのが一般的なのでしょうか?
No.6
- 回答日時:
No.1,2,4です。
>詳細度が高くなる&他の人が見やすいことを考えると、ul li ul li の方が良いかもしれませんね。
・HTMLに文書構造だけ記述すればよいので
HTMLが簡素で分かりやすくなりメンテナンス性が向上する。
(例)
<div class="left">と書いていて将来右に置きたくなったら??
同じものを<div class="nav">だとどうにでもなる。
検索エンジンもnavのclass名は理解してくれる。
詳細度を含むカスケーディングの仕組みはCSSの命ともいえる仕組みですが、詳細度は後からついてくるものです。そのためにじゃない。
div.nav ol,div.nav ol li{list-style:none;margin:0;padding:0;}
とすると、そのHTML内のナビゲーションリストはすべてブロックでmarginもpaddingも0になる。
そのうえで、div.header div.nav ol li{display:inline-block;width:20%;}で、div.header(ヘッダブロック)内(半角スペースの子孫セレクタ)のナビげーョンとなるし、div.section div.nav{width:20%;position:absolute;top:0;left:0;position:absolute;}
div.section div.nav ol li{width:100%;}
とすれば、本文内のナビゲーションリストは左に配置される。
HTMLにデザインのためだけに、classやidを使わないほうが、楽になるのです。
>floatについては画像周囲にテキストというより、右と左に要素を分けるという認識でしたので、
これは、最初のカスケーディングスタイルシートCSS1.0では、inline-blockがなかったために、やむなくfloatを使用していた痕跡です。
今はIE7以前のブラウザは無視してよいですから、floatじゃなくinline-blockを使う。
※デザインのためにHTMLを書かずに様々にデザインする例
⇒ナビゲーションリストを様々にデザインしてみよう。( http://www.ichiya.com/WebService/Howto/sample/HT … )
代替スタイルシートに対応したブラウザ--google Chrome以外)で、[表示]→[スタイル(シート)]に進んで、他のスタイルを選択したり、印刷プレビューで印刷を確認してご覧なさい。スタイルシートなしやLynxブラウザで見ると検索エンジンがどう見ているかも分かります。
スタイルの変更はクラスの中身のことだと思っていましたが、
クラスの名前のことも含めてだったんですね。
アドレス先でのスタイルの変更をしてみると、同じ構造でありながら柔軟に見た目が変化して
驚きました。
今後は以前よりも構造を意識しながらcssを書いていこうと思います。
どうもありがとうございました。
No.5
- 回答日時:
> 参考にしたサイトがvisivilityで設定していたので、そのまま使用していました。
> プルダウンメニューを用いるときはdisplayで設定するのが一般的なのでしょうか?
どちらが一般的で、どちらが正解ということではないです。
display:noneとvisivility:hiddenの違いを調べていただければ、その時々でどちらが必要かは明白です。
visivility:hiddenは、非表示でありつつも表示領域が確保されるわけですが、今回のドロップダウンにその領域確保が必要かどうかということです。状況によりけりなのでなんとも言えませんが、多くの場合、必要のない表示領域は不具合を発生させます。
この回答への補足
なるほど、場合によって使い分けるということですね。
visiblity:hiddenでは見えない領域ができるので、余白スペース(プルダウンメニューと本文との余白)を確保したいときはdisplay:none と margin もしくは paddingを併用しながらするのがいいように思いました。
No.4
- 回答日時:
No.2です。
★半角スペースは子孫セレクタ
★基点セレクタがない場合は*(全称セレクタ)が省略されていると見なす。
li{} 要素セレクタ 詳細度 [0,0,0,1]
.common_width{} クラスセレクタ 詳細度[0,0,1,0]
この書き方はCSS1、CSS2では、*.common_width{}と判断される。
★nav.common_width{}
a {} 要素セレクタ 詳細度 [0,0,0,1]
nav li{} 要素セレクタ(子孫セレクタ)要素セレクタ 詳細度[0,0,0,2]
nav>ul{} 要素セレクタ(子供セレクタ)要素セレクタ 詳細度[0,0,0,2]
★この場合は半角スペースは無視されるが、書かないほうが良い
nav .main li{} 要素セレクタ(子孫セレクタ)クラスセレクタ)子孫セレクタ)
詳細度[0,0,1,2]
★nav ul.main li{}
nav .main li:first-child{}
要素セレクタ(子孫セレクタ)クラスセレクタ(子孫セレクタ)擬似クラス
詳細度[0,0,2,2]
★nav ul.main li:first-child
nav ul>li a{}
要素セレクタ(子孫セレクタ)要素セレクタ(子供セレクタ)要素セレクタ(子孫セレクタ)要素セレクタ
詳細度[0,0,0,4]
nav li:hover>a{}
要素セレクタ(子孫セレクタ)要素セレクタ(擬似クラスセレクタ)(子供セレクタ)要素セレクタ
詳細度[0,0,1,3]
★半角スペースは書かないほうが良い。他と整合性が取れない。
.main li .sub{}
クラスセレクタ(子孫セレクタ)要素セレクタ(子孫セレクタ)クラスセレクタ
詳細度[0,0,2,1]
★本来は、*.main li *.sub詳細度[0,0,2,1]
または、ul.main li dnav.sub 詳細度[0,0,2,3]
.main li : hover .sub{}
クラスセレクタ(子孫セレクタ)要素セレクタ(子孫セレクタ)不明×・・
ul.main li:hover ul.sub とかになるはず。
以下省略
見よう見まねでセレクタ、HTML書いては失敗します。
header nav ul li{}
header nav ul li ul li{}
で特定できるものを無駄なclassを書いたり、セレクタ書いたから分からなくなる。
↑だったら、headerないのnavの子孫のulの子孫のliだと誰が見ても分かる。
HTML/CSSの仕様書を読んでみることをお勧めします。
>>>HTMLをデザインのために書いたらダメ
>という意味がよく分からなかったのですが、ulにクラスを使わないように、ということでしょうか?
そうです。
「DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加する( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )」はDIVやSPANに限らず、いえることです。セレクタを理解していれば、無駄なclassは書く必要がないはずです。
inline-blockを使用しているのは、floatでは中心に来ないことが最大の理由です。inline-blockだと、少し小さめにして中央に並べることができて、崩れることも少ないから。そもそもfloatは、画像の周囲にテキストを回りこませるための仕組みで、本来の用途ではない。すでにfloatで画像などが配置してある文中に横並びメニューを置こうとしたら困るでしょ。本来の用途に反する使い方はしないほうが無難です。
この回答への補足
nav ul li ul li
と書くよりも自分の中ではクラスを指定して書く方がすっきりして理解しやすかったので、そうしていました。
詳細度が高くなる&他の人が見やすいことを考えると、ul li ul li の方が良いかもしれませんね。
floatについては画像周囲にテキストというより、右と左に要素を分けるという認識でしたので、cssの仕様書を読んで勉強したいと思います。
No.2
- 回答日時:
>>HTMLをデザインのために書いたらダメという意味がよく分からなかったのですが、
2.4.1 構造とプレゼンテーションの分離( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )
>何が原因で僕のコードは上手く機能しないのかを
セレクタの書き方が間違っている。
★半角スペースは子孫セレクタ
★基点セレクタがない場合は*(全称セレクタ)が省略されていると見なす。
Selectors - CSS 2.1 spec (ja)( http://momdo.s35.xrea.com/web-html-test/spec/CSS … )
ありがとうございます。
コードも無事に直りました。
リンク先を拝見しましたが、僕の知識量ではCSSを書いて設定することを言ってるのかな、と思った限りで...
真意に辿り着けているかは定かではないのですが、教えていただきありがとうございました。
No.1
- 回答日時:
<div class="nav">
_<ul>
__<li><a href="/">Top</a></li>
__<li><a href="/">Books</a>
___<ul>
____<li><a href="/Books/1">Book1</a></li>
____<li><a href="/Books/2">Book2</a></li>
___</ul>
__</li>
__<li><a href="/Products">Products</a>
___<ul>
____<li><a href="/Products/1">Products1</a></li>
____<li><a href="/Products/2">Produc</a></li>
___</ul>
__</li>
__<li><a href="/ContactUs">ContactUs</a>
___<ul>
____<li><a href="/ContactUs/form">Form</a></li>
____<li><a href="/ContactUs/info">Information</a></li>
___</ul>
__</li>
_</ul>
</div>
として基本形は
div.nav ul,div.nav ul li{
list-style:none;
margin:0;padding:0;font-size:0;
position:relative;
line-height:30px;
text-align:center;
}
div.nav ul{width:80%;font-size:0;margin:0 auto;}
div.nav ul li{display:inline-block;width:20%;font-size:16px;}
div.nav ul li ul{width:100%;display:none;position:absolute;top:30px;left:0;}
div.nav ul li ul li{display:block;width:100%;}
div.nav ul li:hover ul{display:block;}
div.nav ul li a{display:block;width:100%;height:100%;background-color:yellow;}
div.nav ul li a:hover{background-color:orange;}
かな・・ニ階層だろうが三階層だろうがお好きに。
HTMLをデザインのために書いたらダメです。後でデザイン変えるとき困るし、そもそもHTMLもスタイルシートも煩雑でメンテナンスでできなくなりますよ。
ちなみにHTML5だと
<div class="nav">・・</div>が<nav>・・</nav>に変わるだけです。
※ナビゲーションリストを様々にデザインしてみよう。( http://www.ichiya.com/WebService/Howto/sample/HT … )
にて、[表示]→[スタイルシート]でスタイルシートを変更してみましょう。HTMLには文書構造しか書かれてないので好きにデザインできる。
この回答への補足
ご回答ありがとうございます。
>HTMLをデザインのために書いたらダメ
という意味がよく分からなかったのですが、ulにクラスを使わないように、ということでしょうか?
もしcssのことでしたら、外部から読み込んではいます。
回答して頂いたものと比較すると、floatではなくinline-blockを使用している点が大きく違うのかなと思っているのですが、何が原因で僕のコードは上手く機能しないのかを教えて頂けるととても有り難いです。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
関連するカテゴリからQ&Aを探す
おすすめ情報
- ・漫画をレンタルでお得に読める!
- ・人生のプチ美学を教えてください!!
- ・10秒目をつむったら…
- ・あなたの習慣について教えてください!!
- ・牛、豚、鶏、どれか一つ食べられなくなるとしたら?
- ・【大喜利】【投稿~9/18】 おとぎ話『桃太郎』の知られざるエピソード
- ・街中で見かけて「グッときた人」の思い出
- ・「一気に最後まで読んだ」本、教えて下さい!
- ・幼稚園時代「何組」でしたか?
- ・激凹みから立ち直る方法
- ・1つだけ過去を変えられるとしたら?
- ・【あるあるbot連動企画】あるあるbotに投稿したけど採用されなかったあるある募集
- ・【あるあるbot連動企画】フォロワー20万人のアカウントであなたのあるあるを披露してみませんか?
- ・映画のエンドロール観る派?観ない派?
- ・海外旅行から帰ってきたら、まず何を食べる?
- ・誕生日にもらった意外なもの
- ・天使と悪魔選手権
- ・ちょっと先の未来クイズ第2問
- ・【大喜利】【投稿~9/7】 ロボットの住む世界で流行ってる罰ゲームとは?
- ・推しミネラルウォーターはありますか?
- ・都道府県穴埋めゲーム
- ・この人頭いいなと思ったエピソード
- ・準・究極の選択
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
HTML要素のid/class名の長さに...
-
「目次」と「サブ目次」のスタ...
-
htmlのid属性って必要なの?
-
CSSに同じclass名がいっぱい‥。...
-
cssでIEとFIREFOX(とchrome)の...
-
CSSでテキストリンクの色を複数...
-
liリストタグの背景色に色がつ...
-
クリッカブルマップにツールチ...
-
CSS/日本語のID・クラス名につ...
-
文字に綺麗な縁取りを
-
【VBA/HTML】IE画面内のページT...
-
<span>で2重にかけているものを...
-
スタイルシート/idの入れ子でid?
-
HTMLの送信ボタン、メール送信...
-
一部のリンクの下線を消す
-
HP作成(ワッパーを中心に)
-
表示するページ毎にhtml上のcla...
-
idの中のid指定
-
CSSで、IDとCLASSを...
-
正規表現の検索置換でdiv内のim...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
brにクラスをつけてcssでdispla...
-
HTML要素のid/class名の長さに...
-
idの中のid指定
-
htmlのid属性って必要なの?
-
サイトにjQueryが使用されてい...
-
CSSのクラス名・ID名の指定でワ...
-
個別にリンクの色を変える方法
-
透過背景を解除するにはどうす...
-
liリストタグの背景色に色がつ...
-
子孫セレクタの読み方をおしえ...
-
CSSに同じclass名がいっぱい‥。...
-
最近、HTMLのヘッダーをIDで定...
-
外部css定義したclassをht...
-
CSS, リンクの色を一部変えるに...
-
リンク文字の 一部だけ色を変...
-
display:table-cell内でこんな...
-
htmlとcssで吹き出しの中に文字...
-
同ページ内でリンクの色を変え...
-
外部スタイルシートで定義した...
-
name属性とid属性
おすすめ情報