                        课程
                    
                        /前端开发
                        
                            /JavaScript
                        
                        /商城分类导航效果

如果我把一级菜单和二级菜单分开写那应该怎么实现本案例特效

<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>

好像上面一样。我把一级菜单和二级菜单分开写的话，要怎么实现这个悬浮层的特效？

一望羽垠

2016-04-02

源自：商城分类导航效果 3-1

关注问题我要回答

1318

操作

收起

3 回答

shamelex 回答被采纳 +3 积分
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);

}

};

0 回复有任何疑惑可以回复我~

收起回答

一望羽垠提问者

收到！谢谢啦

2016-04-12 回复有任何疑惑可以回复我~

shamelex
2016-04-05

嗯，你已经取出了shopClass和shopClass_List的内容，那么例如第一个商家品牌，当鼠标移入到商标品牌的时候，让它显示二级菜单内容，移出隐藏，当鼠标移入二级菜单内容时，也做显示二级菜单内容，移出二级菜单时，再做移出事件，隐藏二级菜单，但是当移出时，设置一下延迟时间，等一下再隐藏

0 回复有任何疑惑可以回复我~

收起回答

shamelex
2016-04-03

用CSS样式把二级菜单移动到你要想显示的位置，其余的还是用JS控制它的显示和隐藏就好了

0 回复有任何疑惑可以回复我~

收起回答

一望羽垠提问者

就是说我用getElementsByClassName取出shopClass和shopClass_List的内容然后再用onmouseover和onmouseout的display属性控制二级菜单的隐藏和出现是吗？还有一个问题就是我鼠标一移出一级菜单的范围之后二级菜单就会不见了这个问题应该怎么解决呢

2016-04-03 回复有任何疑惑可以回复我~

shamelex 回复一望羽垠提问者

var i=getElementsByClassName('b'); var j=getElementsByClassName('shopList_item'); var timer=null; i.onmouseover=j.onmouseover=function(){ j.style.display='block'; clearTimeout(timer); }; i.onmouseout=j.onmouseout=function(){ timer=setTimeout(function(){j.style.display='none';},300);

2016-04-05 回复有任何疑惑可以回复我~

0/150

提交

取消

商城分类导航效果

参与学习 63737 人
解答问题 276 个

两种方法实现分类导航，同时扩展讲解其它商城分类导航的制作方法

进入课程

本课相似问答

1 回答如果二级菜单太长

4 回答为什么二级菜单离左边220px会和一级菜单重叠？

2 回答二级菜单打不开啊

2 回答关于二级菜单悬浮在一级菜单上的问题

2 回答二级菜单点不了

搜索更多本课相关问答

如果我把一级菜单和二级菜单分开写那应该怎么实现本案例特效

我要回答关注问题

热搜

最近搜索清空

如果我把一级菜单和二级菜单分开写那应该怎么实现本案例特效

3 回答

本课相似问答

如果我把一级菜单和二级菜单分开写那应该怎么实现本案例特效