实现下拉列表的两种方式

最新推荐文章于 2024-11-23 10:47:42 发布

原创最新推荐文章于 2024-11-23 10:47:42 发布 · 684 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#html #javascript #css

web前端开发专栏收录该内容

7 篇文章

订阅专栏

本文介绍如何使用纯CSS及JavaScript实现下拉菜单效果，包括HTML结构、CSS样式及JavaScript交互逻辑。

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

下拉列表是网页中最为常见的结构之一，这里暂时采用两种方式：纯CSS的方法和JavaScript的方法来实现。

（PS：其实，除了下拉列表以外，还有很多在网页中使用频率较高的结构，可以自己编写好常用的代码段，以便在项目中使用提高效率。）

1、纯CSS实现：

先看看效果图：

HTML的代码很简单，就不多说了。

这里用CSS实现注意伪类和display属性的使用就好：



 
  
  
  下拉列表
 
 
   这里是纯CSS实现的下拉列表
   
  
     
   下拉列表1
	   
     item1
item2
item3
	 
下拉列表2
	   
     item1
item2
item3
item4
item5
	 
下拉列表3
   
  

 

.css {width:100%; height:30px; background-color:#ccccff; }
.css ul {list-style-type:none; font-weight:bold;}
.css ul li {float:left; border:0px black solid; position: relative;}
.css ul li a {text-decoration:none; height:20px; width:80px; background-color:#afafaf; color:white; text-align:center; float:left; padding:5px; margin-right:1px; }
.css ul li a:hover {background-color:#12aeef}
.css ul li ul {display:none; }
.css ul li:hover ul {display:block; position:absolute; top:30px; left:-40px; width:120px; z-index:5;}
.css ul li:hover li a {background:#12aeef; color:#ffffff; width: 80px; text-align:center; margin:0px;}
.css ul li:hover li a:hover {background:#6dc7ec; color:#ffffff; }

2、用JavaScript来实现：

同样，还是先上图：

HTML和上面的差不多，同时引入外部js文件：



 
  
  
   rel="stylesheet" type="text/css" href="listStyle.css" >
  
  下拉列表
 
 
   这里是JS实现的下拉列表
   
  
     
   下拉列表1
	   
     item1
item2
	 
下拉列表2
	   
     item1
item2
item3
	 
下拉列表3
	   
     item1
item2
item3
item4
item5

重要的是js文件怎么写。鼠标移动到列表项时，调用mOver( )和mOut( )方法改变当前下拉列表的display属性，实现列表下拉（当列表项有很多时，传递参数不太现实。所以其实可以用this关键字来实现，这里等以后有时间再改善吧）：

function mOver(i)
{
	Y = document.getElementById("aList"+i);
	Y.style.backgroundColor = "#12aeef";
	X = document.getElementById("list"+i);
	X.style.display = "block";
}

function mOut(i)
{
	Y = document.getElementById("aList"+i);
	Y.style.backgroundColor = "#afafaf";
	X = document.getElementById("list"+i);
	X.style.display = "none";
}

这个结构实现的方式其实有很多种，代码也可以继续完善，这里只是展示一下实现的思路。