skuare.net

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

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

使用方法
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で括った部分がメニューを閉じる部分になります。
画像が透過しているので、メニューの下が白系だと見にくいので必要であれば自作してください。
MacのDockライクなメニューを作成するjavascript「Menu Dock」サンプル

｜ ｜ ｜ ｜ ｜ ｜

前の記事：Movable Typeのコメントにタイトルをつけるプラグイン「MTCommentTitle」
次の記事：既存のテーブルを簡単にソートさせるjavascript「Table-Sort」

関連記事

• [mootools]iFishEye
• [mootools]Fisheye
• MacライクなDockメニューを作成するjavascript「PBB Dock」
• prototypeでFisheyeメニューを作成するjavascript「Fisheye」
• MacのDockライクなメニューを手軽に作成するjavascript「Fisheye Menu」