具有flash效果的菜單，基于jquery

Download the zip file version 0.2.0 of LavaLamp and open the demo.html to check it out for yourself 

LavaLamp menu
來源：http://gmarwaha.com/blog/?p=7

翻譯：lxr

轉載請注明出去。

預覽：DEMO1

將鼠標放在上面的例子上，你就會感覺到Lava Lamp的完美效果。LavaLamp menu是基于jquery庫的，就我個人而言，我認為它的效果并不亞于flash菜單，而且它比flash要小得多。就像你知道的它僅僅只有700bytes。

我常注意到，授權一般在最終版本。現在我誠落在早期版本你將獲得授權。這個效果最先是由Guillermo Rauch用mootools庫寫的。我所做的的僅僅是為了jquery的愛好者而將它改寫為基于jquery庫的。非常感謝Guillermo 創建的完美效果。特別感謝Stephan Beal將它取名為“LavaLamp”，和Glen Lipka 在外觀圖形上的幫助，以及眾多的jquery愛好者的支持。

 

作為一個用戶界面開發者，我們知道用戶最常用的是菜單。我們一直追求的就是吸引用戶的眼球，我相信LavaLamp向這一方向邁出了一步。在這些廢話讓你厭煩之前讓我們開始將LavaLamp加入到你的網站中。
我希望你認同一個典型的html部件由3個不同的元件組成。

一個標記正確的html

css

javascript

 

現在讓我們按照上面的步驟將LavaLamp菜單加入到你的網站中。在用jquery庫替換mootools庫的過程中，我為你寫了javascript和css以供使用。因此請你按照本頁教程的步驟使用jQuery。在Guillermo Rauch
的頁面中有mootools版本的教程。

步驟1: HTML
由于大多數用戶界面開發人員認為無序清單（ ul ）是正確的語義結構菜單/導航，所用就讓我們從這里開始。

<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>

在上面的“ul”表示菜單，每一個“li”項代表一個菜單項，這一點對理解我們外加的“li”標記用來描述高亮顯示的菜單項有很大幫助。因為背景僅僅是用來美化用的，它并不代表一個菜單項，因此我們可以從javascript中加載它。只是為了確保它與鼠標同步，就先說“你不必加入li”，LavaLamp將特別注意它，一旦加上，“li”所代表的背景就會看起來是這樣的：

<li class="back"><div class="left"></div></li>

步驟2: CSS
你可以修改css以獲得自己想要的外觀，這里列出了一種，在“Bonus”部分列出了另外幾種：

/**//* 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; 
}

相信我這只是一個很簡單的樣式表，請繼續向下看以理解每一部分的作用。
第一，我們用亮橙色作為背景以及一些基本屬性height，width，padding，margin等等來風格化“ul”。我們使用了相對定位，這樣我們才能確定背景“li”與“ul”的關系。這樣我們才能自由移動背景“li”。

下一步，我們使“li”水平移動而不是垂直。默認時它是垂直移動的，在這種情況下我們使用“float:left”以達到我們所需的效果。
下一步，我們使用“li”來高亮表示現在所在的菜單項，這使用了sliding doors technique另外注意上面所提到的相對位置。
最后一步，格式化鏈接
上面的規則不是很易懂，如果你對改寫css沒有信心我推薦你快速閱讀一下CSS positioning。它簡短且通俗易懂。
步驟3: Javascript
這是一個非常簡單的部分，所有的功能在Lava Lamp plugin中，作為一個開發者你要做的僅僅是將它包含到你的網頁中。

<script type="text/javascript" src="/path/to/jquery.js"></script> 
<script type="text/javascript" src="/path/to/jquery.lavalamp.js"></script> 
<!-- Optional --> 
<script type="text/javascript" src="/path/to/jquery.easing.js"></script>
<script type="text/javascript"> 
$(function() { $(".lavaLamp").lavaLamp({ fx: "backout", speed: 700 })});
</script>

包含jquery庫和LavaLamp plugin，可選擇將easing plugin也加入到其中，因為它包含很多很酷的效果。例如本例的效果就要引用easing plugin。在這里下載 jquery， easing plugin， LavaLamp plugin。
接下來，在“document.ready event”中，“fx”默認為“linear”“speed”為“500”。
Bonus
僅僅簡單修改一下css你就可獲得一個完全不同風格的菜單，當然其他部分不需要改動

預覽：DEMO2

這是另外一個，也只改動了css，我想它并不美觀但我想要說的是你僅僅是被自己的想象力所束縛了。

預覽：DEMO3

源文件下載