CSSで縦メニューを作りたい

質問

CSSを使って画像1のような縦メニューを作ろうとしていますが上手くいかず、検索をしてもお手本になるような作り方を探し当てることができずに困っています。要素としては、枠はsolidの1px、リンクは枠内のどこでもクリックでき、枠内の色は交互に変えるといった感じです。お分かりの方いましたら教えていただけると嬉しいです。よろしくお願いします。

回答No.3

ORUKA1951 · ベストアンサー

相手にしたいことを伝えるというのは難しいですね。
たぶん、縦に並んだ箱型のリンクボタンを作りたいということかな？
　ならとっても簡単です。横に並べるより、はるかに簡単です。
「交互に色を変える」というのが、添付されている図がそうでないため、意図がわかりませんが、ひょっとして、未訪問、訪問済み、フォーカス、アクティブで色を変えたいということですか？
　それとも上から順番にピンク、肌色、クリーム、黄緑、水色としたい？

　下記HTMLとCSSは後者です。この程度のきわめて簡単なHTMLとCSSですみます。子孫セレクタを使っていますので、詳細度の差がつくため自動的に上書きされます。
　HTML自体は
<ul class="nav">
<li><a href="">リンク1</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>
</ul>
　くらいですかね。class="nav"は、ナビゲーションリンクを示すクラス名がつけてあります。HTML5の場合は<nav>でよい。
　この場合CSSは、下のようになります。8段まで対応しています。
ul.nav,ul.nav li{list-style:none;display:block;margin:0px;padding:0px;width:200px;}
ul.nav li{height:60px;border:solid 1px red;}
ul.nav li a{display:block;width:100%;height:100%;text-align:center;line-height:60px;}
ul.nav li+li+li+li+li+li+li+li{background-color:rgb(255,200,255);}
ul.nav li+li+li+li+li+li+li{background-color:rgb(225,200,255);}
ul.nav li+li+li+li+li+li{background-color:rgb(200,200,255);}
ul.nav li+li+li+li+li{background-color:rgb(200,220,255);}
ul.nav li+li+li+li{background-color:rgb(220,255,225);}
ul.nav li+li+li{background-color:rgb(255,255,200);}
ul.nav li+li{background-color:rgb(255,225,200);}
ul.nav li{background-color:rgb(255,200,180);}

お礼

インフルエンザにかかってしまってお返事が遅れてしまいました。こちらを参考にメニューを作らせてもらいました。ありがとうございました(^^)

回答No.4

ORUKA1951

子孫セレクタでなく隣接セレクタでした。

回答No.2

naokita

「グローバルメニュー　CSS」
などで検索したら山ほど出てくるはずですが・・・
作り方も山ほど方法がありますが、

<ul><li class="lia1"><a href="">テキスト</a></li><li class="lia2"><a href="">テキスト</a></li><li class="lia3"><a href="">テキスト</a></li><li class="lia4"><a href="">テキスト</a></li></ul>

ul,li{ margin:0; padding:0;}
li{ list-style:none; width:180px; border:1px solid gray;}
li.lia1,li.lia2,li.lia3{ border-bottom:none;}
li.lia2,li.lia4{ background-color:#F0FFFF;}
li a{ display:block; padding:.5em 0 .5em 1em; text-decoration:none; color:maroon;}
li a:hover{ padding-left:1.2em; color:blue; background:#FFF8DC;}

/* 画像を入れるなら、li か a に */
li{ background: no-repeat 0 50%;}
li.lia1{ background-image:url(画像.gif);}
li.lia2{ background-image:url(画像.gif);}
li.lia3{ background-image:url(画像.gif);}
li.lia4{ background-image:url(画像.gif);}

お礼

インフルエンザにかかってしまいお返事が遅れてすみません。今回頂いたヒントも今後の参考にさせていただきます。ありがとうございました(＾＾)

回答No.1

DrFell

縦メニューを作ろうとしていますが上手くいかず……なら、上手くいかない、htmlとcssのソースを教えてください。やりたいことが明確でわざわざ書いているということはわからないのかな？と想像してヒントをあげてみるので自分で組み立ててみてください。

枠はsolidの1px、border:1px solid #DDD;
リンクは枠内のどこでもクリックでき、display:block;
枠内の色は交互に変えるclassで交互に区別しbackgroundを変える

検討を祈る！

お礼

インフルエンザにかかってしまいお返事が遅れてすみません。今回頂いたヒントも今後の参考にさせていただきます。ありがとうございました(＾＾)