原生js应用setTimeout实现下拉菜单

今天实现一个很简单的下拉菜单的小实例,也就是鼠标移入菜单,它的子菜单出现并延迟消失。大概效果如下图:

来看下布局:

<div class="menu" id="menu">主菜单</div>
<ul class="mList" id="mList">
    <li>下拉菜单一</li>
    <li>下拉菜单二</li>
    <li>下拉菜单三</li>
    <li>下拉菜单四</li>
</ul>

关于css代码:

<style>
    ul,li{list-style: none;margin: 0;padding:0;}
    a{text-decoration: none}
    .menu{padding:0 10px;border-radius:5px;background-color:#1E9FFF;color:#fff;width:100px;height:35px;line-height:35px;text-align: center;float:left;margin-right:10px;}
    .mList {overflow: hidden;position:absolute;top:50px;border:1px solid #e5e5e5;border-radius: 5px;background-color: #c6d4ff; display:none;}
    .mList li{float:left;padding:0 10px;margin:5px 0;border-right:1px solid #e5e5e5;}
    .mList li:last-child{border-right:none;}
</style>

js如下:

<script>
    window.onload=function(){
        var oMenu=document.getElementById("menu");
        var omList=document.getElementById("mList");
        var timer=null;
        oMenu.onmouseover=function(){
            show();
        };
        oMenu.onmouseout=function(){
           hide();

        };
        omList.onmouseover=function(){
            show();
        };
        omList.onmouseout=function(){
            hide();
        };
        //代码合并
        function show(){
            clearInterval(timer);//鼠标移入时,先要清除掉定时器
            omList.style.display="block"
        }
        function hide(){//鼠标移出时要让子菜单缓缓(先显示1秒)的消失
            timer=setTimeout(function(){
                omList.style.display="none"
            },1000);
        }
    }
</script>

以上例子总结一下三点:

1、首先看布局,主菜单div没有包含子菜单,这样的话不同于被包含的关系,扩展性应该会强一些;

2、鼠标移出事件开启时,并没有让子菜单立刻消失,而是先显示了1秒,方便鼠标移入子菜单;

3、鼠标移入主菜单时,一定要先清除定时器,否则显示效果会受到影响。

好了,就是这样了,不过这是单个菜单的若是多个的话应该也是可以扩展的,大家可以试试看!

转载于:https://www.cnblogs.com/web001/p/8067810.html

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值