現在手機用戶越來越普及了，當蘋果(Apple)的裝置例如iphone、ipad要看我們的網站，不支援Flash怎麼辦?今天來介紹Jquery LavaLamp選單外掛，不用Flash也有漂亮的網站選單，簡單好用，快又有效!

外掛基本資料

外掛名稱：jQuery LavaLamp menu plugin

版本：1.3.5

作者網站：點我連結

下載連結：jquery.lavalamp-1.3.5.js (完整版本)

　　　　　jquery.lavalamp-1.3.5.min.js (壓縮版本)

引用檔案：jquery 1.4.4、jQuery Easing library 1.3

範例：

不囉嗦先看範例

• 最新消息
• 網頁設計找蓋婭
• 網路行銷
• 第四
  選項

使用方法：

先載入需要的js

<script src="/js/jquery-1.4.4.min.js" type="text/javascript"></script> <script src="/js/jquery.easing.compatibility.js" type="text/javascript"></script> <script src="/js/jquery.lavalamp-1.3.5.min.js" type="text/javascript"></script>

之後把選單的HTML先寫好

<ul id="menu"> <li>最新消息</li> <li>網頁設計找蓋婭</li> <li>網路行銷</li> <li>第四 <br />選項</li> </ul>

CSS部分

ul#menu { 　　list-style:none; 　　margin:5px; 　　padding:10px; 　　overflow:auto; } ul#menu li{ 　　position:relative; /* 讓Z-index參數有用 */ 　　z-index:5; /* 將Z-index設為5，才不會選項效果蓋住選項內容 */ 　　margin:3px 5px; 　　padding:5px 10px 4px; 　　float:left; /* 變成橫向選單 */ } ul#menu li.backLava { 　　background-color:#80B6FC; 　　border:1px solid #90c6Ff; 　　/* 以下是圓角效果*/ 　　border-radius: 6px; /* Opera 10.5+ */ 　　-moz-border-radius: 6px; /* Firefox */ 　　-webkit-border-radius: 6px; /* Safari 和 Chrome */ }

最後在選單HTML的下方再加入下面這段javascript

<script type="text/javascript"> // <![CDATA[ $(function() { $('ul#menu').lavaLamp({ startItem: 2 }); }); // ]]> </script>

參數說明：

{startItem: X}：選單預設位置，如果不設定的話則會預設第一個。

另外由於這是使用CSS去做設定滑動的樣式的，因此要滑動圖片也是可以的。

• 觀看範例