幫朋友做個(gè)小導(dǎo)航時(shí)用到了下拉菜單,話說(shuō)wordpress3.0以上版本的”wp_nav_menu()”真是好用,加上主題自定義菜單的設(shè)置簡(jiǎn)直可以說(shuō)是完美的網(wǎng)站導(dǎo)航。
涉及到下拉菜單制作的方法最核心的還是鼠標(biāo)移動(dòng)到上面的處理。下面是調(diào)用wp_nav_menu()函數(shù)后的html結(jié)構(gòu)(做解釋用):
<div class=menu-菜單名-container>
<ul class=menu id=menu-菜單名>
<li class=menu-tiem><a href=#>菜單項(xiàng)目1</a>
<ul class=sub-menu>
<li><a href=#>子菜單項(xiàng)目1-1</a></li>
<li><a href=#>子菜單項(xiàng)目1-2</a></li>
…
</ul>
</li>
<li><a href=#>菜單項(xiàng)目2</a></li>
</ul>
</div>
這是一種很經(jīng)典很優(yōu)雅的導(dǎo)航html代碼,在ie6以上以及標(biāo)準(zhǔn)瀏覽器中要實(shí)現(xiàn)下拉效果只用一句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以上以及標(biāo)準(zhǔn)瀏覽器中表現(xiàn)的很完美,原因是ie6這種老瀏覽器還不支持任何標(biāo)簽的偽類屬性,即 htmltag:hover。所以為了兼容我們又不得不用js來(lái)實(shí)現(xiàn)(純css亦可)。我大概寫(xiě)了一段js可以勉強(qiáng)達(dá)到效果,但不知道為什么在ie中切換 菜單時(shí)會(huì)有閃動(dòng)的感覺(jué),這個(gè)得求教js高手了哈。
<!–[if lt ie 7]>
<script type=text/javascript>
//<![cdata[
/*導(dǎo)航聯(lián)動(dòng)效果*/
(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; i<menuitems.length; i++) {
hoversubmenu(menuitems[i], i);
}
})();
//]]>
</script>
<![endif]—>
問(wèn)題在于w3c對(duì)onmouseout事件處理方法不是很理想,微軟ie支持的onmouseleave方法確可以正常工作。