APPLE のサイトのナビゲーションバーの仕組み（CSS でロールオーバー）
CSS だけで（JavaScript を使わずに）ロールオーバーさせる方法を学んだ。やり方はいくつかあるけど、もっともスマートな方法はやっぱりアップルが採用している方法かな。CSS を無効にしたときの画面も美しい。結局そういうコーディングが SEO 的にも最適だし。
文字は padding-top と overflow: hidden で見えないようにしているようだ。その上で hover したときに背景画像のポジションをスライドさせている。
#globalheader #globalnav li a
{
float: left;
width: 117px;
height: 0pt;
padding-top: 38px;
overflow-x: hidden;
overflow-y: hidden;
}
#globalheader #globalnav li a, #globalheader #globalsearch
{
background-image: url(http://images.apple.com/global/nav/images/globalnavbg.png);
background-repeat: no-repeat;
}
#globalheader #globalnav li#gn-store a
{
background-x-position: 0pt;
background-y-position: 0pt;
}
#globalheader #globalnav li#gn-store a
{
background-x-position: -117px;
background-y-position: 0pt;
}
#globalheader #globalnav li#gn-store a:hover
{
background-x-position: -117px;
background-y-position: -38px;
}
#globalheader.store #globalnav li#gn-store a
{
background-x-position: -117px;
background-y-position: -114px;
}HTML はこんな感じで、id="globalheader" と class="store" を同時に指定して、クラスの方で現在表示中のページを識別している。
<div id="globalheader" class="store"> <ul id="globalnav"> <li id="gn-apple"> <a style="outline-color: rgb(255, 0, 0); outline-style: solid; outline-width: 1px;" href="/"> Apple </a> </li> <li id="gn-store"> <a href="http://store.apple.com"> Store </a> </li> <li id="gn-mac"> <a href="/mac/"> Mac </a> </li> ・・・ </ul> </div>
CSS ファイルには全ページ分の設定がずらっと並べて書かれている。
/* GLOBALHEADER */
#globalheader { width: 982px; height: 38px; margin: 18px auto; position: relative; z-index: 9998; }
#globalheader #globalnav { margin: 0; padding: 0; }
#globalheader #globalnav li { display: inline; }
#globalheader #globalnav li a { float: left; width: 117px; height: 0; padding-top: 38px; overflow: hidden; }
#globalheader #globalnav li a,
#globalheader #globalsearch { background-image: url(http://images.apple.com/global/nav/images/globalnavbg.png); _background-image: url(http://images.apple.com/global/nav/images/globalnavbg.gif); background-repeat: no-repeat; }
/* BUTTONS */
#globalheader #globalnav li#gn-store a { background-position: 0 0; }
#globalheader #globalnav li#gn-store a { background-position: -117px 0; }
#globalheader #globalnav li#gn-mac a { background-position: -234px 0; }
#globalheader #globalnav li#gn-ipoditunes a { background-position: -351px 0; }
#globalheader #globalnav li#gn-iphone a { background-position: -468px 0; }
#globalheader #globalnav li#gn-downloads a { background-position: -585px 0; }
#globalheader #globalnav li#gn-support a { background-position: -702px 0; }
/* OVER STATES */
#globalheader #globalnav li#gn-apple a:hover { background-position: 0 -38px; }
#globalheader #globalnav li#gn-store a:hover { background-position: -117px -38px; }
#globalheader #globalnav li#gn-mac a:hover { background-position: -234px -38px; }
#globalheader #globalnav li#gn-ipoditunes a:hover { background-position: -351px -38px; }
#globalheader #globalnav li#gn-iphone a:hover { background-position: -468px -38px; }
#globalheader #globalnav li#gn-downloads a:hover { background-position: -585px -38px; }
#globalheader #globalnav li#gn-support a:hover { background-position: -702px -38px; }
/* PRESSED STATES */
#globalheader #globalnav li#gn-apple a:active { background-position: 0 -76px; }
#globalheader #globalnav li#gn-store a:active { background-position: -117px -76px; }
#globalheader #globalnav li#gn-mac a:active { background-position: -234px -76px; }
#globalheader #globalnav li#gn-ipoditunes a:active { background-position: -351px -76px; }
#globalheader #globalnav li#gn-iphone a:active { background-position: -468px -76px; }
#globalheader #globalnav li#gn-downloads a:active { background-position: -585px -76px; }
#globalheader #globalnav li#gn-support a:active { background-position: -702px -76px; }
/* ON STATES */
#globalheader.home #globalnav li#gn-apple a:hover { background-position: 0 0; cursor: default; }
#globalheader.store #globalnav li#gn-store a { background-position: -117px -114px !important; }
#globalheader.mac #globalnav li#gn-mac a { background-position: -234px -114px !important; }
#globalheader.ipoditunes #globalnav li#gn-ipoditunes a { background-position: -351px -114px !important; }
#globalheader.iphone #globalnav li#gn-iphone a { background-position: -468px -114px !important; }
#globalheader.downloads #globalnav li#gn-downloads a { background-position: -585px -114px !important; }
#globalheader.support #globalnav li#gn-support a { background-position: -702px -114px !important; }
追記（2008.02.10）：
アップルのサイトを分析したらたまたまこういう技を使ってることを発見して真似してみたんだけど、これって、どうやらこの記事で扱われているのと同じ裏技だったみたい。
"複数の画像を一枚で表示できるジェネレーター -CSS Sprite Generator"
一般には「スプライト化」と呼ばれているみたいですが、Yahoo! や Google で使われているメジャーな技術だったんですね。スプライト化の真の目的はページの読み込みを早くすることだったみたいです。
最近ソースコードが公開されて、また話題になっていたようです。
ソースコード登場、CSSで画像分割 "CSS Sprite Generator"
