网站建设谈单思路

帮朋友做个小导航时用到了下拉菜单，话说WordPress3.0以上版本的wp_nav_menu（）真是好用，加上主题自定义菜单的设置简直可以说是完美的网站导航。

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

div class="menu-菜单名-container"
ul class="menu" id="menu-菜单名"
li class="menu-tiem"a href="#"菜单项目1/a
ul class="sub-menu"
lia href="#"子菜单项目1-1/a/li
lia href="#"子菜单项目1-2/a/li
…
/ul
/li
lia href="#"菜单项永州网站建设公司 目2/a/li
/ul
/div

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

.menu li a { float:left; height:35px; width:100px;/*菜单高度与宽度*/ line-height:35px; text-align:center; color：#ccc; text-align:center; }

.menu li { float:left; height:1%; background:#000; }

.menu-sjys-container { position:absolute; z-index:1000;}

.menu li ul li { clear:both; border-bottom:1px solid #333; border-right:none; }

镇江网站建设公司

.menu-item { position:relative; border-right:1px dotted #333; }

.menu-item:hover.sub-menu{ display:block; /*下拉效果只用到这一段代码*/ }

.sub-menu { position:relative; left:1px; margin:0; z-index:101; display:none;/*一般情况下隐藏子菜单*/ }

.sub-menu ul.sub-menu { position:absolute; left:100px; top:0;}

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

![if lt IE 7]
script type="text/javascript"
//![CDATA[
/*导航联动效果*/
(function(){
function getElementsByClass(searchClass,node,tag) {
var classElements = new Array();
if ( node == null )
node = document;
if ( tag == null )
tag = '*';
var els = node.getElementsByTagName(tag);
var elsLen = els.length;
var pattern = new RegExp("(^|\\s)"+searchClass+"(\\s|$)");
for (i = 0, j = 0; i elsLen; i++) {
if ( pattern.test(els[i].className) ) {
classElements[j] = els[i];
j++;
} 网站建设谈单思路
}
return classElements;
}
function hoverSubMenu(node, flag) {
node.onmouseover = function() {
var subMenu = getElementsByClass("sub-menu", this)[0];
if (subMenu) {
subMenu.style.display = "block";
}
}
node.onmouseleave 辽源网站建设公司= function() {
var subMenu = getElementsByClass("sub-menu", this)[0];
if (subMenu) {
subMenu.style.display = "none";
}
}
}
var menuItems = getElementsByClass("menu-item");
for (var i=0; imenuItems.length; i++) {
hoverSubMenu(menuItems[i], i);
}
})();
//]]
/script
![endif]

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

原文地址：http://www.keelii.com/wordpress-wp-nav-menu/