这个博客已经过去了很久……

不过,你可以通过以下方式找到我

现在的位置: 首页 > 谈前端 > JavaScript > 正文
wordpress导航下拉二级菜单开发——php+jquery+css
2013年04月08日 JavaScript ⁄ 共 1998字 等你评论

关于二级菜单下拉效果的问题,网上我没有找到。我所参考的是我之前的主题。

反复试验研究了,终于研究出一套简单可行的方案。利用jquery的强大功能进行制作。

以下为详细过程:

 

1、下拉菜单代码部分

  1. <?php wp_nav_menu('menu=主导航&theme_location=mainmenu&depth=0&container=&container_class=&menu_id=menu-main&menu_class=top-menu'); ?>  

这个代码可以放到header.php里面,你也可以为他加一个div容器用来设置位置。

2、javascript部分

新建一个js文件或者主题原有的js文件中填写以下代码作为jquery库,显示时间我按照原来的主题添加为200,但是实际测试时候有点慢,还有残留不能快速弹回,我强烈建议各位括号里填0,因为我就是这样成功了。

  1. $(document).ready(function(){   
  2. $('ul.top-menu li').hover(function(){   
  3. $(this).find('ul:first').slideDown(200);//显示二级菜单,括号中的数字表示下拉菜单完全显示出来需要200毫秒。   
  4. $(this).addClass("hover");   
  5. },function(){   
  6. $(this).find('ul').css('display','none');   
  7. $(this).removeClass("hover");   
  8. });   
  9. function hide_submenu(){   
  10. $('ul.top-menu li').find('ul').css('display','none');   
  11. }   
  12. $('ul.top-menu li li:has(ul)').find("a:first").append(" &raquo; ");   
  13. document.onclick = hide_submenu;   
  14. });  

这一部分就是所谓的jquery,你实现要加载jquery库。加载方法如下:

引入:<script type="text/javascript" src="这个部分填写你的jquery库文件地址,也就是一个JS文件的地址,你可以用主题原有的js文件,也可以自己新建一个js文件"></script>

将以上代码放到header.php的<head>...</head>之间,用来加载js

3、CSS部分



  1. .menunav ul,.menunav li{   

  2. list-style:none;   

  3. }   

  4. ul.top-menu{   

  5. position:relative;   

  6. }   

  7. ul.top-menu li{   

  8. float:left;   

  9. }   

  10. ul.top-menu li.hover,   

  11. ul.top-menu li:hover{   

  12. positionrelative;   

  13. }   

  14. ul.top-menu li a{   

  15. width:80px;   

  16. height:35px;   

  17. display:block;   

  18. margin:0;   

  19. text-align:center;   

  20. color:#ffffff;   

  21. text-decoration:none;   

  22. font14px Verdana;   

  23. line-height35px;   

  24. }   

  25. ul.top-menu li a:hover,   

  26. ul.top-menu li.hover a{   

  27. background:#F69;   

  28. }   

  29. ul.sub-menu{   

  30. display:none;   

  31. position:absolute;   

  32. }   

  33. ul.sub-menu li{   

  34. width:100%;   

  35. clear:both  

  36. }   

  37. ul.sub-menu li a{   

  38. width150px;   

  39. height:35px;   

  40. margin:0;   

  41. text-align:left;   

  42. text-indent:12px;   

  43. font14px/35px Verdana;   

  44. }   

  45. ul.sub-menu li a:hover,   

  46. ul.sub-menu li.hover a{   

  47. background:#F7437F;   

  48. }   

  49. ul.sub-menu ul{   

  50. rightright:100%;   

  51. top:0;   

  52. }   

  53. ul.sub-menu ul a:hover{   

  54. background:#F7437F;   

  55. }  

以上代码添加到你的style.css中作为样式,我这个样式一定不适合你,但是给了你一个模板,你可以自行修改,尤其是颜色。如果出现错位情况你可以用谷歌浏览器的强大审查元素的功能进行一个个调试。

网上也有类似代码,你可以对照有什么不同,但是请按照我的建议进行设置~

友荐云推荐
×