MacのDockライクなメニューを手軽に作成するjavascript「Fisheye Menu」
今や初心者層にも広がったMacのクールなメニュー「Dock」
一般的にはフィッシュアイと呼ばれる手法をFisheye Menuでは、javascriptで手軽に作成できる方法を公開しています。
sponsors
使用方法
作成方法はいたって簡単です。
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」サンプル
sponsors
記事作成:2008年1月 8日 00:00
記事URL:http://www.skuare.net/2008/01/macdockjavascriptfisheye_menu.html
TOP > javascript > メニュー関連 > MacのDockライクなメニューを手軽に作成するjavascript「Fisheye Menu」
前の記事:div要素もまとめてリンクにするjavascript「Link Boxes」
次の記事:超クールなカレンダーjavascript「Calendar」