skuare.net

今や初心者層にも広がった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="リンク先"><amp-img src="画像パス" alt=""><span>説明</span></a></li>
<li><a href="リンク先"><amp-img src="画像パス" alt=""><span>説明</span></a></li>
<!-- 以下画像分 -->
</ul>
また表示したい画像とは別に、_smallという名の小さい画像を用意する必要があります。
例）表示画像がicon.gifであればicon_small.gifが必要になります。
MacのDockライクなメニューを手軽に作成するjavascript「Fisheye Menu」サンプル