Boliquan

注：本文中的代码高亮效果采用wp-code-highlight插件,下载地址：

wp-code-highlight插件使用方法：

<pre>
你的代码
< /pre>

注意：上面代码去掉/pre前面的空格，所有代码符号必须为英文状态下！

一：首先要下载两个文件：
①lavalamp.js 文件：
② lava.gif 图片： (放在inove/img目录)

二：在inove/header.php文件的

<?php wp_head(); ?>

前方添加以下代码:

<?php wp_enqueue_script('jquery'); ?>

(使用博客服务器上的 jQuery，如果其他插件也要调用jQuery 则无需两次装载代码)
或者如下代码：

(是使用 Google 服务器上的代码,很多其他网站也使用这个文件, 所以它可能已被保存在本机cache中.)

三：在inove/footer.php文件的

</body>

前面(最好在分析代码之前)添加如下代码：

<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/lavalamp.js"></script>
<script type="text/javascript">
jQuery(document).ready(
function(){
jQuery(function() {
jQuery("#menus").lavaLamp({fx:"backout", speed:700})
});
}
)
</script>

四：删除inove/style.css文件中包含#menus的样式，并添加如下CSS代码：

#menus {
position:relative;
padding-left:10px;
float:left;
}
#menus li {
float:left;
display:inline;
list-style:none;
}
#menus li a {
position:relative;
color:#382E1F;
height:30px;
line-height:30px;
padding:0 20px;
text-decoration:none;
font-size:11px;
float:left;
z-index:10;
text-align:center;
}
#menus li.current_page_item a {
font-weight:bolder;
}
#menus li.back {
background:url(img/lava.gif) no-repeat right bottom;
height:30px;
position:absolute;
z-index:8;
}
#menus li.back .left {
background:url(img/lava.gif) no-repeat left top;
height:30px;
margin-right:9px;
float:none;
}
#menus li ul {
display:none;
background:#F4F5F7;
border:1px solid #CCC;
border-top-color:#A6A6A6;
padding:0 5px;
}
#menus li li {
float:none;
margin:0 !important;
margin:0;
padding:0;
display:block;
list-style:none;
}
#menus li li a {
float:none;
display:block;
padding:7px 5px;
text-decoration:none;
width:200px;
border-style:solid;
border-color:#DDD;
border-width:1px 0 0;
margin:0;
background-image:none;
height:auto;
line-height:145%;
color:#999;
text-align:left;
}
#menus li li.first a {
border-top:none;
}
#menus li li a:hover {
color:#382E1F;
}

我是删除所有#menus样式后在

#navigation {
background:#FFF;
border-bottom:1px solid #A6A6A6;
}

下一行添加的。

五：删除inove/templates/header.php中以下代码：

<li><a class="lastmenu" href="javascript:void(0);"></a></li>

六：将inove/js/menu.js 文件中的整个activate替换为下列代码：

activate: function() {
this.title.className += ' current';
var pos = cumulativeOffset(this.title);
var left = pos[0];
if (this.align == 'right') {
var offset = getWidth(this.title) - getWidth(this.body) + this.offset;
left += offset;
}
var top = pos[1] + getHeight(this.title);
if(this.offset == -1) {
var pos2 = cumulativeOffset(document.getElementById('navigation'));
left -= pos2[0];
top -= pos2[1];
}
setStyle(this.body, 'left', left + 'px');
setStyle(this.body, 'top', top + 'px');
setStyle(this.body, 'visibility', 'visible');
setStyle(this.body, 'opacity', this.opacity);
setStyle(this.body, 'MozOpacity', this.opacity);
setStyle(this.body, 'KhtmlOpacity', this.opacity);
setStyle(this.body, 'filter', 'alpha(opacity=' + this.opacity * 100 + ')');
if(this.tid) {
clearTimeout(this.tid);
}
this.tid = setInterval(bind(this, this.appear), 20);
}

注意替换的代码 } 之后有个英文逗号。

好了，大功告成，看看本站导航栏效果吧！
注：本文中的代码来自iNove主题的作者mg12的博客，本文将其通俗化，让和我一样的菜鸟都能看懂。