jQuery 导航美化插件 - Lavalamp

应该有人会对淘宝 UED Blog 的导航栏印象深刻。其实借助 jQuery 和 lavalamp 插件，我们也可以制作出一模一样效果的导航栏。动态鼠标跟随效果不但视觉上比纯 CSS 布局来得漂亮，导航指示能力也更为突出。

先看演示。

然后我开始说怎么把它放到 Wordpress 模板里去。

Step 1. 引入 jQuery 框架：

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js?ver=1.2.6'></script>

*注：Wordpress 自带有 jQuery 框架，但从 Google 引用的版本体积更小、载入速度更快。

Step 2. 引入 lavalamp 和 easing 效果插件：

<script type='text/javascript' src='http://ishawn.net/jQuery/lavalamp.min.js'></script>
<script type='text/javascript' src='http://ishawn.net/jQuery/easing.js'></script>

*注：访问插件作者的主页需翻墙，所以我把这两个文件暂存于 Shawn Blog。如果你打算长期使用，请将这两个文件下载并放到你自己的服务器上。

Step 3. 布置效果到元素：

<script type="text/javascript">
/* <![CDATA[ */
$(function(){$(".lavaLamp").lavaLamp({ fx: "backout", speed: 700 })});
/* ]]> */
</script>

*注：$(".lavaLamp") 对应的是导航栏的类，即此处假设你模板里的导航栏为 <ul class="lavaLamp">。speed 为滑动速度，单位是毫秒，数值越大效果越平滑，但"反应"也会跟着变慢。

Step 4. 写 CSS

.lavaLamp{
position: relative; /*--重要--*/
background-color: white;
margin: 10px 0; /*--对IE很重要--*/
}
.lavaLamp li{
float: left; /*--重要--*/
list-style: none;
}
.lavaLamp li.back{
border-bottom: 5px solid red;
width: 9px;
height: 20px; /*--较为重要--*/
z-index: 1; /*--较为重要--*/
position: absolute; /*--重要--*/
}
.lavaLamp li a{
color:#000;
z-index: 2; /*--较为重要；如修改，数值必须大过上一个 z-index --*/
font-variant:small-caps;
text-decoration:none;
position: relative; /*--重要--*/
margin: auto 10px;
}

*注：仍然假设你的导航栏为 <ul class="lavaLamp">，其中标注"重要"的条目是绝对不能去掉的，而"较为重要"的则不建议去掉但可根据需求修改。

以上四步便是布局动态导航栏的全部内容，心里有谱之后你就可以开动了。最后感谢作者带来这么轻便实用的 jQuery 插件，压缩版本体积仅为 700 字节左右，使用后也不会拖慢你 Blog 的载入速度。