最简单的纯CSS下拉菜单
这个例子非常基础，不依赖JavaScript，仅用CSS实现，优点是代码少，缺点是交互体验可能不是最完美的（在手机上点击菜单项后，下拉列表可能不会自动收起）。
（图片来源网络，侵删）
特点：
- 纯CSS实现。
- 结构清晰。
- 适合快速实现。
代码：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">简单CSS下拉菜单</title>
<style>
/* 重置和基础样式 */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
background-color: #f4f4f4;
}
.container {
max-width: 480px; /* 模拟手机屏幕宽度 */
margin: 0 auto;
background-color: #fff;
min-height: 100vh;
}
/* 导航栏样式 */
.navbar {
background-color: #333;
padding: 0;
}
.navbar ul {
list-style: none;
display: flex;
}
.navbar li {
position: relative; /* 为下拉菜单定位 */
}
.navbar a {
display: block;
color: white;
text-decoration: none;
padding: 15px 20px;
}
/* 下拉菜单内容 - 默认隐藏 */
.navbar ul ul {
position: absolute;
left: 0;
background-color: #444;
min-width: 200px; /* 下拉菜单宽度 */
display: none; /* 关键：默认隐藏 */
z-index: 1000;
}
/* 鼠标悬停或点击时显示下拉菜单 */
/* 在手机上，我们用 :focus-within 来模拟点击后的效果 */
.navbar li:hover > ul,
.navbar li:focus-within > ul {
display: block; /* 关键：显示下拉菜单 */
}
/* 下拉菜单里的链接样式 */
.navbar ul ul li {
width: 100%;
}
.navbar ul ul a {
padding: 10px 20px;
}
/* 页面内容 */
.content {
padding: 20px;
}
h1 {
color: #333;
}
p {
line-height: 1.6;
color: #666;
}
</style>
</head>
<body>
<div class="container">
<nav class="navbar">
<ul>
<li><a href="#">首页</a></li>
<li>
<!-- 父级菜单，点击这里会触发下拉 -->
<a href="#" tabindex="0">产品分类 <span>▼</span></a>
<ul>
<li><a href="#">手机</a></li>
<li><a href="#">电脑</a></li>
<li><a href="#">平板</a></li>
<li><a href="#">配件</a></li>
</ul>
</li>
<li><a href="#">关于我们</a></li>
<li><a href="#">联系方式</a></li>
</ul>
</nav>
<div class="content">
<h1>欢迎访问</h1>
<p>这是一个使用纯CSS实现的手机端下拉菜单导航示例，点击“产品分类”可以查看下拉选项。</p>
<p>注意：在手机上，你需要点击“产品分类”来触发下拉，但点击子菜单项后，下拉列表可能不会自动关闭。</p>
</div>
</div>
</body>
</html>
更实用的JavaScript下拉菜单（推荐）
这个例子结合了HTML、CSS和JavaScript，提供了更好的用户体验，点击菜单标题时，下拉菜单会展开；再次点击或点击页面其他地方时,菜单会收起。
特点：
（图片来源网络，侵删）
- 交互体验好（点击展开/收起）。
- 使用JavaScript控制,逻辑更灵活。
- 点击子菜单项后,下拉列表会自动关闭。
代码：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">实用JS下拉菜单</title>
<style>
/* 重置和基础样式 */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
background-color: #f4f4f4;
}
.container {
max-width: 480px;
margin: 0 auto;
background-color: #fff;
min-height: 100vh;
}
/* 导航栏样式 */
.navbar {
background-color: #2c3e50; /* 深色背景 */
}
.navbar ul {
list-style: none;
display: flex;
flex-wrap: wrap; /* 允许在小屏幕上换行 */
}
.navbar li {
position: relative;
flex: 1; /* 让菜单项平均分配宽度 */
}
.navbar a {
display: block;
color: white;
text-decoration: none;
padding: 15px;
text-align: center;
}
.navbar a.toggle::after {
content: '▼'; /* 箭头图标 */
font-size: 0.7em;
margin-left: 5px;
}
.navbar a.active.toggle::after {
content: '▲'; /* 展开时的箭头 */
}
/* 下拉菜单内容 - 默认隐藏 */
.navbar ul ul {
position: absolute;
top: 100%; /* 定位在父级菜单下方 */
left: 0;
background-color: #34495e; /* 比父级稍亮的背景 */
width: 100%; /* 宽度和父级一样 */
display: none; /* 关键：默认隐藏 */
box-shadow: 0 8px 16px rgba(0,0,0,0.1);
z-index: 1000;
}
/* 当添加 .show 类时，显示下拉菜单 */
.navbar ul ul.show {
display: block;
}
/* 下拉菜单里的链接样式 */
.navbar ul ul li {
width: 100%;
}
.navbar ul ul a {
text-align: left; /* 左对齐 */
padding: 12px 15px;
}
/* 页面内容 */
.content {
padding: 20px;
}
h1 {
color: #333;
margin-bottom: 15px;
}
p {
line-height: 1.6;
color: #666;
}
</style>
</head>
<body>
<div class="container">
<nav class="navbar">
<ul>
<li><a href="#">首页</a></li>
<li>
<!-- 父级菜单，添加 .toggle 类用于JavaScript识别 -->
<a href="#" class="toggle">产品分类</a>
<ul>
<li><a href="#">智能手机</a></li>
<li><a href="#">笔记本电脑</a></li>
<li><a href="#">平板电脑</a></li>
<li><a href="#">智能手表</a></li>
<li><a href="#">耳机音响</a></li>
</ul>
</li>
<li><a href="#">关于我们</a></li>
<li><a href="#">联系方式</a></li>
</ul>
</nav>
<div class="content">
<h1>欢迎访问</h1>
<p>这是一个结合了JavaScript的手机端下拉菜单示例，点击“产品分类”可以展开或收起下拉菜单。</p>
<p>这种交互方式在手机上非常常见和实用。</p>
</div>
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
// 获取所有带有 .toggle 类的链接
const toggleLinks = document.querySelectorAll('.navbar a.toggle');
toggleLinks.forEach(link => {
link.addEventListener('click', function(e) {
e.preventDefault(); // 阻止链接的默认跳转行为
// 获取当前链接的父级元素 <li>
const parentLi = this.parentElement;
// 获取当前链接的下一个兄弟元素 <ul> (即下拉菜单)
const dropdown = parentLi.querySelector('ul');
// 切换下拉菜单的显示状态
dropdown.classList.toggle('show');
// 切换当前链接的 active 类，以改变箭头样式
this.classList.toggle('active');
});
});
// 可选：点击页面其他地方关闭下拉菜单
document.addEventListener('click', function(e) {
// 如果点击的不是导航栏内的元素
if (!e.target.closest('.navbar')) {
// 关闭所有下拉菜单
const allDropdowns = document.querySelectorAll('.navbar ul ul');
allDropdowns.forEach(dropdown => {
dropdown.classList.remove('show');
});
// 移除所有 active 类
const allActiveLinks = document.querySelectorAll('.navbar a.toggle.active');
allActiveLinks.forEach(link => {
link.classList.remove('active');
});
}
});
});
</script>
</body>
</html>
如何使用这些代码
- 复制代码：将您选择的示例代码（HTML、CSS、JS）全部复制下来。
- 创建文件：创建一个名为
index.html的文件。 - 粘贴保存：将复制的代码粘贴到
index.html文件中,然后保存该文件。 - 在手机上查看：
- 将
index.html文件传输到您的手机上。 - 使用手机浏览器（如 Chrome、Safari、Firefox）打开这个文件。
- 您也可以将代码上传到任何网络服务器,然后用手机访问对应的网址。
- 将
总结与选择建议
- 示例一 (纯CSS)：适合对交互要求不高，希望代码极致简单的场景，它的核心是
hover或focus-within伪类。 - 示例二 (JavaScript)：强烈推荐，它提供了现代移动应用常见的点击展开/收起交互，用户体验更好，代码结构也更清晰,易于扩展和维护。
对于绝大多数手机网页项目，示例二是更好的起点。
（图片来源网络，侵删）
