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

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

対応ブラウザ
  • Firefox 等の Gecko 系
  • Internet Explorer 7 beta 2

テキストをズーム

テキストにマウスオーバーでズーム

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 っぽいサンプルも作ってみた。

アイコンをズーム

アイコンにマウスオーバーでズーム

#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 でサイズ指定することで大きさを変化させている。あまり深く考えずに作ったんで、可変の原点が上側だけどなかなか良い感じ。

この記事についての情報

似た内容の記事

この記事に対するトラックバック

トラックバックURL: http://www.lucky-bag.com/mt/mt-tb.cgi/41

俺なりのたわごと - Lightbox JS v2.0でサムネール画像をDock風にカスタマイズ (2006年9月14日 00:12)

先日導入した Lightbox JS v2.0をもう少しカスタマイズしてみた。 lightbox.cssに以下を追加。 img.lightbox-img{... 続きを読む

AUSGANG SOFT - Greasemonkeyでランチャー (2006年11月27日 21:11)

 前回のGreasemonkeyでテキストエディタは思った以上に、反響があってビ... 続きを読む

沖縄からヨッシャー(=^^)9 - Mac OS XのDock風ランチャーRocketDock (2006年12月28日 13:11)

macを使ったことある方であれば、そのカッコイイ インターフェースに惚れ惚れしたことがあるのではないでしょうか。そんななかちょっとWINDOWSでMAC風... 続きを読む

Comments

bazuo said:

それっぽいですねー

IE7bでもそれなりに動くことを確認しました!
ので、報告。

e-luck said:

ご報告ありがとうございます。
実際は、ズームしている対象の後続のものしか大きさが変化してないのに、何となくそれっぽく見えるんですよねぇ :-)

蕗 said:

Opera8.5でもtext,img共に確認できましたよ~

e-luck said:

>Opera8.5でもtext,img共に確認できましたよ~

あれ、マジっすか。マウスオーバーしている要素のみ拡大されている感じじゃないですか? 後続要素はまったく変化してないかと。
ちょっと今 Opera8.5 で確認できる環境じゃないんで、アレなんですが。

TypeKey ID said:

ただあたったコマを大きくするだけじゃどうかなぁ
この程度はだれでも思いつくし苦労もいらない
左右3つのコマを追従させて変化させないとだめだよね