为了账号安全,请及时绑定邮箱和手机立即绑定

二级菜单的展开与收起

1.课程名称:二级菜单的展开效果与收起


课程章节:实现二级菜单的展开与收起效果


2.课程内容:


https://img1.sycdn.imooc.com//6341027e0001ebf814550675.jpg

鼠标离开家居后,右侧二级菜单需要消失


找到二级菜单的id

https://img1.sycdn.imooc.com//634103110001e34807520395.jpg

家居这一排的菜单id是menu, 鼠标离开家居,二级菜单消失所以是

menu.onmouseout = function(){

    submenu.className = "sub-menu hide"

    

}

https://img1.sycdn.imooc.com//63410681000101e808410584.jpg


鼠标移动到二级菜单也是会消失,所以还需要修改


鼠标停留在二级菜单不消失

https://img1.sycdn.imooc.com//63410bb60001bffb08430525.jpg


鼠标离开二级菜单后消失

submenu.onmouseout = function(){

    this.calssName ="sub-menu hide" 

}


https://img1.sycdn.imooc.com//63413cb20001dba309180570.jpg


鼠标滑过一级才能时,按照索引给予background

https://img1.sycdn.imooc.com//634140250001b2fd09830406.jpg

效果

https://img1.sycdn.imooc.com//6341405a00015ae309230459.jpg


鼠标离开后,黑色背景消失

https://img1.sycdn.imooc.com//634144400001d10411670665.jpg

完成!!


点击查看更多内容
TA 点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
数据库工程师
手记
粉丝
5
获赞与收藏
0

关注作者,订阅最新文章

阅读免费教程

  • 推荐
  • 评论
  • 收藏
  • 共同学习,写下你的评论
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消