一望羽垠
2016-04-02 15:30
<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>
好像上面一样。我把一级菜单和二级菜单分开写的话,要怎么实现这个悬浮层的特效?
不好意思,之前那个有错。
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);
}
};
嗯,你已经取出了shopClass和shopClass_List的内容,那么例如第一个商家品牌,当鼠标移入到商标品牌的时候,让它显示二级菜单内容,移出隐藏,当鼠标移入二级菜单内容时,也做显示二级菜单内容,移出二级菜单时,再做移出事件,隐藏二级菜单 ,但是当移出时,设置一下延迟时间,等一下再隐藏
用CSS样式把二级菜单移动到你要想显示的位置,其余的还是用JS控制它的显示和隐藏就好了
商城分类导航效果
63737 学习 · 276 问题
相似问题