APPLE のサイトのナビゲーションバーの仕組み（CSS でロールオーバー） - minorio のプログラミング・メモ
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
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://www.dynamicdrive.com/style/csslibrary/category/C1/
http://www.dynamicdrive.com/style/csslibrary/item/css_indent_menu/