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

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

使用方法
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」サンプル

sponsors

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

記事作成:
記事URL:

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