哇寶部落格
Wabow Information Inc. Blog
這是Flash製作的選單
當然不是，是Flash製作的話，就沒什麼好介紹的了，網頁上，常看到花樣多變的選單，幾乎都是用Flash製作的，不過這款LavaLamp plugin，卻可以製作出簡易的滑動選單效果，看到官網範例還真的覺得有Flash的fu，javascript真神奇~
載入 jQuery 及 LavaLamp
<script type="text/javascript" src="path/to/jquery.js"></script> <script type="text/javascript" src="path/to/jquery.lavalamp.js"></script> <script type="text/javascript" src="path/to/jquery.easing.js"></script>
html部份
<ul class="lavaLamp"> <li><a href="#">Home</a></li> <li><a href="#">Plant a tree</a></li> <li><a href="#">Travel</a></li> <li><a href="#">Ride an elephant</a></li> </ul>
css部份
/* Styles for the entire LavaLamp menu */
.lavaLamp {
position: relative;
height: 29px; width: 421px;
background: url("../image/bg.gif") no-repeat top;
padding: 15px; margin: 10px 0;
overflow: hidden;
}
/* Force the list to flow horizontally */
.lavaLamp li {
float: left;
list-style: none;
}
/* Represents the background of the highlighted menu-item. */
.lavaLamp li.back {
background: url("../image/lava.gif") no-repeat right -30px;
width: 9px; height: 30px;
z-index: 8;
position: absolute;
}
.lavaLamp li.back .left {
background: url("../image/lava.gif") no-repeat top left;
height: 30px;
margin-right: 9px;
}
/* Styles for each menu-item. */
.lavaLamp li a {
position: relative; overflow: hidden;
text-decoration: none;
text-transform: uppercase;
font: bold 14px arial;
color: #fff; outline: none;
text-align: center;
height: 30px; top: 7px;
z-index: 10; letter-spacing: 0;
float: left; display: block;
margin: auto 10px;
}最後加入
$(function() { $(".lavaLamp").lavaLamp({ fx: "backout", speed: 700 })});Flash在介面的自由度還是高很多，可以很天馬行空的設計，不過能多找到幾個類似這樣的plugin來用，個人已經很滿足了 
- Tags: jQuery