MacのDockライクなメニューを手軽に作成するjavascript「Fisheye Menu」

今や初心者層にも広がったMacのクールなメニュー「Dock」
一般的にはフィッシュアイと呼ばれる手法をFisheye Menuでは、javascriptで手軽に作成できる方法を公開しています。

使用方法
作成方法はいたって簡単です。
Fisheye Menuからダウンロードしたfisheye.jsとfisheye-menu.cssをhead内に書き込みます。
<link rel="stylesheet" type="text/css" href="http://yourdomain/fisheye-menu.css">
<script src="http://yourdomain/fisheye.js" type="text/javascript"></script>
さらにメニューに表示したい画像を以下のように記述します。
<ul id="fisheye_menu">
<li><a href="リンク先"><img src="画像パス" alt=""><span>説明</span></a></li>
<li><a href="リンク先"><img src="画像パス" alt=""><span>説明</span></a></li>
<!-- 以下画像分 -->
</ul>
また表示したい画像とは別に、_smallという名の小さい画像を用意する必要があります。
例）表示画像がicon.gifであればicon_small.gifが必要になります。
MacのDockライクなメニューを手軽に作成するjavascript「Fisheye Menu」サンプル

2008年01月08日

前の記事：div要素もまとめてリンクにするjavascript「Link Boxes」
次の記事：超クールなカレンダーjavascript「Calendar」

関連記事

• [mootools]iFishEye
• [mootools]Fisheye
• MacライクなDockメニューを作成するjavascript「PBB Dock」
• prototypeでFisheyeメニューを作成するjavascript「Fisheye」
• Dockメニューを上下に設置するjavascript「CSS Dock Menu」

• ファイルサイズをJavaScriptライブラリ「jQuery」で自動表示する「addSizes.js」
• JavaScriptライブラリ「jQuery」を使用してフォームを華麗に彩る「jqTransform」
• Webカラーに関するサイト21
• 英字新聞ぽいコラムをJavaScriptライブラリ「jQuery」で作る「Columnizer」
• 心地よく要素を切り替えるJavaScript「jFlip」
• CoverFlowを実現するJavaScript「JS Coverflow」
• 画像を丸く輝かせるJavaScript「sphere.js」
• セクシーなLightBoxを実現するJavaScript「Sexy LightBox」
• JavaScriptライブラリ「jQuery」を使ってカレンダーを作る「jCal.js」
• カバーフローぽい画像ギャラリーJavaScript「ProtoFlow」