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

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

使用方法
作成方法はいたって簡単です。
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」サンプル

sponsors

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

記事作成:
記事URL:

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