js二级导航的一些补充

这篇博客主要介绍了如何使用JS实现二级导航菜单。通过封装byId方法简化DOM操作,利用鼠标事件来控制二级菜单的显示与隐藏。在绑定主菜单事件时,通过索引定位对应的二级菜单。在鼠标移出主菜单时,隐藏二级菜单,同时解决移动到二级菜单上方时,二级菜单不能停留的问题。完整代码可参见作者的另一篇博文。
摘要由CSDN通过智能技术生成
    因为想给一级菜单设置一个半透明的背景(这个版透明背景在有背景图的情况下是可以穿透的显示背景图的)。所以单独用一个名为bg的盒子去装载这一个背景层。 设置的时候 背景色使用rgba可以调节背景图的透明度,额外的opacity可以在原基础上再进一步的调节透明度。
    先设置主菜单,因为每一个菜单项,都要绑定一个onmouseover事件,所以每一个一级菜单都要用一个div盒子装载起来(nav) 为了能够调节主菜单的大小 把他装在一个main盒子里面  nav下面设置line盒子为的是划线 
    二级菜单是一个有很多共同样式,但是又繁琐的一部分。sub盒子是整个二级菜单的大盒子 sub-menu是装载二级菜单文字内容的盒子,inner-box是装载每一个二级菜单文字的盒子。在这里需要设置3个二级菜单页面,但是因为样式一致,写好第一个样式,复制过去形成1,2,3个二级菜单页面,这里使用一个特殊的属性,overflow:hidden使得多余部分的二级菜单被隐藏,这个时候会显示第一个子菜单(a开头那页)。在这里:拥有overflow:hidden样式的块元素,不能具有position:relative和position:absolute样式 。所以这个overflow:hidden是添加在sub-menu和inner-box上面的就不会使得inner-box和sub-menu向下移20px的距离了。一开始是以为background无法铺满整个盒子导致的,检查元素后发现只是它的盒子下移,又被overflow:hidden掉了。
    下面补充使得图片平铺满盒子的方法:
		background-image: url('img/bg.jpg');
		background-repeat: no-repeat;
		ba
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值