Mozillaのプルダウン型ナビゲーションバーの解析・CSS編

css image replacement

firefox 3.5をダウンロードした時に、 http://mozilla.jp/ のナビゲーションバーの作りが気になったので、解析してみた際のメモ。

基本的に、cssの:hover疑似クラスに対応しているWebブラウザの場合（IE以外）、CSSだけで対応が可能。

親メニューの見た目

よくある text-indent:-9999pxによる画像置換と、background-positionによるマウスオーバー時の画像ずらし

サブメニューの配置

  • 親メニューをposition: relative, 子メニューをposition: absoluteで指定。
    • 子メニューをleft: 0にすると、親メニューと左端が揃う。
    • absoluteなので、子メニューのwidthが親より長くても親が拡張しない。
  • 親メニューのheight分、子メニューのtopでずらす
  • 子メニューを角丸対応するために、背景画像をbottomで指定している。

サブメニューの隠し方

#gnav ul ul のleft: -9999px;で、通常時はサブメニューを隠す。

マウスオーバー時の再表示のしかた

CSSの最大の肝。
#gnav ul li:hover a や、 #gnav ul li:hover ul という記述によって、親メニューでマウスオーバーした状態での子メニューの挙動を表現している。

親メニューでマウスオーバーした際に、left : 0;でサブメニューを復元。

なお、#gnav ul li:hover a や、#gnav ul li:hover ulの代替として、#gnav ul li.hover a や、#gnav ul li.hover ul が記述されている。
これらの設定は、javascriptによるマウスオーバーに使用している。

不明点

子メニューの背景画像として header-nav-menu-backgrounds.png が用いられているが、これに不自然な空白がある。
どのような意味があるのか理解出来なかった。