在主题中添加 LavaLamp 菜单效果
前些天我在博客上换上了 LavaLamp 的菜单效果, 很多朋友问我这个是怎么弄的, 下面我会手牵手教你的, follow me...
If you wanna English tutorial, please visit Add LavaLamp Menu to iNove Theme.
1. 下载经我修改过的 LavaLamp 代码
下载 lavalamp.js 文件, 并将文件放置到 js 目录.
2. 加载 jQuery 库
在 head 部分的 <?php wp_head(); ?> 前方添加以下代码: (一般主题可以在 header.php 中找到.)
1 | <?php wp_enqueue_script('jquery'); ?> |
或者
1 | <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 中找到.)
1 2 3 4 5 6 7 8 9 10 | <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 代码.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 | #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 中删除以下代码:
1 | <li><a class="lastmenu" href="javascript:void(0);"></a></li> |
6. 修改子菜单的 JavaScript 代码 (针对 iNove 主题)
打开 js/menu.js 文件并修改 activate 方法.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 | 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 需要作针对性修改.
本文于 2009 年 5 月 15 日大幅更新!
参考资料: LavaLamp for jQuery Lovers

啊~找到了~
在 #navigation 上加上 overflow:hidden;
就可以了~ :P
更新主题后,今天再次为主题添加 LavaLamp 菜单效果,发现:
1、对于文章中 lavalamp.js 和 lava.gif 下载链接都打不开。除了169楼提供的方法外,还可以这样:只要将下载链接主域名更换为 Boxcn.net 即可正常下载。
2、最后一步打开 js/menu.js 文件并修改 activate 方法中句末貌似少了逗号,我在修改时给加上了。记得以前为主题添加 LavaLamp 菜单效果时都没在意这一点,最后发现作业完后当鼠标在订阅按钮上方时,不能显示推荐订阅器列表,这次添加了逗号后此问题消失。
@RenHai
逗号是分割符号, 和这个方法无关, 自己加上就可以了.
lavalamp.js文件在哪下载啊?链接打不开。可以发个邮件给我么?万分感谢~
这到底是什么效果啊。js的文件都无法下载。何故?
MG, 请教一下,滑块左边溢出可以用“在 #navigation 上加上 overflow:hidden;”来解决。
可是右边溢出到搜索栏该怎么解决呢?我截图显示了问题描述:
http://i25.tinypic.com/ddz19t.jpg
感谢博主,已经弄好了,不过我想建议一下,那个js与gif图片还是不要放什么boxcn上,非常麻烦,因为在linux下命令行下wget下不了,况且这两文件也就那么小,不用这么省吧?
蛮好的啊
评论的功能很利害啊