CSSの擬似クラス「:hover」で作るちょっと変わったメニュー
IE7の大きな進歩の1つといえば、a要素以外にも:hover擬似クラスが指定できるようになったこと。では、これを使ってどんなWebデザインができるのかについて3つの事例を調べてみました。
CSS hover effect | Veerle's blogより。
サンプルはKansas City Homes for Sale | Prudential Kansas City Real Estateの真ん中あたりのタブです。タブ内にマウスを持っていくと背景色が変わると思います。
これを作るためには、次の2つの画像を用います。
コードはこんな感じです。解説はCSSのコメントと一緒に書いておきました。ちなみに、事例の3つとも画像置換を使っていますが、その説明は省略しています。
<h2>4 different ways to find your Kansas City Homes for Sale</h2> <ul id="differences"> <li id="diff-1"> <h3><em>1</em>See all MLS homes like an insider?join us</h3> <div><p><a href="benefits.html">Join us </a> and see <strong>2,207</strong> additional homes, e-mail updates, and free custom website.</p></div> </li> <li id="diff-2"> <h3><em>2</em>What is my house worth?</h3> <div><p>Find the <a href="/" title="empty">value of your home</a> from any of our agents with our competitive market analysis.</p></div> </li> <li id="diff-3"> <h3><em>3</em>Google™ search Kansas City area homes in MLS</h3> <div><p><a href="/" title="empty">Search virtually all MLS homes</a> in the greater Kansas City area by using Google™.</p></div> </li> <li id="diff-4"> <h3><em>4</em>Map Kansas City real estate in Google™ maps </h3> <div><p> <a href="cma.html" title="empty">See the location</a> of all Kansas City real estate with Google™ maps?map or satellite views.</p></div> </li> </ul>
/* ブラウザのul要素のデフォルトスタイルをリセットし、floatでマージンの相殺を防ぐ。 */ ul#differences { margin:0.5em 0 1.5em 0; padding:0; list-style:none; width:100%; float:left; } /* li要素をfloatし横並びにする。さらに、背景画像（上部）を読み込む。 */ ul#differences li { margin:0 18px 0 0; padding:0; float:left; background:url(diff-tabs-top-wide.gif) no-repeat 0 0; } /* 4つ目の最後のli要素のみ右マージンを取らないように0に設定する。 */ ul#differences li#diff-4 { margin-right:0; } /* li要素の子要素のdiv要素に背景画像（下部）を指定する。 */ ul#differences li div { font-size:0.94em; padding:6px; background:url(diff-tabs-bottom-wide.gif) no-repeat 0 100%; } /* li要素にマウスオーバーすると、背景画像（白色）が右側にスライドし、 背景画像（ピンク色）が表示される。 */ ul#differences li:hover { background-position:-156px 0; } ul#differences li:hover div { background-position:-156px 100%; } /* 以下はli要素のボックスの幅指定。 */ ul#differences li div p { width:145px; } ul#differences li h3 { margin:0 0 0 5px; width:145px; } /* h3要素直下のem要素をblockレベルに変換する。 */ ul#differences h3 em { display: block; }
Advanced CSS Menuより。
サンプルはAdvanced CSS Menu | by Web Designer Wallにあります。画像にマウスオーバーで画像に文字などが入ります。
これを作るためには7つの画像が必要です。便宜上、1つにまとめた画像を上げておきます。
さて、さっそくコードです。
<ul id="menu"> <li><a href="#" class="home">Home <span></span></a></li> <li><a href="#" class="about">About <span></span></a></li> <li><a href="#" class="rss">RSS <span></span></a></li> </ul>
/* ul要素のブラウザのデフォルトスタイルをリセットする。position:relative;を指定する。 その上で、背景画像を読み込み、widthとheight同サイズで指定する。 */ ul#menu { list-style: none; padding: 0; margin: 0; width: 774px; height: 210px; background: url(images/menu-bg.jpg) no-repeat; position: relative; } /* display:none;で要素を消す。また、position:absolute;を指定する。 */ ul#menu li span { display: none; position: absolute; } /* text-indentでテキストをウィンドウ外に飛ばし、見えなくする。 また、a要素をblockレベルに変換。 position:absolute;も指定。outlineの指定の意味は分からない。 */ ul#menu li a { display: block; text-indent: -900%; position: absolute; outline: none; } /* マウスオーバー時に、各li要素の左下の背景画像（文字にラインが入っているもの） が表示されるようにする。 */ ul#menu li a:hover { background-position: left bottom; } /* マウスオーバー時に、span要素をブロック要素に変換する。 */ ul#menu li a:hover span { display: block; } /* homeというclass属性が与えられたa要素にwidthとheightを指定する。 既にul#menu li aに対してdisplay:block;を指定しているので、leftとtopに座標を指定する。 その上で、手書きっぽい"Home"という画像を背景画像として読み込む。 */ ul#menu li a.home { width: 144px; height: 58px; background: url(images/home.gif) no-repeat; left: 96px; top: 73px; } /* マウスオーバー時に手書きっぽい"Go to Home"と書かれた画像が読み込まれる （ul#menu li a:hover spanを参考）。更に、leftとtopに座標を指定する。 ネガティブマージンを使いるのは、"Home"という背景画像の上部に この"Go to Home"という画像を表示するため。 */ ul#menu li a.home span { width: 86px; height: 14px; background: url(images/home-over.gif) no-repeat; left: 28px; top: -20px; } /* 上記の1つ目のメニュー（Home）以外のメニューにも同様のルールを適用する。 */ ul#menu li a.about { width: 131px; height: 51px; background: url(images/about.gif) no-repeat; left: 338px; top: 97px; } ul#menu li a.about span { width: 40px; height: 12px; background: url(images/about-over.gif) no-repeat; left: 44px; top: 54px; } ul#menu li a.rss { width: 112px; height: 47px; background: url(images/rss.gif) no-repeat; left: 588px; top: 94px; } ul#menu li a.rss span { width: 92px; height: 20px; background: url(images/rss-over.gif) no-repeat; left: 26px; top: -20px; }
Advanced CSS Menu Trick - Web Design Marketing Podcast & Blogより
サンプルはAdvanced CSS Navigation Menu Exampleにあります。メニューにマウスオーバーすると、それ以外のメニューがぼかしの入った画像に変わります。
画像はそれぞれメニュー分必要なのですが、とりあえず2つ置いておきます。
さて、コードです。
<ul id="main_nav"> <li><a href="http://www.hogehoge.com/" id="home" class="active">Home Page</a></li> <li><a href="http://www.hogehoge.com/" id="about">About Us</a></li> <li><a href="http://www.hogehoge.com/" id="webdesign">Web Design</a></li> <li><a href="http://www.hogehoge.com/" id="graphicdesign">Graphic Designs</a></li> <li><a href="http://www.hogehoge.com/" id="seo">Search Engine Optimization SEO</a></li> <li><a href="http://www.hogehoge.com/" id="contact" >Contact Us</a></li> </ul>
/* ul要素のブラウザのデフォルトスタイルをリセットする。 */ ul#main_nav { list-style: none; margin: 0; padding: 0; } /* li要素を横並びにするためにfloatを指定する。 */ ul#main_nav li { float: left; } /* li要素の子要素のa要素をblockレベルに変換する。 text-indentでテキストをウィンドウ外に飛ばす。 各画像のwidthは違うが、heightは同一なので、ここではheightのみ指定する。 */ ul#main_nav li a { text-indent: -999999px; overflow: hidden; display: block; height: 72px; } /* "Home"画像を背景画像として読み込む。widthを指定し、リンク領域を広げる。 */ ul#main_nav li a#home { background: url(home.gif); width: 103px; } /* "Home"画像をマウスオーバーした際は文字が白色の画像を表示する。 !importantは下記のul#main_nav:hover li a#homeを上書きするため。 */ ul#main_nav li a#home:hover { background: url(home.gif) 0 0 !important; } /* "Home"画像にactiveというクラス名を指定する場合は、 文字が黒色の画像を表示するように、"Home"画像をスライドさせる。 */ ul#main_nav li a#home.active { background: url(home.gif) -103px 0; } /* ul要素にマウスオーバーするが、"Home"画像にマウスオーバーしていないときは、 ぼやけた画像を表示するように、"Home"画像をスライドさせる。 */ ul#main_nav:hover li a#home { background-position: -206px; } /* 下記の指定は上記"Home"画像の指定を"About"画像にも適用する。 */ ul#main_nav li a#about { background: url(about.gif); width: 121px; } ul#main_nav li a#about:hover { background: url(about.gif) 0 0 !important; } ul#main_nav li a#about.active { background: url(about.gif) -121px 0; } ul#main_nav:hover li a#about { background-position: -242px; }
ここまで書いて、2つ目の事例は:hover擬似クラス使ってないじゃんってことに気が付いたのですが、まあご愛嬌。HTMLの構造をよく見てみると多少トリッキーな感じもしますが、Webデザインの幅を広げておくには知っておいてもよいのではないかと思います。ただ、繰り返しになりますが、上記のテクニックは全てIE6では使えません（2つ目の事例も含め）。
