随笔-124  评论-49  文章-56  trackbacks-0

Image

具有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。在这里下载 jqueryeasing pluginLavaLamp plugin
    接下来,在“document.ready event”中,“fx”默认为“linear”“speed”为“500”。
    Bonus
    仅仅简单修改一下css你就可获得一个完全不同风格的菜单,当然其他部分不需要改动

    预览:DEMO2

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


    预览:DEMO3

    源文件下载

    posted on 2009-12-06 23:18 junly 阅读(558) 评论(0)  编辑  收藏 所属分类: ajax/jquery/js

    只有注册用户登录后才能发表评论。


    网站导航: