1,157 次阅读  3 条评论  发布日期：十二 17, 2011   文章位于: WordPress  

WordPress3.0+无限级分类下拉菜单制作方法

WordPress3.0以上版本的”wp_nav_menu（）”真是好用，加上主题自定义菜单的设置简直可以说是完美的网站导航。

涉及到下拉菜单制作的方法最核心的还是鼠标移动到上面的处理。下面是调用wp_nav_menu（）函数后的HTML结构（做解释用）：

  1. <div class="menu-菜单名-container">  
  2.      <ul class="menu" id="menu-菜单名">  
  3.          <li class="menu-tiem"><a href="#">菜单项目1</a>  
  4.              <ul class="sub-menu">  
  5.                  <li><a href="#">子菜单项目1-1</a></li>  
  6.                  <li><a href="#">子菜单项目1-2</a></li>  
  7.                   …   
  8.              </ul>  
  9.          </li>  
  10.          <li><a href="#">菜单项目2</a></li>  
  11.      </ul>  
  12. </div>   

这是一种很经典很优雅的导航HTML代码，在IE6以上以及标准浏览器中要实现下拉效果只用一句CSS就能搞定。比如下面的示例代码（可自定义）：

  1. .menu li a { float:left; height:35px; width:100px;/*菜单高度与宽度*/ line-height:35px; text-align:center; color：#ccc; text-align:center; }   
  2. .menu li { float:left; height:1%; background:#000; }   
  3. .menu-sjys-container { position:absolute; z-index:1000;}   
  4. .menu li ul li { clear:both; border-bottom:1px solid #333; border-right:none; }   
  5. .menu-item { position:relative; border-right:1px dotted #333; }   
  6. .menu-item:hover>.sub-menu{ display:block; /*下拉效果只用到这一段代码*/ }   
  7. .sub-menu { position:relative; left:1px; margin:0; z-index:101; display:none;/*一般情况下隐藏子菜单*/ }   
  8. .sub-menu ul.sub-menu { position:absolute; left:100px; top:0;}   

上面的这两段代码在IE6以上以及标准浏览器中表现的很完美，原因是IE6这种老浏览器还不支持任何标签的伪类属性，即htmlTag:hover。所以为了兼容我们又不得不用JS来实现（纯CSS亦可）。我大概写了一段JS可以勉强达到效果，但不知道为什么在IE中切换菜单时会有闪动的感觉，这个得求教JS高手了哈。

  1. <!–[if lt IE 7]>   
  2. <script type="text/javascript">   
  3. //<![CDATA[   
  4. /*导航联动效果*/  
  5. (function(){ function getElementsByClass(searchClass,node,tag) {   
  6.      var classElements = new Array();   
  7.      if ( node == null )   
  8.          node = document;   
  9.      if ( tag == null )   
  10.          tag = '*';   
  11.      var els = node.getElementsByTagName(tag);   
  12.      var elsLen = els.length;   
  13.      var pattern = new RegExp("(^|\\s)"+searchClass+"(\\s|$)");   
  14.      for (i = 0, j = 0; i < elsLen; i++) {   
  15.          if ( pattern.test(els[i].className) ) {   
  16.              classElements[j] = els[i];   
  17.              j++;   
  18.          }   
  19.      }   
  20.      return classElements;   
  21.   
  22. }   
  23. function hoverSubMenu(node, flag) {   
  24.      node.onmouseover = function() {   
  25.          var subMenu = getElementsByClass("sub-menu", this)[0];   
  26.          if (subMenu) {   
  27.              subMenu.style.display = "block";   
  28.          }   
  29.      }   
  30.      node.onmouseleave = function() {   
  31.          var subMenu = getElementsByClass("sub-menu", this)[0];   
  32.          if (subMenu) {   
  33.              subMenu.style.display = "none";   
  34.          }   
  35.      }   
  36. }    
  37. var menuItems = getElementsByClass("menu-item");   
  38. for (var i=0; i<menuItems.length; i++) {   
  39.      hoverSubMenu(menuItems[i], i);   
  40. }   
  41. })();   
  42. //]]>   
  43. </script>   
  44. <![endif]—>   

问题在于W3C对onmouseout事件处理方法不是很理想，微软IE支持的onmouseleave方法确可以正常工作。

文章订阅: 订阅缤纷博客

文章标签: ,

转载文章请注明出处:WordPress3.0+无限级分类下拉菜单制作方法

更多
«
»

3 条评论 to “WordPress3.0+无限级分类下拉菜单制作方法”

  1. 陌凡 说道：
    2011 年 12 月 24 日 13:26

    呵呵，现在都3.3了吧

    回复
  2. Young Free 说道：
    2011 年 12 月 21 日 13:05

    我觉得还是直接使用知更鸟的HotNewsPro比较好，支持无限级分类菜单。后台手动拖拽，无需修改任何代码。

    回复

发表评论

友情链接

Copyright © 缤纷博客 All rights reserved   |