本教程详细指导如何为网站实现一个功能完善且响应式的导航栏，包含桌面端的下拉菜单和移动端的汉堡菜单。我们将结合html结构、css媒体查询（包括巧妙的“checkbox hack”）以及javascript交互逻辑，确保导航栏在不同屏幕尺寸下都能提供优异的用户体验，解决在小屏幕设备上导航元素截断的问题。
在现代网页设计中，响应式布局已成为不可或缺的一部分。尤其对于导航栏这种核心交互元素，无论用户使用桌面电脑、平板还是手机，都应能轻松访问。本教程将带您一步步构建一个既具备下拉菜单功能，又能在小屏幕上优雅转换为汉堡菜单的响应式导航系统。
首先，我们需要构建一个语义化且易于通过CSS和JavaScript控制的HTML结构。关键在于引入用于汉堡菜单切换的隐藏复选框和标签，并将主导航菜单包裹在相应的容器中。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>响应式导航示例</title>
<link rel="stylesheet" href="FrameDevG.css">
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://kit.fontawesome.com/afde9d8d8e.js" crossorigin="anonymous"></script>
</head>
<body class="prevent-select">
<header class="header">
<div class="container">
<div class="navbar">
<div class="logo">
<a href="#">
<img src="framelogo1.png" alt="Business Sample Logo">
</a>
</div>
<nav>
<!-- 汉堡菜单结构 -->
<div class="hamburger-menu">
<input id="menu__toggle" type="checkbox" />
<label class="menu__btn" for="menu__toggle">
<span></span>
</label>
<ul class="main_menu menu__box">
<li><a href="index.html" class="menu__item" id="home">Home</a></li>
<li><a href="FrameDevG.html" class="menu__item" id="gallery">Gallery</a></li>
<li><a href="FrameDevAbout.html" class="menu__item" id="about-us">About Us</a></li>
<div class="dropdown">
<button class="dropbtn" onclick="toggleDropdown()">Book Now<i class="fa fa-sort-desc"></i></button>
<div class="dropdown-content" id="myDropdown">
<a href="#bookframe"><i class="fa-solid fa-music"></i>Music Video</a>
<a href="#bookframe"><i class="fa-solid fa-camera"></i>Photography</a>
<a href="#bookframe"><i class="fa-solid fa-globe"></i>Website Development</a>
<a href="#bookframe"><i class="fa-solid fa-palette"></i>Graphic Design</a>
<a href="#bookframe"><i class="fa-solid fa-clapperboard"></i>Commercial</a>
<a href="#bookframe"><i class="fa-solid fa-chart-line"></i>Marketing Content</a>
</div>
</div>
</ul>
</div>
</nav>
</div>
</div>
</header>
<script src="FrameDevG.js"></script>
</body>
</html>HTML结构要点：
CSS是实现响应式布局和汉堡菜单视觉效果的关键。我们将定义默认的桌面样式，然后使用媒体查询在小屏幕上应用不同的样式，隐藏常规导航并显示汉堡菜单。
/* 基础布局和导航样式 */
.container {
width: 1200px;
margin: 0 auto;
padding: 0 15px;
}
ul {
list-style: none;
margin: 0; /* 确保列表没有默认外边距 */
padding: 0; /* 确保列表没有默认内边距 */
}
.header {
padding: 20px 50px;
background-color: rgba(255, 255, 255, 0.7);
box-shadow: 0px -3px 21px rgba(0, 0, 0, 0.25);
backdrop-filter: blur(5px);
/* position: fixed; */ /* 根据需求决定是否固定头部 */
z-index: 1;
width: 100%;
}
.navbar {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
}
.logo img {
width: 120px;
}
.header .main_menu {
display: flex; /* 桌面端主菜单横向排列 */
}
.header .main_menu li a {
display: block;
font-family: 'Josefin Sans', sans-serif;
font-weight: 700;
color: black;
text-decoration: none;
font-size: 18px;
padding: 10px 25px;
margin: 0px 3px;
}
.header .main_menu li {
position: relative;
}
#home {
background-color: #CD285B;
color: #f1f1f1;
border-radius: 5px;
}
.main_menu li:hover>a {
background-color: #FFD7E3;
border-radius: 5px;
}
/* 下拉菜单按钮样式 */
.dropbtn {
display: flex;
align-items: center;
font-family: 'Josefin Sans', sans-serif;
font-weight: 600;
background-color: #CD285B;
color: white;
padding: 12px 20px;
border-radius: 5px;
font-size: 18px;
border: none;
cursor: pointer;
height: 100%;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown .dropbtn .fa {
font-size: 12px;
}
.dropbtn .fa {
padding-left: 10px;
margin-left: 5px;
}
.dropdown-content {
display: none;
position: absolute;
font-family: 'Josefin Sans', sans-serif;
font-weight: 600;
font-size: 18px;
margin-top: 25px;
gap: 10px;
right: -27%; /* 调整位置 */
background-color: rgba(255, 255, 255, 0.7);
border: 1px solid rgba(255, 255, 255, 0.7);
box-shadow: 0px 182px 73px rgba(205, 40, 91, 0.01), 0px 103px 62px rgba(205, 40, 91, 0.05), 0px 46px 46px rgba(205, 40, 91, 0.09), 0px 11px 25px rgba(205, 40, 91, 0.1), 0px 0px 0px rgba(205, 40, 91, 0.1);
border-radius: 10px;
width: 235px;
z-index: 1;
align-items: center;
}
.dropdown-content a {
display: flex;
flex-direction: row;
align-items: center;
padding: 15px 20px;
margin: 6px;
color: black;
font-size: 16px;
color: #303030;
text-decoration: none;
}
.dropdown a:hover {
background-color: #f1f1f1;
border: 1px solid rgba(219, 0, 84, 0.588);
margin: 5px;
border-radius: 10px;
}
.dropdown:hover .dropbtn {
background-color: #cd285cdc;
transition: all .3s ease-in-out;
}
.dropdown-content .fa-solid {
color: #303030;
font-size: 16px;
padding-right: 10px;
}
.show {
display: block;
}
/* 汉堡菜单和响应式样式 */
#menu__toggle {
opacity: 0; /* 隐藏原始复选框 */
visibility: hidden; /* 确保不可见 */
}
@media (max-width: 1320px) {
.header .main_menu {
display: none; /* 在小屏幕上默认隐藏主菜单 */
}
.navbar {
justify-content: space-between; /* 调整导航栏布局 */
}
/* 汉堡按钮样式 */
.menu__btn {
position: fixed; /* 固定在视口左上角 */
top: 20px;
left: 20px;
width: 26px;
height: 26px;
cursor: pointer;
z-index: 2; /* 确保在菜单上方 */
padding-top: 10px;
}
.menu__btn > span,
.menu__btn > span::before,
.menu__btn > span::after {
display: block;
position: absolute;
width: 100%;
height: 2px;
background-color: #616161;
transition-duration: .25s; /* 动画效果 */
}
.menu__btn > span::before {
content: '';
top: -8px;
}
.menu__btn > span::after {
content: '';
top: 8px;
}
/* 汉堡菜单打开时的图标动画 */
#menu__toggle:checked + .menu__btn > span {
transform: rotate(45deg);
}
#menu__toggle:checked + .menu__btn > span::before {
top: 0;
transform: rotate(0deg);
}
#menu__toggle:checked + .menu__btn > span::after {
top: 0;
transform: rotate(90deg);
}
/* 菜单内容盒样式 */
.menu__box {
display: block;
position: fixed;
top: 0;
left: -100%; /* 默认隐藏在屏幕左侧 */
width: 300px;
height: 100%;
margin: 0;
padding: 80px 0;
list-style: none;
background-color: #ECEFF1;
box-shadow: 2px 2px 6px rgba(0, 0, 0, .4);
transition-duration: .25s; /* 滑入动画 */
z-index: 1; /* 确保在内容上方 */
}
/* 菜单打开时滑入 */
#menu__toggle:checked ~ .menu__box {
left: 0 !important;
}
/* 菜单项样式 */
.menu__item {
display: block;
padding: 12px 24px;
color: #333;
font-family: 'Roboto', sans-serif;
font-size: 20px;
font-weight: 600;
text-decoration: none;
transition-duration: .25s;
}
.menu__item:hover {
background-color: #CFD8DC;
}
/* 调整下拉菜单在汉堡菜单内的样式 */
.menu__box .dropdown {
display: block; /* 确保下拉菜单在汉堡菜单中垂直显示 */
width: 100%;
text-align: center; /* 居中按钮 */
}
.menu__box .dropbtn {
width: calc(100% - 48px); /* 适应菜单项内边距 */
margin: 12px 24px;
justify-content: center;
}
.menu__box .dropdown-content {
position: static; /* 在汉堡菜单中改为静态定位 */
width: auto;
right: auto;
margin-top: 10px;
box-shadow: none;
background-color: transparent; /* 移除背景和阴影，融入菜单 */
border: none;
padding: 0;
}
.menu__box .dropdown-content a {
padding: 8px 30px; /* 调整内边距 */
font-size: 16px;
justify-content: flex-start; /* 左对齐 */
}
}CSS样式要点：
JavaScript主要负责处理下拉菜单的显示/隐藏动画和点击外部关闭功能。对于汉堡菜单的切换，我们利用了纯CSS的“Checkbox Hack”，因此JavaScript无需介入其开闭逻辑。
var dropdownContent = document.getElementById("myDropdown");
var isOpen = false; // 跟踪下拉菜单状态
// 切换下拉菜单的显示/隐藏，带淡入淡出效果
function toggleDropdown() {
if (!isOpen) {
fadeIn(dropdownContent);
} else {
fadeOut(dropdownContent);
}
}
// 淡入效果
function fadeIn(element) {
var opacity = 0;
element.style.display = "block"; // 先显示元素
var fadeInInterval = setInterval(function() {
if (opacity < 1) {
opacity += 0.1; // 逐步增加不透明度
element.style.opacity = opacity;
} else {
clearInterval(fadeInInterval); // 达到完全不透明时停止
}
}, 30); // 每30毫秒更新一次
isOpen = true; // 更新状态
}
// 淡出效果
function fadeOut(element) {
var opacity = 1;
var fadeOutInterval = setInterval(function() {
if (opacity > 0) {
opacity -= 0.1; // 逐步减少不透明度
element.style.opacity = opacity;
} else {
clearInterval(fadeOutInterval); // 达到完全透明时停止
element.style.display = "none"; // 完全透明后隐藏元素
}
}, 30); // 每30毫秒更新一次
isOpen = false; // 更新状态
}
// 点击页面其他区域时关闭下拉菜单
window.onclick = function(event) {
// 如果点击的不是下拉按钮，则关闭下拉菜单
if (!event.target.matches('.dropbtn')) {
fadeOut(dropdownContent);
}
}JavaScript要点：
以上就是构建响应式导航栏与下拉菜单：从小屏到大屏的完美适配的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
691
收藏
