web関係、制作関係でのよしなしごとを書いています。
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>
しかし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("https://・・・/csshover3.htc");
}
初めまして。そして、ようこそ!京都でwebデザイナー、htmlコーダーをやっているackyです。
このサイトはでイラストレーションギャラリーとCSSのテクニックを紹介しています。
イラストレーションでは、主にF1やスーパースポーツ、モータースポーツをテーマにトレース技法で描いています。イラストのポイントは直線で構成したソリッドでシャープな質感です。
CSSテクニック、webの小技ではweb制作の時にちょっと役に立つようなCSSテクニックや、positionのrelative、absoluteの使い方、リスト(li)の横並びや、リスト(li)横並びの中央寄せ、フォームのチェックボックスやラジオボタンとテキストのずれを揃える方法、Photoshopのチャンネルを使った髪の毛の切り抜き方法、お気に入りアイコン(ファビコン、webアイコン)の作り方などを紹介しています。
(このサイトについて何がありましたら左記のアドレスからご連絡をお願いします)