html 响应式导航菜单栏
时间: 2023-11-09 18:54:22 浏览: 36
以下是一个简单的HTML响应式导航菜单栏的示例:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>响应式导航菜单栏</title>
<style>
body {
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
}
.header {
background-color: #333;
color: #fff;
padding: 20px;
}
.logo {
float: left;
font-size: 30px;
font-weight: bold;
margin: 0;
}
nav {
float: right;
}
nav ul {
margin: 0;
padding: 0;
list-style: none;
}
nav li {
display: inline-block;
margin-left: 20px;
position: relative;
}
nav a {
color: #fff;
text-decoration: none;
font-weight: bold;
padding: 10px;
display: inline-block;
}
nav a:hover {
background-color: #555;
}
@media only screen and (max-width: 600px) {
nav {
display: none;
}
.menu-icon {
display: inline-block;
float: right;
background: #333;
color: #fff;
font-size: 25px;
padding: 10px 20px;
cursor: pointer;
}
.menu-icon:hover {
background-color: #555;
}
.menu-icon .nav-dropdown {
display: none;
position: absolute;
top: 60px;
right: 0;
width: 200px;
background-color: #fff;
box-shadow: 0 2px 5px rgba(0,0,0,0.5);
}
.menu-icon .nav-dropdown li {
display: block;
margin: 0;
}
.menu-icon .nav-dropdown a {
display: block;
padding: 10px;
color: #333;
}
.menu-icon.active .nav-dropdown {
display: block;
}
}
</style>
</head>
<body>
<header class="header">
<h1 class="logo">Logo</h1>
<nav>
<ul>
<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>
</nav>
<div class="menu-icon">
<i class="fa fa-bars"></i>
<ul class="nav-dropdown">
<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>
</header>
<script>
document.querySelector('.menu-icon').addEventListener('click', function () {
document.querySelector('.menu-icon').classList.toggle('active');
});
</script>
</body>
</html>
```
此示例包括一个头部,其中包含一个标志和一个导航菜单。在较小的屏幕上,导航菜单被隐藏,并且在菜单图标被点击时显示。菜单图标是一个可点击的元素,当被点击时会触发一个JavaScript函数来切换菜单的可见性。
此示例还包括一些CSS媒体查询,以便在小屏幕设备上提供更好的用户体验。在小屏幕上,菜单项被转换为下拉菜单,该下拉菜单在菜单图标被点击时显示,并且菜单图标也被添加了一个活动类,以便在菜单可见时以不同的样式显示菜单图标。