Hot!Ajax

LavaLamp菜单

Monday, 08 October 2007

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

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

翻译：lxr

转载请注明出去。

预览：

将鼠标放在上面的例子上，你就会感觉到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>
<p> </p>
<p><script type="text/javascript">

 $(function() { $(".lavaLamp").lavaLamp({ fx: "backout", speed: 700 })});

 </script></p>

包含jquery库和LavaLamp plugin，可选择将easing plugin也加入到其中，因为它包含很多很酷的效果。例如本例的效果就要引用easing plugin。在这里下载 jquery， easing plugin， LavaLamp plugin。
接下来，在“document.ready event”中，“fx”默认为“linear”“speed”为“500”。
Bonus
仅仅简单修改一下css你就可获得一个完全不同风格的菜单，当然其他部分不需要改动

预览：

这是另外一个，也只改动了css，我想它并不美观但我想要说的是你仅仅是被自己的想象力所束缚了。

预览：

源文件下载

Set as favorite

Bookmark

Email This

Comments (1) add comment