js的下拉菜单代码
当然，下面是一个使用HTML、CSS和JavaScript创建下拉菜单的示例代码：
HTML部分
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dropdown Menu Example</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="dropdown">
<button class="dropbtn">Dropdown
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
</div>
<script src="script.js"></script>
</body>
</html>CSS部分（styles.css）
/* Basic dropdown styling */
.dropdown {
position: relative;
display: inline-block;
}
.dropbtn {
background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
.dropbtn:hover, .dropbtn:focus {
background-color: #3e8e41;
}
/* Dropdown content (hidden by default) */
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
/* Links inside the dropdown */
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #f1f1f1}
/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
display: block;
}
/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn {
background-color: #3e8e41;
}JavaScript部分（script.js）
// Optional: Add some interactivity if needed
document.querySelector('.dropbtn').addEventListener('click', function() {
var dropdownContent = document.querySelector('.dropdown-content');
if (dropdownContent.style.display === 'block') {
dropdownContent.style.display = 'none';
} else {
dropdownContent.style.display = 'block';
}
});解释
- HTML部分：定义了一个包含按钮和下拉内容的结构。
- CSS部分：设置了下拉菜单的基本样式，包括隐藏下拉内容和显示下拉内容的样式。
- JavaScript部分：添加了一个点击事件监听器，以便在点击按钮时切换下拉内容的显示状态。
应用场景
- 导航菜单：在网站或应用的导航栏中使用下拉菜单来组织更多的链接。
- 设置菜单：在应用的设置页面中使用下拉菜单来提供不同的选项。
- 用户菜单：在用户头像旁边使用下拉菜单来提供用户相关的操作，如登录、注销、个人资料等。
这个示例展示了如何创建一个基本的下拉菜单，并且可以通过CSS和JavaScript进行进一步的自定义和扩展。
相关·内容
高校公开课
Techo Youth3月高校公开课：教练我想学编程：程序员的打怪升级之路
微搭低代码直播互动专栏
「低代码·用微搭」第四期： 微信生态中的微搭力量
高校公开课
Techo Youth6月高校开发者公开课：不会写代码的设计不是好运营？如云开发般多元的鹅厂经历分享
“中小企业”在线学堂
亮点回顾：企业流程数字化管理效率提升如何在短平快场景落地？
微搭低代码直播互动专栏
「低代码·用微搭」第一期： 微搭企业应用搭建能力详解
微搭低代码系列直播课
「低代码·用微搭」第二期： 微搭低代码产品全景介绍
微搭低代码直播互动专栏
「低代码·用微搭」第三期： 微搭低代码编辑器全解
微搭低代码直播互动专栏
「低代码·用微搭」第五期： 解码微搭低代码数据源能力
微搭低代码直播互动专栏
「低代码·用微搭」第六期：微搭实战-快速搭建餐饮预约小程序
云+社区技术沙龙[第14期]
Serverless架构开发与SCF部署实践
云+社区技术沙龙[第9期]
移动开发云端新模式探索实践
随心所欲定制请求 - API 网关自定义插件实战分享
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
腾讯会议
云直播活动推荐
腾讯云开发者
