iconDock 實際執行畫面

iconDock 是基於 jQuery 框架下的一個套件，可以創建類似 Mac OS X 系統選單的網頁選單效果，圖標可添加對上下文有幫助的提示文字。適用於近代所有瀏覽器瀏覽。


使用方法：
首先載入程式所需要的 JavaScript 程式碼
//使用 Google AJAX API 取得 jQuery 1.7.2 的 min 版本
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
//接下來載入 iconDock 的主程式碼
<script type="text/javascript" src="jquery.dock.js"></script>


接下來把準備好的網頁選單小圖示加到你的網頁當中
<div id="Bar">
<a href="連結" name="Alertes_name" title="Google alertes">
<img src="img/alerts_35.gif" alt="Campana_alt" border="0" />
</a>
<a href="連結" name="Escriptori_name" title="Google Escriptori">
<img src="img/desktop_35.gif" alt="Escriptori_alt" border="0" />
</a>
<a href="連結" name="Compres_name" title="Google compres">
<img src="img/froogle_35.gif" alt="Froogle_alt" border="0" />
</a>
<a href="連結" name="GMail_name" title="Google mail">
<img src="img/gmail_35.gif" alt="Gmail_alt" border="0" />
</a>
<a href="連結" name="Grups_name" title="Google grups">
<img src="img/groups_35.gif" alt="Grups_alt" border="0" />
</a>
<a href="連結" name="Linux_name" title="Linux">
<img src="img/special_35.gif" alt="Especial_alt" border="0" />
</a>
</div>

最後加上一小段 JavaScript 的程式碼
讓網頁讀取完成執行就可以了
參數下方附上說明，也是這支程式提供修改的參數值
var confObject = {
iconMinSide : 35,
//最小長度 推薦20-50像素
iconMaxSide : 70,
//最大長度 推薦10-140像素
distAttDock : 100,
//作用中的和結束位置的距離 推薦為整個選單的1/3
coefAttDock : 2,
//縮小的比率 範圍值 0.5-2.5
veloOutDock : 500,
//重新啟動的速度 500-2000
valign: 'bottom'
//選單的對齊方式 top(對齊上方),bottom(對齊下方),middle(置中對齊)
}
$(function() {
$("#Bar").addDockEffect(confObject);
});

作者網站：http://icon.cat/wiki/IconDock_En#Tested_browsers