JS横向延时2级下拉菜单

最新推荐文章于 2022-05-19 19:37:08 发布

原创最新推荐文章于 2022-05-19 19:37:08 发布 · 1k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#定时器 #下拉菜单

javascript 专栏收录该内容

55 篇文章

订阅专栏

本文介绍如何使用JavaScript和CSS创建一个具有延迟显示功能的2级横向下拉菜单。通过设置定时器，当鼠标悬停在菜单项上时，下拉子菜单会在一段时间后自动展开，离开时则会自动收起。内容详细讲解了CSS样式和JavaScript逻辑，提供预览效果。

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

CSS样式：

body{ font-size: 12px; color: #333;}
	body, ul,h2{ margin:0;padding:0;}
	li { list-style:none;}
	a{ color: #333; text-decoration: none;}
	a:hover{ color: #f00;}
	#nav { width:100%; border:1px solid #000; margin-bottom:10px;}
	#nav li{ display:inline-block; margin:10px 20px; font-size: 16px; font-weight: bold;}
	.nav li { float:left; margin: 0 5px; font-size:12px;}
	.nav { position:absolute; border:1px solid #666; padding: 5px; display:none;}
	.n1 { left:0;}
	.n2 { left:80px;}
	.n3 { left:200px;}

HTML部分：

<div class="menu">
		<ul id="nav">
		  <li><a href="#">首页</a></li>
		  <li><a href="#">产品中心</a></li>
		  <li><a href="#">关于我们</a></li>
		</ul>
		<ul class="nav n1">
		    <li><a href="#">首页二级菜单1</a></li>
		    <li><a href="#">首页二级菜单2</a></li>
		    <li><a href="#">首页二级菜单3</a></li>
		</ul>
		<ul class="nav n2">
		    <li><a href="#">产品中心二级菜单1</a></li>
		    <li><a href="#">产品中心二级菜单2</a></li>
		    <li><a href="#">产品中心二级菜单3</a></li>
		    <li><a href="#">产品中心二级菜单4</a></li>
		</ul>
		<ul class="nav n3">
		    <li><a href="#">关于我们二级菜单1</a></li>
		    <li><a href="#">关于我们二级菜单2</a></li>
		</ul>
	</div>

JS部分：

window.onload = function(){
		var oUl = document.getElementById('nav');
		var aLi = oUl.getElementsByTagName('li');	//获取一级菜单
		var aUl = document.getElementsByTagName('ul');	//获取所有ul
		var timer = null;
		var that = '';

		// 循环遍历所有的一级菜单
		for(var i = 0; i < aLi.length; i++){
			// 这里加1的原因是第0个li所对应的ul是第1个ul
			aLi[i].index = i + 1;	
			// 鼠标经过，先关闭定时器，所有2级菜单隐藏，当前2级菜单显示
			aLi[i].onmouseover = function(){
				clearTimeout(timer);
				// 这里设置i = 1也是和上面一样，一一对应
				for(var i = 1; i< aUl.length; i++){
					aUl[i].style.display = 'none';
				}
				aUl[this.index].style.display = 'block';
			};

			// 鼠标移开时，先延时200毫秒，然后将2级菜单隐藏
			aLi[i].onmouseout = function(){
				//将当前索引值保存到that变量中
				that = this.index;
				timer = setTimeout(function(){
					aUl[that].style.display = 'none';
				},200);		
			};
		}

		// 循环遍历所有的二级菜单【原理同上】
		for(var i = 1; i < aUl.length; i++){
			// 鼠标经过2级菜单，先清空定时器，当前显示
			aUl[i].onmouseover = function(){
				clearTimeout(timer);
				this.style.display = 'block';
			};

			// 鼠标移开2级菜单，延时200毫秒后再隐藏2级菜单
			aUl[i].onmouseout = function(){
				that = this;
				timer = setTimeout(function(){
					that.style.display = 'none';
				},200);
			}
		}
	};

预览效果：