具有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
转载请注明出去。
将鼠标放在上面的例子上,你就会感觉到Lava Lamp的完美效果。LavaLamp menu是基于jquery库的,就我个人而言,我认为它的效果并不亚于flash菜单,而且它比flash要小得多。就像你知道的它仅仅只有700bytes。
我常注意到,授权一般在最终版本。现在我诚落在早期版本你将获得授权。这个效果最先是由Guillermo Rauch用mootools库写的。我所做的的仅仅是为了jquery的爱好者而将它改写为基于jquery库的。非常感谢Guillermo 创建的完美效果。特别感谢Stephan Beal将它取名为“LavaLamp”,和Glen Lipka 在外观图形上的帮助,以及众多的jquery爱好者的支持。
作为一个用户界面开发者,我们知道用户最常用的是菜单。我们一直追求的就是吸引用户的眼球,我相信LavaLamp向这一方向迈出了一步。在这些废话让你厌烦之前让我们开始将LavaLamp加入到你的网站中。 我希望你认同一个典型的html部件由3个不同的元件组成。
现在让我们按照上面的步骤将LavaLamp菜单加入到你的网站中。在用jquery库替换mootools库的过程中,我为你写了javascript和css以供使用。因此请你按照本页教程的步骤使用jQuery。在Guillermo Rauch 的页面中有mootools版本的教程。
步骤1: HTML 由于大多数用户界面开发人员认为无序清单( ul )是正确的语义结构菜单/导航,所用就让我们从这里开始。
下一步,我们使“li”水平移动而不是垂直。默认时它是垂直移动的,在这种情况下我们使用“float:left”以达到我们所需的效果。 下一步,我们使用“li”来高亮表示现在所在的菜单项,这使用了sliding doors technique另外注意上面所提到的相对位置。 最后一步,格式化链接 上面的规则不是很易懂,如果你对改写css没有信心我推荐你快速阅读一下CSS positioning。它简短且通俗易懂。 步骤3: Javascript 这是一个非常简单的部分,所有的功能在Lava Lamp plugin中,作为一个开发者你要做的仅仅是将它包含到你的网页中。
这是另外一个,也只改动了css,我想它并不美观但我想要说的是你仅仅是被自己的想象力所束缚了。
源文件下载