羽中漫步的二期模版装修刚刚收工，优化后的页面体验让人很有成就感;) 在此也把一些技术心得总结出来，想拥有一样的特效套装只需要动动手指咯！<(￣︶￣)/


【第一弹！lavalamp导航】


lavalampnav.jpg

提到jquery的魅力首当其冲就是“滑滑滑~~”了。lavalamp特效的发明人是Ganeshji Marwaha(钢司机么哇哈...￣▽￣＃)，E文好的可以去看一手资料。neoease把它用在WP主题iNove上广受好评，并写了篇经典的双语教程。

这里我的方法略有不同，更简捷和通用化，仅三步包教包会~


  1. 引用jquery库不必多说，lavalamp在1.2.6和1.3.2两个流行版本下都有效。不想上传这个50K的js锦囊，可以直接引用google的文件地址：
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
    放在body标签外。
  2. css和按钮制作。在你的页面css文件中加上这段代码：
    1. /*Lavalamp Menus*/
    2.     #menus {
    3.         float:right;
    4.         width:620px;
    5.         height:60px;
    6.         background:#191919;
    7.         padding-right:20px;
    8.         border-bottom:1px solid #e9e9e9;
    9.         position:relative;
    10.     }
    11.     #menus li {
    12.         float:left;
    13.         display:inline;
    14.     }
    15.     #menus li a {
    16.         position:relative;
    17.         color:#70B9ED;
    18.         height:30px;
    19.         line-height:30px;
    20.         overflow:hidden;
    21.         padding:0 20px;
    22.         text-decoration:none;
    23.         font-size:12px;
    24.         font-weight:bolder;
    25.         float:left;
    26.         z-index:9;
    27.         text-align:center;
    28.         margin-top:13px;
    29.     }
    30.     #menus li a:hover {
    31.         color:#FFAB56;
    32.     }
    33.     #menus li.back {
    34.         background:url(images/lava2.gif) no-repeat right bottom;
    35.         height:30px;
    36.         position:absolute;
    37.         margin-top:13px;
    38.     }
    39.     #menus li.back .left {
    40.         background:url(images/lava2.gif) no-repeat left top;
    41.         height:30px;
    42.         margin-right:9px;
    43.         float:none;
    44.     }

    menus对应html中导航部分的id，image/lava2.gif就是按钮背景图片了，如我的灰方块。

    lava_bground


    只要注意中间的衔接条和色彩一致大家可以自由发挥，常见的有圆角对称和扁平下划线式。代码的其他部分如位移和文字颜色等自行修改。
  3. 最后引用lavalamp效果js。仅3K，点击下载。当然还可以犯懒直接用我的<script type="text/javascript" src="http://www.jzwalk.com/usr/themes/jwalk/js/lava.js"></script>无保质期就是了~

OK收工，看看你的导航效果吧！是不是很简单？lavalamp作为时下妆点模版的特效首选，短小流畅且兼容性超强——轻轻松松，你也可以拥有！(好土的广告词……(￣ε(#￣))

可既然都请来了强悍的jquery库，只用个lavalamp好像有点浪费了。。还有什么好看实用的东东可以装点呢，敬请关注《精彩模版小高招第二弹—%#$@!》(自己找...) (￣︶￣)y

【小花絮】
lavalamp的前身是Fancy menu由Guillermo Rauch基于mootools库编写，命名人Stephan Beal的灵感来自于同名艺术灯具，原意为“熔岩之光“~

lavalamporg.jpg