一开始接触wordpress的时候,就接触到了那种滑动导航菜单,当时很迷,非常想自己会弄,可是找了好久,自己也不会弄,而且时间也不多,后来就不了了之了。

现在时间是很充足的了,就决定重新启动这个“项目”。

首先还是收集了好些应用jquery的插件(应该不算插件了,要自己修改才能应用)。今天看了下lavalamp的滑动菜单,它提供了三种基本样式,应该说还是够用的,只是可能简洁了点。

With Image

No Image

Bottom Style

要达到这样的效果,要做三方面的准备:CSS,JS和网页上的布局。

1.针对wordpress,在header.php里修改即可,若是自己编写代码构成的菜单解决很简单,添加如下代码:

  1. <ul class="lavaLamp" >
  2. <li class="current"><a href="#">Home</a></li>
  3. <li><a href="#">Plant a tree</a></li>
  4. <li><a href="#">Travel</a></li>
  5. <li><a href="#">Elephant</a></li>
  6. </ul>

如果是使用wp自身的自定义菜单功能调用菜单的话

比如

  1. <?php wp_nav_menu( array( 'theme_location' => 'header-menu')); ?>

要将其修改为

  1. <?php wp_nav_menu( array( 'theme_location' => 'header-menu' ,'menu_class'=>'lavaLamp')); ?>

其中的'theme_location' 和'header-menu' 不是严格一致的,可能你的博客是其他。

2.CSS

如果你的博客菜单没有成型,或者说还不太复杂,能够简单修改的话,请参照提供的CSS修改,先贴出部分:

  1. .lavaLampWithImage {
  2. position: relative;
  3. height: 29px;
  4. width: 421px;
  5. background: url("bg.gif") no-repeat top;
  6. padding: 15px;
  7. margin: 10px 0;
  8. overflow: hidden;
  9. }
  10. .lavaLampWithImage li {
  11. float: left;
  12. list-style: none;
  13. }
  14. .lavaLampWithImage li.back {
  15. background: url("lava.gif") no-repeat rightright -30px;
  16. width: 9px; height: 30px;
  17. z-index: 8;
  18. position: absolute;
  19. }
  20. .lavaLampWithImage li.back .left {
  21. background: url("lava.gif") no-repeat top left;
  22. height: 30px;
  23. margin-right: 9px; /* 7px is the width of the rounded shape */
  24. }
  25. .lavaLampWithImage li a {
  26. font: bold 14px arial;
  27. text-decoration: none;
  28. color: #fff;
  29. outline: none;
  30. text-align: center;
  31. top: 7px;
  32. text-transform: uppercase;
  33. letter-spacing: 0;
  34. z-index: 10;
  35. display: block;
  36. float: left;
  37. height: 30px;
  38. position: relative;
  39. overflow: hidden;
  40. margin: auto 10px;
  41. }
  42. .lavaLampWithImage li a:hover, .lavaLampWithImage li a:active, .lavaLampWithImage li a:visited {
  43. border: none;
  44. }

之后如果你的博客已经成型,可以参考以下代码:

  1. .lavaLamp a{z-index: 10;}
  2. .lavaLamp li.back {border-bottom: 3px solid #48A8A8; position: absolute;z-index: 8;}

具体的颜色,大小,间隔请自行修改,这里只提供洗方法。

3.Javascript文件加载

  1. <script type="text/javascript" src="<?php bloginfo('stylesheet_directory'); ?>/js/jquery.min.js"></script>
  2. <script type="text/javascript" src="<?php bloginfo('stylesheet_directory'); ?>/js/jquery.easing.min.js"></script>
  3. <script type="text/javascript" src="<?php bloginfo('stylesheet_directory'); ?>/js/jquery.lavalamp.min.js"></script>
  4. <script type="text/javascript">
  5. $(function() {
  6. $("#1, #2, #3").lavaLamp({
  7. fx: "backout",
  8. speed: 700,
  9. click: function(event, menuItem) {
  10. return false;
  11. }
  12. });
  13. });
  14. script>

这样以后基本就没问题了,不过不排除我写的有问题(呵呵,技术不行)。还有就是,在应用到wp自定义菜单的时候不支持多级菜单,不知道怎么解决。

顺便贴出作者地址:http://www.gmarwaha.com/blog/2007/08/23/lavalamp-for-jquery-lovers/