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

Apple社のMacにはDockとよばれるメニューがあり、マウスオーバーでアイコンが大きくなったり、小さくなったりします。
俗にフィッシュアイと呼ばれるスクリプトがこれにあたります。
Dock Menuではメニュー全体を出し入れ出来るタイプのDockメニューを作成するjavascriptを公開しています。

sponsors

使用方法

Dock Menuからファイル群をダウンロードします。
<script type="text/javascript" src="http://yourdomain/hide_menu.js"></script>
<link href="http://yourdomain/style.css" rel="stylesheet" type="text/css">
上記の様にhead内に書き込みます。
なお、CSSには画像を指定する場所&余計な設定があるので適宜変更してください。
メニュー部分は以下の通り記述します。
<div id="hit_area" onmouseover="toggleDown();"></div>
	<div id="menu_holder">
		<div id="nav">
			<ul>
				<li><a href="リンク先URI">タイトル</a></li>
				<li><a href="リンク先URI">タイトル</a></li>
				<li><a href="リンク先URI">タイトル</a></li>
			</ul>
		</div>
	</div>
<div id="hit_area2" onmouseover="toggleUp();">
</div>
なお、CSSのhit_areaで指定した高さがメニューを出す部分、hit_area2で括った部分がメニューを閉じる部分になります。
画像が透過しているので、メニューの下が白系だと見にくいので必要であれば自作してください。

sponsors

Javascriptサンプルページ一覧
skuare.net