網頁設計

關於網頁設計的技術或相關資訊分享

Jquery選單效果-LavaLamp

  現在手機用戶越來越普及了,當蘋果(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.4jQuery 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去做設定滑動的樣式的,因此要滑動圖片也是可以的。