收集基于CSS和JavaScript设计的50款优秀的导航菜单是一项非常有趣的任务，以下是一些示例，展示了如何通过CSS和JavaScript创建各种风格的导航菜单，这些示例包括简单的下拉菜单、侧边栏导航、汉堡菜单等。
简单下拉菜单
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dropdown Menu</title>
<style>
ul {
list-style: none;
padding: 0;
margin: 0;
background: #333;
}
li {
position: relative;
display: inline-block;
}
a {
display: block;
padding: 10px;
color: white;
text-decoration: none;
}
ul li ul {
display: none;
position: absolute;
top: 100%;
left: 0;
background: #444;
}
ul li:hover > ul {
display: block;
}
</style>
</head>
<body>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a>
<ul>
<li><a href="#">Team</a></li>
<li><a href="#">History</a></li>
</ul>
</li>
<li><a href="#">Services</a>
<ul>
<li><a href="#">Web Design</a></li>
<li><a href="#">SEO</a></li>
</ul>
</li>
<li><a href="#">Contact</a></li>
</ul>
</body>
</html>侧边栏导航菜单
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sidebar Navigation</title>
<style>
body {
font-family: Arial, sans-serif;
}
.sidebar {
height: 100%;
width: 250px;
position: fixed;
top: 0;
left: 0;
background-color: #111;
padding-top: 20px;
}
.sidebar a {
padding: 10px 15px;
text-decoration: none;
font-size: 18px;
color: white;
display: block;
}
.sidebar a:hover {
background-color: #575757;
}
.main {
margin-left: 260px;
padding: 20px;
}
</style>
</head>
<body>
<div class="sidebar">
<a href="#home">Home</a>
<a href="#services">Services</a>
<a href="#clients">Clients</a>
<a href="#contact">Contact</a>
</div>
<div class="main">
<h2>Main Content</h2>
<p>This is the main content area.</p>
</div>
</body>
</html>3. 汉堡菜单（Hamburger Menu）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hamburger Menu</title>
<style>
body {
font-family: Arial, sans-serif;
}
.menu-toggle {
display: none;
flex-direction: column;
cursor: pointer;
}
.hamburger, .bar {
height: 3px;
width: 25px;
background-color: #333;
margin: 4px 0;
transition: 0.4s;
}
.nav {
display: flex;
justify-content: space-between;
align-items: center;
background-color: #333;
padding: 10px;
}
.nav-links {
display: flex;
list-style: none;
padding: 0;
margin: 0;
}
.nav-links li {
padding: 0 15px;
}
.nav-links a {
color: white;
text-decoration: none;
}
@media (max-width: 768px) {
.menu-toggle {
display: flex;
}
.nav-links {
display: none;
flex-direction: column;
width: 100%;
}
.nav-links li {
text-align: center;
padding: 10px;
width: 100%;
}
.nav-links.active {
display: flex;
}
}
</style>
</head>
<body>
<div class="nav">
<div class="menu-toggle">
<div class="hamburger"></div>
<div class="hamburger"></div>
<div class="hamburger"></div>
</div>
<ul class="nav-links">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
<script>
const menuToggle = document.querySelector('.menu-toggle');
const navLinks = document.querySelector('.nav-links');
menuToggle.addEventListener('click', () => {
navLinks.classList.toggle('active');
});
</script>
</body>
</html>4. 悬浮导航菜单（Floating Nav Menu）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Floating Nav Menu</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
.navbar {
position: fixed;
top: 0;
left: 0;
width: 100%;
background-color: #333;
overflow: hidden;
z-index: 9999;
}
.navbar a {
float: left;
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.navbar a:hover {
background-color: #ddd;
color: black;
}
</style>
</head>
<body>
<div class="navbar">
<a href="#home">Home</a>
<a href="#about">About</a>
<a href="#services">Services</a>
<a href="#contact">Contact</a>
</div>
<div style="padding:60px;margin-top:30px;background-color:#1abc9c;height:1500px;">Scroll Down</div>
<div style="padding:60px;margin-top:30px;background-color:#2ecc71;height:1500px;">Scroll Down</div>
<div style="padding:60px;margin-top:30px;background-color:#3498db;height:1500px;">Scroll Down</div>
</body>
</html>5. 折叠式导航菜单（Accordion Menu）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Accordion Menu</title>
<style>
body {
font-family: Arial, sans-serif;
}
.accordion {
background-color: #eee;
color: #444;
cursor: pointer;
padding: 18px;
width: 100%;
border: none;
text-align: left;
outline: none;
font-size: 15px;
transition: 0.4s;
}
.panel {
padding: 0 18px;
display: none;
background-color: white;
overflow: hidden;
}
.accordion:after {
content: '\02795'; /* Unicode character for "plus" sign (+) */
font-size: 13px;
color: #777;
float: right;
margin-left: 5px;
}
.active:after {
content: "\2796"; /* Unicode character for "minus" sign (-) */
}
</style>
</head>
<body>
<button class="accordion">Section 1</button>
<div class="panel">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<button class="accordion">Section 2</button>
<div class="panel">
<p>Suspendisse vitae dictum nisi. Sed nec nulla augue, sit amet sodales nunc.</p>
</div>
<button class="accordion">Section 3</button>
<div class="panel">
<p>Integer tincidunt maximus tristique. In hac habitasse platea dictumst.</p>
</div>
<script>
var acc = document.getElementsByClassName("accordion");
for (var i = 0; i < acc.length; i++) {
acc[i].addEventListener("click", function() {
this.classList.toggle("active");
var panel = this.nextElementSibling;
if (panel.style.display === "block") {
panel.style.display = "none";
} else {
panel.style.display = "block";
}
});
}
</script>
</body>
</html>这些示例展示了如何使用CSS和JavaScript来创建不同类型的导航菜单，你可以根据需要进一步自定义和扩展这些代码。
