1. 下载经我修改过的 LavaLamp 代码

下载 lavalamp.js 文件, 并将文件放置到主题 js 目录.

2. 加载 jQuery 库
在 head 部分的 <?php wp_head(); ?> 前方添加以下代码:

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

3. 加载 LavaLamp 菜单
</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>

注意: jQuery("#menus") 是找到 iNove 主题菜单的 ul 部分, 其他主题请替换为相应代码.

4. 在 style.css 中添加 LavaLamp 菜单的样式代码
如果你用的是 iNove 主题, 请下载 lava.gif 图片并放置到 img 目录中; 删除 style.css 文件中包含 #menu 的样式, 并添加下列 CSS 代码. 其他主题可能需要修改 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;
}

5. 删除多余的代码 (针对 iNove 主题)
在 templates/header.php 中删除以下代码:

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

6. 修改子菜单的 JavaScript 代码 (针对 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);
}

按照以上步骤操作应该不会有什么问题的, 而在不同的主题中可能需要修改的地方有两处. 一是第 3 步 #menus 可能要换成其他能找到菜单 ul 的路径; 二是第 4 步的 CSS 需要作针对性修改.