js二级导航的一些补充

最新推荐文章于 2025-05-18 14:23:35 发布

ElinorY

最新推荐文章于 2025-05-18 14:23:35 发布

阅读量645

点赞数

CC 4.0 BY-SA版权

分类专栏： js

本文链接：https://blog.youkuaiyun.com/weixin_38269675/article/details/88888237

js 专栏收录该内容

3 篇文章

订阅专栏

这篇博客主要介绍了如何使用JS实现二级导航菜单。通过封装byId方法简化DOM操作，利用鼠标事件来控制二级菜单的显示与隐藏。在绑定主菜单事件时，通过索引定位对应的二级菜单。在鼠标移出主菜单时，隐藏二级菜单，同时解决移动到二级菜单上方时，二级菜单不能停留的问题。完整代码可参见作者的另一篇博文。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

    因为想给一级菜单设置一个半透明的背景（这个版透明背景在有背景图的情况下是可以穿透的显示背景图的）。所以单独用一个名为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;
		background-size: 100% 100%;
		-moz-background-size:100% 100%;

js部分：
封装一个方法byId可以减少书写document.getElementById的书写次数

	function byId(id){
	            return typeof(id)==="string"?document.getElementById(id):id;
		}

在js绑定主菜单事件的时候，划过哪一个主菜单，要给主菜单一个索引，直接去指向特定的某个二级菜单。下面代码是，划过主菜单显示二级菜单

	for(var i=0;i<nav.length;i++)
			{
				nav[i].id=i;
				console.log(nav[i].id);
				/*innerBox[i].style.display='none';
				sub.style.display = 'none';
				subMenu.style.display='none';*/
				nav[i].function(){
					index=this.id;
					console.log(index);
					for(var m=0;m<nav.length;m++)
					{
							innerBox[m].style.display='none';
							sub.style.display = 'none';
							subMenu.style.display='none';
					}
					innerBox[index].style.display = 'block';
					sub.style.display='block';
					subMenu.style.display = 'block';
				}
			}

在划到非一级菜单的时候需要把二级菜单隐藏起来（虽然main菜单包含了整个nav菜单项，但是nav菜单项目是main的子元素，他会继承这个onmouseout属性，所以在main里面但是非nav区域也会触发隐藏二级菜单的这个功能）

	main.function(){
				sub.style.display = 'none';
				subMenu.style.display = 'none';
			}

写到这里会遇到一个问题，二级菜单是可以正常的显示出来，收缩回去，但是当我想去移动上二级菜单上面细看的时候，二级菜单不会停留，加一个onmouseover事件即可

		sub.function(){
				sub.style.display = 'block';
				subMenu.style.display = 'block';
			}

二级菜单的收：

		sub.function(){
				sub.style.display = 'none';
			}

完整的代码参考我的另一篇博文：
js实现二级导航