2015年3月1日 星期日

jQuery - Sweet Menu

jQuery Sweet Menu需在<head></head>網頁標籤部份匯入以下js檔案:
  • jquery-2.1.0.min.js
  • jquery.sweet-menu-1.0.js
  • jquery.easing.js
其程式如下所示:
 



...
並以JavaScript定義圖片等設定:

...
最後以<li></li>網頁標籤設定Sweet Menu選項則完成,相當簡單:

【執行結果】

當以滑鼠移至Sweet Menu上方時,將以延伸的方式顯示Sweet Menu:
【參考資料】

[1] jQuery:http://jquery.com
[2] jQuery Sweet Menu Plugin:http://www.jquery-plugins.info/sweet-menu-00015315.htm

© Chia-Hui Huang

沒有留言:

張貼留言