首页 » 建站教程 » Blog教程 » Wordpress » 浏览内容
在WordPress主题中添加 LavaLamp 菜单效果
1. 下载经我修改过的 LavaLamp 代码
下载 lavalamp.js文件, 并将文件放置到 js 目录.
2. 加载 jQuery 库
在 head 部分的 <?php wp_head(); ?> 前方添加以下代码: (一般主题可以在 header.php 中找到.)
<?php wp_enqueue_script('jquery'); ?>
或者
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
两个方法其实都是引用 jQuery 的 JavaScript, 有什么不一样呢? 前者是使用博客服务器上的 jQuery, 如果其他插件也要调用 jQuery 则无需两次装载代码; 而后者是使用 Google 服务器上的代码, 很多其他网站也使用这个文件, 所以它可能已被保存在本机 cache 中.
3. 加载 LavaLamp 菜单
</body> 前方添加以下代码: (一般主题可以在 footer.php 中找到.)
<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 需要作针对性修改.
评论 共0条 (RSS 2.0) 发表评论