acky info

連絡先

tips

web関係、制作関係でのよしなしごとを書いています。

CSSテクニック

positionを使ったCSSテクニック

フォームに関するCSSテクニック

疑似クラスを使ったCSSテクニック

リストのCSSテクニック

tableに関するCSSテクニック

左寄せ、中央寄せ、右寄せのCSSテクニック

floatを使ったCSSテクニック

CSSで作るプルダウンメニュー

ads

2010/7/11 絶対パスの書き方を追記

マウスに反応するプルダウンメニューを作るにはJavascriptと組み合わせるという手法もありますが、疑似クラスの:hoverを使うことによりCSSだけでも可能です。
:hoverはCSS2以降aだけでなく全要素に適用できるようになりました。これをうまく使うことによりCSSだけでプルダウンメニューを作ることができます。

まずulとliで通常のメニューを作ります。次にliの中にulとliでメニューを入れ子にします。
cssで親になるul liにposition:relative;を指定し基準点を作り、子になるul li ulにposition:absolute;を指定し場所を調整します。
次に ul li ulをdisplay:none;で通常時は消し、ul liがhoverになった時にulがdisplay:block;で表示するようにします。

ul li{
position:relative;
display:block;
width:100px;
height:30px;
background:#999999;
}

ul li ul{
display:none;
}

ul li:hover ul{
display:block;
position:absolute;
top:0px;
left:100px;
}

ul li:hover ul li {
background:#666666;
}

<ul>
<li>トップ1
<ul>
<li>プルダウン1</li>
<li>プルダウン2</li>
<li>プルダウン3</li>
</ul>
</li>
<li>トップ2</li>
</ul>

  • トップ1
    • プルダウン1
    • プルダウン2
    • プルダウン3
  • トップ2

しかしIE6以前はaのhover以外は対応していないのでこのままでは動きません。そこでwhatever:hover からcsshover3.htcをダウンロードしIE独自タグで以下のように読み込むことによりIE6以前でもすべての要素でhoverを使うことができるようになります。
コードを読み込む際には、/始まるルートからのまたは、httpからの絶対パス絶対パスにするとリンクミスが減ります。相対パスで指定する場合はhtmlがある場所からの相対パスになります。CSSがある場所からではありません。
CSSのセレクタはbodyや該当するタグ、class、IDなどを指定します。

/からの絶対パス
ul { behavior: url("/csshover3.htc"); }

httpからの絶対パス
ul { behavior: url("http://・・・/csshover3.htc"); }

リストのCSSテクニック

疑似クラスを使ったCSSテクニック

Copyright (C) acky. All Rights Reserved.