如果我把一級菜單和二級菜單分開寫那應該怎么實現(xiàn)本案例特效
<div class="shopClass ">
? <h3>全部商品分類<i class="shopClass_icon"></i></h3>
? <div class="shopClass_show ">
? ? ?<dl class="shopClass_item">
? ? ? ? <dt><a href="#" class="b">品牌商家</a> <a href="#" class="b">元祖</a> <a href="#" class="aLink">麥當勞</a></dt>
? ? ? ? <dd><a href="#">至尊披薩</a> <a href="#">85°C</a> <a href="#">一盒糖</a></dd>
? ? ?</dl>
<div>
<div class="shopClass_list ">
? ? ?<dl class="shopList_item">
? ? ? ? <dt>電腦裝機</dt>
? ? ? ? <dd>
? ? ? ? ? ?<a href="#">文字啊</a><a href="#">文字字啊</a><a href="#">文字字字啊</a><a href="#">文字啊</a><a href="#">文字</a><a href="#">文字啊</a>
? ? ? ? </dd>
? ? ?</dl>
<div>
好像上面一樣。我把一級菜單和二級菜單分開寫的話,要怎么實現(xiàn)這個懸浮層的特效?
2016-04-05
不好意思,之前那個有錯。
window.onload=function ?() {
var x=document.getElementsByClassName("aLink"),
p=document.getElementsByClassName("shopList_item");
var timer=null;
x[0].onmouseover=p[0].onmouseover=function(){
p[0].style.display="block";
clearTimeout(timer);
};
x[0].onmouseout=p[0].onmouseout=function(){
timer=setTimeout(function(){
p[0].style.display="none";
},300);
}
};
2016-04-05
嗯,你已經(jīng)取出了shopClass和shopClass_List的內(nèi)容,那么例如第一個商家品牌,當鼠標移入到商標品牌的時候,讓它顯示二級菜單內(nèi)容,移出隱藏,當鼠標移入二級菜單內(nèi)容時,也做顯示二級菜單內(nèi)容,移出二級菜單時,再做移出事件,隱藏二級菜單 ,但是當移出時,設置一下延遲時間,等一下再隱藏
2016-04-03
用CSS樣式把二級菜單移動到你要想顯示的位置,其余的還是用JS控制它的顯示和隱藏就好了