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

来源:3-1 JS实现特效

一望羽垠

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>

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

写回答 关注

3回答

  • shamelex
    2016-04-05 22:45:20
    已采纳

    不好意思,之前那个有错。

    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-12 17:21:50

    共 1 条回复 >

  • shamelex
    2016-04-05 21:26:42

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



  • shamelex
    2016-04-03 13:39:09

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

    shamel... 回复一望羽垠

    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 21:33:50

    共 2 条回复 >

商城分类导航效果

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

63737 学习 · 276 问题

查看课程

相似问题