CSS だけで Mac OS X の Dock 風ナビゲーション

• Paul Armstrong Designs - Weblog - CSS

マウスオーバーした時にグニュって拡大する Mac OS X の Dock っぽい動きを CSS だけで実現させるってアイデア。このギミックがユーザビリティ的にどうかは置いておくとして、隣接セレクタを使ってフォントのサイズを段階的に変えるってのは面白いなぁ。試しに自分でもサンプルを作ってみた。ちなみに動作するブラウザがかなり限定されしまい、 隣接セレクタ未対応の IE はもちろん、Opera や Safari でもうまく動作しない。まぁほぼ Gecko オンリーって感じ。

対応ブラウザ

• Firefox 等の Gecko 系
• Internet Explorer 7 beta 2

テキストをズーム

• CSS だけで Mac OS X の Dock 風ナビゲーションのサンプル その 1

li {
  font-size: 1em;
}
  li:hover {
    font-size: 2em;
  }
    li:hover + li {
      font-size: 1.5em;
    }
      li:hover + li + li {
        font-size: 1.3em;
      }

当然のことながら、隣接セレクタは直後の要素へ対する指定しか出来ないんで、マウスオーバーしている要素の直前の要素は変化しない。それでも比較的それっぽく見える。調子に乗って、アイコンを使ってもっと Dock っぽいサンプルも作ってみた。

アイコンをズーム

• CSS だけで Mac OS X の Dock 風ナビゲーションのサンプル その 2

#dock li {
  float: left;
  list-style :none;
}
  #dock li img {
    width: 64px;
    height: 64px;
  }
    #dock li:hover img {
      width: 128px;
      height: 128px;
    }
      #dock li:hover + li img {
        width: 96px;
        height: 96px;
      }
        #dock li:hover + li + li img{
          width: 80px;
          height: 80px;
        }

img 要素を使ってるんだけど、画像サイズを width、height 属性での指定では無く、CSS でサイズ指定することで大きさを変化させている。あまり深く考えずに作ったんで、可変の原点が上側だけどなかなか良い感じ。