jquery滑动菜单之我用

wordpress 2011-04-08 0条评论

一开始接触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/

版权声明：本文为原创文章，版权归 neo 所有。

本文链接：https://idayer.com/jquery%e6%bb%91%e5%8a%a8%e8%8f%9c%e5%8d%95%e4%b9%8b%e6%88%91%e7%94%a8/

知识共享许可协议
本作品采用知识共享署名-非商业性使用 4.0 国际许可协议进行许可。

0 条评论