スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

CSSだけで作ったMac Dock風のメニュー

CSSだけで作ったMac Dock風のメニューを紹介します。今までjQueryなんかを使って表現していましたが、CSS3なら簡単に作れちゃいます。再現度は高くないかもしれませんが。。

css3-macdacklike.png

ポイントはCSS3で追加された「transition」です。これがあれば動きにあるメニューは色々作れます。

transitionについて

transitionの使い方は以下のとおりです。

css3-transition.png

例によってIE8以下は「transition」に対応していませんのであしからず。

transitionは、まだ草案段階ですので、ベンダープレフィックスを付ける必要があります。

また、Firefoxでは一括して設定できないため、transition-property、transition-duration、transition-timing-functionを個別で指定する必要があります。

横バージョン

まずは横バージョンです。オンマウスでアイコンが大きくなります。

ちなみにアイコンは「Web2 Icons | Dirceu Veiga - Ilustrador and Icon Designer」にあったものを使わせていただいてます。サイズは128ピクセルのものです。

Twitter Digg FaceBook delicious Google Feed
HTML
<div id="dock-bottom">
<a href="#" title="Twitter"><img src="Twitter.png" alt="Twitter" /></a>
<a href="#" title="Digg"><img src="Digg.png" alt="Digg" /></a>
<a href="#" title="FaceBook"><img src="FaceBook.png" alt="FaceBook" /></a>
<a href="#" title="delicious"><img src="delicious.png" alt="delicious" /></a>
<a href="#" title="Google"><img src="Google.png" alt="Google" /></a>
<a href="#" title="FeedBurner"><img src="FeedBurner.png" alt="FeedBurner" /></a>
</div>
CSS
#dock-bottom {
	width:500px;
	text-align:center;
}
#dock-bottom img{
	width:64px;
	height:64px;
	border:0;
	-moz-transition-property: width, height,margin-top;
	-moz-transition-duration:0.2s;
	-moz-transition-timing-function:ease;
	-webkit-transition: all 0.2s ease 0 ;
	-o-transition: all 0.2s ease 0 ;
	margin-top:64px;
}
#dock-bottom img:hover{
	width:128px;
	height:128px;
	margin-top:0;
}
Twitter Digg FaceBook delicious Google Feed

縦バージョン

今度は縦です。position:fixed;で画面の左に固定しています。HTMLは一緒です。

HTML
<div id="dock-left">
<a href="#" title="Twitter"><img src="Twitter.png" alt="Twitter" /></a>
<a href="#" title="Digg"><img src="Digg.png" alt="Digg" /></a>
<a href="#" title="FaceBook"><img src="FaceBook.png" alt="FaceBook" /></a>
<a href="#" title="delicious"><img src="delicious.png" alt="delicious" /></a>
<a href="#" title="Google"><img src="Google.png" alt="Google" /></a>
<a href="#" title="FeedBurner"><img src="FeedBurner.png" alt="FeedBurner" /></a>
</div>
CSS
#dock-left {
	height:auto;
	width:100px;
	text-align:center;
	position:fixed;
	top:150px;
	left:10px;
}
#dock-left img{
	width:64px;
	height:64px;
	border:0;
	-moz-transition-property: width, height,margin-right;
	-moz-transition-duration:0.2s;
	-moz-transition-timing-function:ease;
	-webkit-transition: all 0.2s ease 0 ;
	-o-transition: all 0.2s ease 0 ;
	margin-right:64px;
}
#dock-left img:hover{
	width:128px;
	height:128px;
	margin-right:0;
}

最後に

一応作ってみたものの、周りのアイコンも少し大きくなった方が雰囲気でますね。

CSS
#bottom a:hover + a img {
	width:96px;
	height:96px;
	margin-top:32px;
}

最初のサンプルでこのコードを追加すると、マウスを乗せた右隣のアイコンが縦横96pxサイズになるけど、左隣のアイコンに適用する方法が思いつかなかった。

ちょうどいいセレクタないのかな。知っている方教えてください~。

フィードやTwitterで最新情報をチェック
follow us in feedly
この記事に付いているタグの最新記事一覧
loading...
コメント









※コメントはご意見ご感想や間違いのご指摘等にしていただけますようお願いいたします。コメントを確認する時間がなく、技術的なご質問をいただいても答えできません。申し訳ございませんがご理解のほどお願いいたします。

Recent Entry
Popular Entry
  • このエントリーをはてなブックマークに追加
  • このエントリーをはてなブックマークに追加
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。