CSSについて。下記の質問の続きです。

http://q.hatena.ne.jp/1285591626

http://www.dynamicdrive.com/dynamicindex1/ddsmoothmenu.htm
URLの一番上メニューを参照ください。

■Item1にカーソルを持っていった時、背景色が黒に変わります。背景色を赤にしたい場合はどこで設定すればいいのでしょうか?

■Folder0にカーソルを持っていった時、背景色が黒になる。背景色を黄色にしたい。同時にSub Item 1.1、Sub Item1.2がドロップしてくる。ドロップダウンした背景色を緑にしたい。さらに、Sub Item 1.1にカーソルをあてた時に、背景色が黒に変わるが、青色にしたい。さらに文字色をピンクにしたい。

■全体の高さ(Height)を手で設定したい。

■Item1、Folder0などの幅を手で設定したい。

■高さ、幅などを各項目ごとに設定するには、Classを使用すると思うので、<li class="Item1"><a href="x.html">Item1</a></li>などのように設定されているものとする。

■.ddsmoothmenu ul li a:link, .ddsmoothmenu ul li a:visitedと二つに分かれているが、この2つはそれぞれどういった違いがあるのでしょうか?

よろしくお願いします。

回答の条件
  • 1人2回まで
  • 13歳以上
  • 登録:2010/09/28 12:59:00
  • 終了:2010/09/30 23:16:19

ベストアンサー

id:kaz No.1

kaz回答回数200ベストアンサー獲得回数422010/09/28 14:21:53

ポイント300pt

それぞれ、個別指定が必要なものは質問文にある指定があるものとします。


■Item1にカーソルを持っていった時に背景色を赤に

.ddsmoothmenu ul li.Item1 a:hover {
background: #ff0000;
}

■Folder0にカーソルを持っていった時、背景色を黄色に

上記と同様です


■Sub Item 1.1、Sub Item1.2 の背景を緑に

▼個別にピンポイントで変えたい場合

上記と同様です


▼サブメニュー全ての背景を緑にしたい場合

.ddsmoothmenu ul li ul li a {
     ・
     ・
background: #00ff00; ← 追加
}

▼Folder 0 のサブメニューだけ緑にしたい場合

HTML 側
<li><a href="#">Folder 0</a>
  <ul>
               ↓
<li><a href="#">Folder 0</a>
  <ul class="menusub-folder0">
CSS 側
.ddsmoothmenu ul li ul.menusub-folder0 li a {
background: #00ff00;
}
※この指定を行った場合、色を変えたサブメニューにカーソルを乗せた際の設定は
 .ddsmoothmenu ul li ul.menusub-folder0 li a:hover で別途指定する必要があります。

■Sub Item 1.1にカーソルをあてた時、背景色を青色、文字色をピンクに

方法は最初と同様で、sub11 が付加されているものとして以下の通りです。

.ddsmoothmenu ul li ul li.sub11 a:hover {
background: #0000ff;
color: #ff66ff;
}

■全体の高さ(Height)を手で設定する

これにはいくつかのアプローチがありますが、

高さを直接指定した場合 IE 対策が面倒なため、以下の方法が簡単です。

高さではなく、文字と上下の隙間を指定します。

.ddsmoothmenu ul li a{
     ・
     ・
padding: 8px 10px;
     ・
}

    ↓ 上記 CSS 設定にある padding の前側の数字を増やす

.ddsmoothmenu ul li a{
     ・
     ・
padding: 13px 10px;
     ・
}

■Item1、Folder0などの幅を手で設定する

これも高さと同様、幅を直接指定せず隙間を指定した方が簡単です。

ただし、スクリプトにより、

サブメニューがある項目の HTML に直接 padding が付加されるため、

それを無視するために !important を追加する必要があります。

また、指定する幅によっては、右側の ▼ の隙間に違和感が出るため、

その場合 class を付加し、別の幅の padding を指定する必要があります。

※その際「padding: 8px 25px 8px 15px !important;」のように

 左と右のパディングを別々に指定した方がよいかもしれません

※padding は、いくつ数字を書くかによって指定が変わります。

 padding: 10px; 1つだけの場合:上下左右同じ数値

 padding: 5px 10px; 2つの場合:最初の数字が上下、次が左右の数値

 padding: 5px 10px 8px; 3つの場合:最初の数字が上、次が左右、最後が下の数値

 padding: 5px 8px 10px 2px; 4つの場合:順番に上・右・下・左(時計回り)の数値

.ddsmoothmenu ul li a{
     ・
     ・
padding: 8px 15px !important; ← 今度は右側の数字を増やす
     ・
}
※ピンポイントに設定する場合は「.ddsmoothmenu ul li.Item1 a」などで個別指定

■.ddsmoothmenu ul li a:link, .ddsmoothmenu ul li a:visited の意味

前者はまだ表示した事がないページへのリンク、

後者は既に表示した事があるページへのリンクに関する設定です。

両者を「,」で繋いで同じ指定をする場合、

そのリンクを未訪問でも既訪問でも同じ外観にする、という事です。

id:akaired

回答ありがとうございます!!大変参考になります。もう一つ同じような質問があります。答えて頂けると幸いです。次で質問いたします。

2010/09/30 21:15:51

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません