<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>菜单组件库</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
body {
background: linear-gradient(135deg, #f5f7fa 0%, #e4e8f0 100%);
color: #333;
line-height: 1.6;
padding: 20px;
min-height: 100vh;
}
.container {
max-width: 1200px;
margin: 0 auto;
}
header {
text-align: center;
padding: 40px 20px;
margin-bottom: 30px;
background: linear-gradient(120deg, #4361ee, #3a0ca3);
color: white;
border-radius: 12px;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}
header h1 {
font-size: 2.8rem;
margin-bottom: 15px;
}
header p {
font-size: 1.2rem;
max-width: 800px;
margin: 0 auto;
opacity: 0.9;
}
.menu-types {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 30px;
margin-bottom: 50px;
}
.menu-card {
background: white;
border-radius: 12px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
overflow: hidden;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.menu-card:hover {
transform: translateY(-10px);
box-shadow: 0 12px 25px rgba(0, 0, 0, 0.15);
}
.card-header {
background: linear-gradient(120deg, #4cc9f0, #4895ef);
color: white;
padding: 20px;
display: flex;
align-items: center;
gap: 12px;
}
.card-header i {
font-size: 1.5rem;
}
.card-content {
padding: 25px;
}
.card-content h3 {
margin-bottom: 15px;
color: #3a0ca3;
font-size: 1.4rem;
}
.card-content p {
color: #555;
margin-bottom: 20px;
}
/* 基础菜单样式 */
.menu {
list-style: none;
background: white;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08);
}
.menu-item {
position: relative;
}
.menu-link {
display: block;
padding: 12px 20px;
text-decoration: none;
color: #333;
transition: all 0.3s ease;
display: flex;
align-items: center;
gap: 10px;
}
.menu-link:hover {
background: #f0f5ff;
color: #4361ee;
}
.menu-link i {
width: 20px;
text-align: center;
}
/* 水平菜单 */
.horizontal-menu {
display: flex;
}
.horizontal-menu .menu-item {
border-right: 1px solid #eee;
}
.horizontal-menu .menu-item:last-child {
border-right: none;
}
/* 垂直菜单 */
.vertical-menu .menu-item {
border-bottom: 1px solid #eee;
}
.vertical-menu .menu-item:last-child {
border-bottom: none;
}
/* 下拉菜单 */
.dropdown-menu {
position: absolute;
top: 100%;
left: 0;
width: 200px;
background: white;
border-radius: 8px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
z-index: 100;
opacity: 0;
visibility: hidden;
transform: translateY(10px);
transition: all 0.3s ease;
}
.menu-item:hover .dropdown-menu {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
/* 上下文菜单 */
.context-menu {
position: fixed;
width: 200px;
background: white;
border-radius: 8px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
z-index: 1000;
display: none;
}
.context-area {
height: 180px;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(45deg, #f8f9fa, #e9ecef);
border: 2px dashed #adb5bd;
border-radius: 8px;
margin-top: 20px;
color: #6c757d;
font-weight: 500;
cursor: pointer;
transition: all 0.3s ease;
}
.context-area:hover {
background: linear-gradient(45deg, #e9ecef, #dee2e6);
border-color: #6c757d;
}
/* 汉堡菜单 */
.hamburger-menu {
display: none;
position: fixed;
top: 20px;
right: 20px;
background: #4361ee;
color: white;
width: 60px;
height: 60px;
border-radius: 50%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
cursor: pointer;
z-index: 1000;
box-shadow: 0 5px 15px rgba(67, 97, 238, 0.4);
}
.hamburger-menu span {
display: block;
width: 30px;
height: 3px;
background: white;
margin: 3px 0;
border-radius: 2px;
transition: all 0.3s ease;
}
.mobile-menu {
position: fixed;
top: 0;
right: -300px;
width: 280px;
height: 100%;
background: white;
z-index: 999;
transition: right 0.4s ease;
box-shadow: -5px 0 15px rgba(0, 0, 0, 0.1);
padding: 80px 20px 20px;
overflow-y: auto;
}
.mobile-menu.active {
right: 0;
}
.mobile-menu .menu {
box-shadow: none;
}
.overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
z-index: 998;
display: none;
}
footer {
text-align: center;
padding: 30px;
color: #6c757d;
margin-top: 20px;
border-top: 1px solid #e9ecef;
}
@media (max-width: 768px) {
.menu-types {
grid-template-columns: 1fr;
}
header h1 {
font-size: 2.2rem;
}
}
</style>
</head>
<body>
<div class="hamburger-menu" id="hamburgerMenu">
<span></span>
<span></span>
<span></span>
</div>
<div class="mobile-menu" id="mobileMenu">
<ul class="menu vertical-menu">
<li class="menu-item"><a href="#" class="menu-link"><i class="fas fa-home"></i> 首页</a></li>
<li class="menu-item">
<a href="#" class="menu-link"><i class="fas fa-th"></i> 产品 <i class="fas fa-chevron-right" style="margin-left: auto;"></i></a>
<ul class="dropdown-menu">
<li class="menu-item"><a href="#" class="menu-link">产品列表</a></li>
<li class="menu-item"><a href="#" class="menu-link">新品上市</a></li>
<li class="menu-item"><a href="#" class="menu-link">热销产品</a></li>
</ul>
</li>
<li class="menu-item"><a href="#" class="menu-link"><i class="fas fa-info-circle"></i> 关于我们</a></li>
<li class="menu-item"><a href="#" class="menu-link"><i class="fas fa-envelope"></i> 联系我们</a></li>
<li class="menu-item"><a href="#" class="menu-link"><i class="fas fa-cog"></i> 设置</a></li>
</ul>
</div>
<div class="overlay" id="overlay"></div>
<div class="container">
<header>
<h1><i class="fas fa-bars"></i> 菜单组件库</h1>
<p>五种不同类型的菜单组件实现，适用于各种网站和应用场景</p>
</header>
<div class="menu-types">
<!-- 水平菜单 -->
<div class="menu-card">
<div class="card-header">
<i class="fas fa-align-justify"></i>
<h2>水平菜单</h2>
</div>
<div class="card-content">
<h3>顶部导航的最佳选择</h3>
<p>水平菜单常用于网站主导航，提供清晰的页面结构，适合展示主要栏目。</p>
<ul class="menu horizontal-menu">
<li class="menu-item"><a href="#" class="menu-link"><i class="fas fa-home"></i> 首页</a></li>
<li class="menu-item">
<a href="#" class="menu-link"><i class="fas fa-th"></i> 产品 <i class="fas fa-chevron-down" style="margin-left: auto;"></i></a>
<ul class="dropdown-menu">
<li class="menu-item"><a href="#" class="menu-link">产品列表</a></li>
<li class="menu-item"><a href="#" class="menu-link">新品上市</a></li>
<li class="menu-item"><a href="#" class="menu-link">热销产品</a></li>
</ul>
</li>
<li class="menu-item"><a href="#" class="menu-link"><i class="fas fa-info-circle"></i> 关于我们</a></li>
<li class="menu-item"><a href="#" class="menu-link"><i class="fas fa-envelope"></i> 联系我们</a></li>
</ul>
</div>
</div>
<!-- 垂直菜单 -->
<div class="menu-card">
<div class="card-header">
<i class="fas fa-list"></i>
<h2>垂直菜单</h2>
</div>
<div class="card-content">
<h3>侧边栏导航的理想方案</h3>
<p>垂直菜单适用于侧边栏导航，可以展示更多菜单项，支持多级嵌套。</p>
<ul class="menu vertical-menu">
<li class="menu-item"><a href="#" class="menu-link"><i class="fas fa-user"></i> 个人资料</a></li>
<li class="menu-item"><a href="#" class="menu-link"><i class="fas fa-history"></i> 历史记录</a></li>
<li class="menu-item">
<a href="#" class="menu-link"><i class="fas fa-cog"></i> 设置 <i class="fas fa-chevron-down" style="margin-left: auto;"></i></a>
<ul class="dropdown-menu">
<li class="menu-item"><a href="#" class="menu-link">账户设置</a></li>
<li class="menu-item"><a href="#" class="menu-link">隐私设置</a></li>
<li class="menu-item"><a href="#" class="menu-link">通知设置</a></li>
</ul>
</li>
<li class="menu-item"><a href="#" class="menu-link"><i class="fas fa-question-circle"></i> 帮助中心</a></li>
<li class="menu-item"><a href="#" class="menu-link"><i class="fas fa-sign-out-alt"></i> 退出登录</a></li>
</ul>
</div>
</div>
<!-- 下拉菜单 -->
<div class="menu-card">
<div class="card-header">
<i class="fas fa-caret-down"></i>
<h2>下拉菜单</h2>
</div>
<div class="card-content">
<h3>层级导航的完美解决方案</h3>
<p>下拉菜单用于展示二级导航，节省空间的同时提供更多选项。</p>
<div style="display: flex; justify-content: center; margin-top: 20px;">
<div style="position: relative; display: inline-block;">
<button style="padding: 10px 20px; background: #4361ee; color: white; border: none; border-radius: 8px; cursor: pointer; font-size: 1rem;">
<i class="fas fa-user-circle"></i> 用户菜单 <i class="fas fa-chevron-down"></i>
</button>
<ul class="dropdown-menu" style="left: 0; top: 110%;">
<li class="menu-item"><a href="#" class="menu-link"><i class="fas fa-user"></i> 个人资料</a></li>
<li class="menu-item"><a href="#" class="menu-link"><i class="fas fa-cog"></i> 账户设置</a></li>
<li class="menu-item"><a href="#" class="menu-link"><i class="fas fa-bell"></i> 通知</a></li>
<li class="menu-item"><a href="#" class="menu-link"><i class="fas fa-sign-out-alt"></i> 退出</a></li>
</ul>
</div>
</div>
</div>
</div>
<!-- 上下文菜单 -->
<div class="menu-card">
<div class="card-header">
<i class="fas fa-mouse-pointer"></i>
<h2>上下文菜单</h2>
</div>
<div class="card-content">
<h3>右键菜单的专业实现</h3>
<p>上下文菜单在用户右键点击时出现，提供上下文相关的操作选项。</p>
<div class="context-area" id="contextArea">
在此区域右键点击显示上下文菜单
</div>
<ul class="context-menu" id="contextMenu">
<li class="menu-item"><a href="#" class="menu-link"><i class="fas fa-plus"></i> 新建</a></li>
<li class="menu-item"><a href="#" class="menu-link"><i class="fas fa-copy"></i> 复制</a></li>
<li class="menu-item"><a href="#" class="menu-link"><i class="fas fa-cut"></i> 剪切</a></li>
<li class="menu-item"><a href="#" class="menu-link"><i class="fas fa-paste"></i> 粘贴</a></li>
<li class="menu-item"><a href="#" class="menu-link"><i class="fas fa-trash-alt"></i> 删除</a></li>
</ul>
</div>
</div>
<!-- 汉堡菜单 -->
<div class="menu-card">
<div class="card-header">
<i class="fas fa-bars"></i>
<h2>汉堡菜单</h2>
</div>
<div class="card-content">
<h3>移动端导航的首选方案</h3>
<p>汉堡菜单在移动设备上节省空间，点击展开完整的导航菜单。</p>
<div style="margin-top: 20px; text-align: center;">
<p style="margin-bottom: 15px; color: #6c757d;">点击右上角汉堡图标查看效果</p>
<div style="display: inline-block; padding: 12px 24px; background: #f0f5ff; border-radius: 8px; color: #4361ee; font-weight: 500;">
<i class="fas fa-mobile-alt"></i> 移动端友好设计
</div>
</div>
</div>
</div>
</div>
<footer>
<p>© 2023 UI组件库 | 五种菜单组件实现 | 使用纯HTML、CSS和JavaScript构建</p>
</footer>
</div>
<script>
// 移动端汉堡菜单
const hamburgerMenu = document.getElementById('hamburgerMenu');
const mobileMenu = document.getElementById('mobileMenu');
const overlay = document.getElementById('overlay');
hamburgerMenu.addEventListener('click', function() {
mobileMenu.classList.toggle('active');
overlay.style.display = mobileMenu.classList.contains('active') ? 'block' : 'none';
});
overlay.addEventListener('click', function() {
mobileMenu.classList.remove('active');
overlay.style.display = 'none';
});
// 上下文菜单
const contextArea = document.getElementById('contextArea');
const contextMenu = document.getElementById('contextMenu');
contextArea.addEventListener('contextmenu', function(e) {
e.preventDefault();
// 设置菜单位置
const x = e.clientX;
const y = e.clientY;
contextMenu.style.display = 'block';
contextMenu.style.left = x + 'px';
contextMenu.style.top = y + 'px';
});
// 点击页面其他地方关闭上下文菜单
document.addEventListener('click', function() {
contextMenu.style.display = 'none';
});
// 阻止上下文菜单的默认行为
contextMenu.addEventListener('contextmenu', function(e) {
e.preventDefault();
});
// 为所有菜单项添加点击效果
document.querySelectorAll('.menu-link').forEach(item => {
item.addEventListener('click', function(e) {
e.preventDefault();
alert(`您点击了: ${this.textContent.trim()}`);
});
});
</script>
</body>
</html>
浙公网安备 33010602011771号