本文旨在解决使用HTML、CSS、Flexbox和JavaScript构建的响应式导航栏在屏幕尺寸缩小后，点击菜单图标无法展开的问题。通过将JavaScript代码从CSS文件中分离出来，并确保正确引入，可以有效地修复此问题，实现导航栏在移动端的正常显示和交互。
在构建响应式网站时，导航栏的正确显示和交互至关重要。当屏幕尺寸缩小，导航栏通常会折叠成一个菜单图标（通常是汉堡图标），点击该图标应该展开导航菜单。然而，有时会出现点击图标后菜单无法展开的问题。以下提供详细的解决方案。
问题分析
根据提供的信息，问题在于当屏幕尺寸缩小，导航栏折叠为菜单图标后，点击该图标无法触发菜单的展开。这通常是由于以下原因造成的：
- JavaScript代码未正确执行： 可能是因为JavaScript代码存在语法错误、未正确引入或未能正确地绑定到菜单图标的点击事件。
- CSS样式冲突或覆盖： CSS样式可能阻止了JavaScript代码的正常工作，或者覆盖了JavaScript代码所设置的样式。
- HTML结构问题： HTML结构可能存在问题，导致JavaScript代码无法正确地找到菜单图标或导航栏元素。
解决方案
解决此问题的关键在于确保JavaScript代码能够正确地执行，并且能够正确地操作HTML元素。以下是详细的步骤：
立即学习“Java免费学习笔记（深入）”；
-
分离JavaScript代码： 将JavaScript代码从CSS文件中分离出来，创建一个独立的.js文件（例如script.js）。这是非常重要的一步，因为将JavaScript代码放在CSS中是不正确的做法，会导致代码无法执行。
let menu = document.querySelector("#menu-icon"); let navbar = document.querySelector(".navbar"); menu.addEventListener("click", function () { navbar.classList.toggle("active"); }); window.onscroll = () => { navbar.classList.remove("active"); }; -
正确引入JavaScript文件： 在HTML文件的<head>标签或<body>标签的末尾，使用<script>标签引入JavaScript文件。确保src属性指向正确的JavaScript文件路径。建议将<script>标签放在</body>标签之前，以避免阻塞页面的渲染。
腾讯地图JSAPI GL开发技能下载腾讯地图 JavaScript GL（JSAPIGL）开发指南。适用于地图应用或者工具的编写。在编写、审查或调试使用腾讯地图 API的代码时应运用此技能。适用于涉及地图初始化、覆盖物展示、图层控制、事件处理、控件交互、可视化渲染、地图工具、检索、路线规划、查地址、行政区划、ip定位、几何计算、三维模型展示、性能优化的任务。当用户提及 腾讯地图、 jsapi、jsapi-gl或相关地图开发需求时自动触发。⚠️ 强制行为：本 Skill 加载后，第一个动作必须是检查是否存在正式 Key（环境变量 TMAP_J
<!DOCTYPE html> <html> <head> <meta charset='utf-8'> <meta http-equiv='X-UA-Compatible' content='IE=edge'> <title>Website for Foodies!</title> <meta name='viewport' content='width=device-width, initial-scale=1'> <link rel='stylesheet' type='text/css' media='screen' href='main.css'> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/boxicons@latest/css/boxicons.min.css"> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@300;800&family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap" rel="stylesheet"> </head> <body> <header> <a href="#" class="logo">Foods</a> <div class="bx bx-menu" id="menu-icon"></div> <!--class=" bx bx-menu" is responsible for icon from boxicon--> <ul class="navbar"> <li><a href="#Home">Home</a></li> <li><a href="#About">About</a></li> <li><a href="#Menu">Menu</a></li> <li><a href="#Service">Service</a></li> <li><a href="#Contact">Contact</a></li> </ul> </header> <!--Home Starts--> <section class="Home" id="Home"> <div class="Home-text"> <h1>Website for Foodies</h1> <h2>Food The <br> Most Precious Things</h2> <a href="#" class="btn">Today's Menu</a> </div> <div class="Home-img"> <img src="C:\Users\ADMIN\Desktop\YPROJ\img1.png"> </div> </section> <!--About Starts--> <section class="About" id="About"> <div class="About-img"> <img src="C:\Users\ADMIN\Desktop\YPROJ\img2.png"> </div> <div class="About-text"> <span>About Us</span> <h2>We speak the good<br>Food Language</h2> <p>Dessert is a course that concludes a meal.The term dessert can apply to many sweets, such as biscuits, cakes, cookies, custards, gelatins, ice creams, pastries, pies, puddings, macaroons, sweet soups, tarts, and fruit salad.</p> <a href="#" class="btn">Learn More</a> </div> </section> <!--Menu Starts--> <section class="Menu" id="Menu"> <div class="Heading"> <span>Food Menu</span> <h2>Fresh taste and great Price</h2> </div> <div class="Menu-container"> <div class="box"> <div class="box-img"> <img src="C:\Users\ADMIN\Desktop\YPROJ\img3.png"> </div> <h2>Cup Cake</h2> <h3>Tasty Dessert</h3> <span>Rs. 60</span> <i class='bx bxs-cart-alt'></i> </div> <div class="box"> <div class="box-img"> <img src="C:\Users\ADMIN\Desktop\YPROJ\img5.png"> </div> <h2>Cake</h2> <h3>Tasty Dessert</h3> <span>Rs. 600</span> <i class='bx bxs-cart-alt'></i> </div> <div class="box"> <div class="box-img"> <img src="C:\Users\ADMIN\Desktop\YPROJ\img6.png"> </div> <h2>Natural Ice-Cream</h2> <h3>Tasty Dessert</h3> <span>Rs. 160</span> <i class='bx bxs-cart-alt'></i> </div> </div> </section> <!--Service Starts--> <section class="Services" id="Services"> <div class="Heading"> <span>Services</span> <h2>We provide best quality food</h2> </div> <div class="Service-container"> <div class="S-box"> <img src="C:\Users\ADMIN\Desktop\YPROJ\My project.png"> <h3>Order</h3> <p>A literal feast to your eyes. Order and eat till your taste buds burst. Made with freshest ingredients present. Low sugar dessert available following your diet plan.</p> </div> <div class="S-box"> <img src="C:\Users\ADMIN\Desktop\YPROJ\img7.png"> <h3>Shipping</h3> <p>Fast delivery,Tracking available. Free Delivery!!!! on all the orders above Rs 500 and special coupons for all the orders above Rs 1000.</p> </div> <div class="S-box"> <img src="C:\Users\ADMIN\Desktop\YPROJ\img8.png"> <h3>Delivery</h3> <p>Delivery Anytime! Anywhere! We believe to bring small happiness in every ocassion so we always deliver on time.</p> </div> </div> </section> <!--Call to action--> <section class="cta"> <h2>We make quality food<br>EVERYDAY!!!</h2> <a href="#" class="btn">Let's Talk</a> </section> <!--Footer Start--> <section id="Contact"> <div class="Footer"> <div class="Main"> <div class="Col"> <h4>Menu Links</h4> <ul> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Menu</a></li> <li><a href="#">Service</a></li> <li><a href="#">Contact</a></li> </ul> </div> <div class="Col"> <h4>Our Service</h4> <ul> <li><a href="#">Web Design</a></li> <li><a href="#">Web Development</a></li> <li><a href="#">Marketing</a></li> <li><a href="#">Product Management</a></li> <li><a href="#">Graphic Design</a></li> </ul> </div> <div class="Col"> <h4>Information</h4> <ul> <li><a href="#">About us</a></li> <li><a href="#">Delivery Information</a></li> <li><a href="#">Privacy Policy</a></li> <li><a href="#">Terms & Condition</a></li> </ul> </div> <div class="Col"> <h4>Contact</h4> <div class="Social"> <a href="#"><i class='bx bxl-facebook-circle'></i></a> <a href="#"><i class='bx bxl-instagram-alt'></i></a> <a href="#"><i class='bx bxl-twitter'></i></a> <a href="#"><i class='bx bxl-youtube'></i></a> </div> </div> </div> </div> </section> <script type="text/javascript" src="js/script.js"></script> </body> </html> -
检查HTML结构和CSS选择器： 确保HTML结构正确，并且JavaScript代码中使用的CSS选择器能够正确地找到对应的HTML元素。例如，确保#menu-icon和.navbar这两个选择器能够正确地选中菜单图标和导航栏元素。
<header> <a href="#" class="logo">Foods</a> <div class="bx bx-menu" id="menu-icon"></div> <ul class="navbar"> <li><a href="#Home">Home</a></li> <li><a href="#About">About</a></li> <li><a href="#Menu">Menu</a></li> <li><a href="#Service">Service</a></li> <li><a href="#Contact">Contact</a></li> </ul> </header> -
检查CSS媒体查询： 确保CSS媒体查询正确地控制了导航栏在不同屏幕尺寸下的显示方式。特别要注意菜单图标的显示和隐藏，以及导航栏的展开和折叠。
@media (max-width:1140px) { #menu-icon { display: initial; color: var(--text-color); } header .navbar { position: absolute; top: -400px; left: 0; right: 0; display: flex; flex-direction: column; text-align: center; background: #2b2640; transition: .3s; } header .navbar.active { top: 70px; } .navbar a { padding: 1.5rem; display: block; } } -
调试JavaScript代码： 使用浏览器的开发者工具调试JavaScript代码，查看是否有语法错误、逻辑错误或运行时错误。可以使用console.log()语句在控制台中输出变量的值，以便了解代码的执行情况。
let menu = document.querySelector("#menu-icon"); let navbar = document.querySelector(".navbar"); console.log("Menu icon:", menu); console.log("Navbar:", navbar); menu.addEventListener("click", function () { console.log("Menu icon clicked!"); navbar.classList.toggle("active"); }); window.onscroll = () => { navbar.classList.remove("active"); };
完整代码示例
以下是完整的HTML、CSS和JavaScript代码示例，展示了如何正确地实现响应式导航栏菜单的展开和折叠。
HTML (index.html):
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<title>Website for Foodies!</title>
<meta name='viewport' content='width=device-width, initial-scale=1'>
<link rel='stylesheet' type='text/css' media='screen' href='main.css'>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/boxicons@latest/css/boxicons.min.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link
href="https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@300;800&family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap"
rel="stylesheet">
</head>
<body>
<header>
<a href="#" class="logo">Foods</a>
<div class="bx bx-menu" id="menu-icon"></div>
<!--class=" bx bx-menu" is responsible for icon from boxicon-->
<ul class="navbar">
<li><a href="#Home">Home</a></li>
<li><a href="#About">About</a></li>
<li><a href="#Menu">Menu</a></li>
<li><a href="#Service">Service</a></li>
<li><a href="#Contact">Contact</a></li>
</ul>
</header>
<!--Home Starts-->
<section class="Home" id="Home">
<div class="Home-text">
<h1>Website for Foodies</h1>
<h2>Food The <br> Most Precious Things</h2>
<a href="#" class="btn">Today's Menu</a>
</div>
<div class="Home-img">
<img src="C:\Users\ADMIN\Desktop\YPROJ\img1.png">
</div>
</section>
<!--About Starts-->
<section class="About" id="About">
<div class="About-img">
<img src="C:\Users\ADMIN\Desktop\YPROJ\img2.png">
</div>
<div class="About-text">
<span>About Us</span>
<h2>We speak the good<br>Food Language</h2>
<p>Dessert is a course that concludes a meal.The term dessert can apply to many sweets, such as biscuits,
cakes, cookies, custards, gelatins, ice creams, pastries, pies, puddings, macaroons, sweet soups, tarts,
and fruit salad.</p>
<a href="#" class="btn">Learn More</a>
</div>
</section>
<!--Menu Starts-->
<section class="Menu" id="Menu">
<div class="Heading">
<span>Food Menu</span>
<h2>Fresh taste and great Price</h2>
</div>
<div class="Menu-container">
<div class="box">
<div class="box-img">
<img src="C:\Users\ADMIN\Desktop\YPROJ\img3.png">
</div>
<h2>Cup Cake</h2>
<h3>Tasty Dessert</h3>
<span>Rs. 60</span>
<i class='bx bxs-cart-alt'></i>
</div>
<div class="box">
<div class="box-img">
<img src="C:\Users\ADMIN\Desktop\YPROJ\img5.png">
</div>
<h2>Cake</h2>
<h3>Tasty Dessert</h3>
<span>Rs. 600</span>
<i class='bx bxs-cart-alt'></i>
</div>
<div class="box">
<div class="box-img">
<img src="C:\Users\ADMIN\Desktop\YPROJ\img6.png">
</div>
<h2>Natural Ice-Cream</h2>
<h3>Tasty Dessert</h3>
<span>Rs. 160</span>
<i class='bx bxs-cart-alt'></i>
</div>
</div>
</section>
<!--Service Starts-->
<section class="Services" id="Services">
<div class="Heading">
<span>Services</span>
<h2>We provide best quality food</h2>
</div>
<div class="Service-container">
<div class="S-box">
<img src="C:\Users\ADMIN\Desktop\YPROJ\My project.png">
<h3>Order</h3>
<p>A literal feast to your eyes. Order and eat till your taste buds burst. Made with freshest
ingredients present. Low sugar dessert available following your diet plan.</p>
</div>
<div class="S-box">
<img src="C:\Users\ADMIN\Desktop\YPROJ\img7.png">
<h3>Shipping</h3>
<p>Fast delivery,Tracking available. Free Delivery!!!! on all the orders above Rs 500 and special
coupons for all the orders above Rs 1000.</p>
</div>
<div class="S-box">
<img src="C:\Users\ADMIN\Desktop\YPROJ\img8.png">
<h3>Delivery</h3>
<p>Delivery Anytime! Anywhere! We believe to bring small happiness in every ocassion so we always
deliver on time.</p>
</div>
</div>
</section>
<!--Call to action-->
<section class="cta">
<h2>We make quality food<br>EVERYDAY!!!</h2>
<a href="#" class="btn">Let's Talk</a>
</section>
<!--Footer Start-->
<section id="Contact">
<div class="Footer">
<div class="Main">
<div class="Col">
<h4>Menu Links</h4>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Menu</a></li>
<li><a href="#">Service</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
<div class="Col">
<h4>Our Service</h4>
<ul>
<li><a href="#">Web Design</a></li>
<li><a href="#">Web Development</a></li>
<li><a href="#">Marketing</a></li>
<li><a href="#">Product Management</a></li>
<li><a href="#">Graphic Design</a></li>
</ul>
</div>
<div class="Col">
<h4>Information</h4>
<ul>
<li><a href="#">About us</a></li>
<li><a href="#">Delivery Information</a></li>
<li><a href="#">Privacy Policy</a></li>
<li><a href="#">Terms & Condition</a></li>
</ul>
</div>
<div class="Col">
<h4>Contact</h4>
<div class="Social">
<a href="#"><i class='bx bxl-facebook-circle'></i></a>
<a href="#"><i class='bx bxl-instagram-alt'></i></a>
<a href="#"><i class='bx bxl-twitter'></i></a>
<a href="#"><i class='bx bxl-youtube'></i></a>
</div>
</div>
</div>
</div>
</section>
<script type="text/javascript" src="js/script.js"></script>
</body>
</html>CSS (main.css):
* {
padding: 0;
margin: 0;
box-sizing: border-box;
scroll-behavior: smooth;
font-family: 'Poppins', sans-serif;
list-style: none;
text-decoration: none;
}
:root {
/* global variables */
--main-color: #ff702a;
--text-color: #fff;
--background-color: #1e1c2a;
--big-font: 5rem;
--h2-font: 2.15rem;
--p-font: 0.9rem;
}
*::selection {
background: var(--main-color);
color: #fff;
}
body {
color: var(--text-color);
background: var(--background-color);
}
header {
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 1000;
/*z-index defines stack order of element*/
display: flex;
align-items: center;
/*controls space around cross axis*/
justify-content: space-between;
/*controls space around main axis*/
padding: 30px 170px;
background: var(--background-color);
}
.logo {
color: var(--main-color);
font-weight: 600;
font-size: 2.2rem;
}
.navbar {
display: flex;
}
.navbar li a {
color: var(--text-color);
font-size: 1.1rem;
padding: 10px 20px;
font-weight: 500;
}
.navbar li a:hover {
color: var(--main-color);
transition: .4s;
}
#menu-icon {
font-size: 2rem;
cursor: pointer;
display: none;
}
section {
padding: 70px 17%;
}
.Home {
width: 100%;
min-height: 90vh;
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-gap: 1.5rem;
align-items: center;
}
.Home-img img {
max-width: 100%;
width: 600px;
height: auto;
}
.Home-text h1 {
font-size: 3.5rem;
color: var(--main-color);
padding-top: 100px;
}
.Home-text h2 {
font-size: var(--h2-font);
margin: 1rem 0 2rem;
}
.btn {
display: inline-block;
padding: 10px 20px;
background: var(--main-color);
color: #fff;
border-radius: 0.5rem;
}
.btn:hover {
transform: scale(1.2) translateY(10px);
transition: .4s;
}
.About {
display: grid;
grid-template-columns: repeat(2, 2fr);
/*space separated tracklist*/
grid-gap: 1.5rem;
text-align: center;
}
.About-img img {
max-width: 100%;
width: 400px;
height: auto;
}
.About-text span {
color: var(--main-color);
font-weight: 600;
}
.About-text h2 {
font-size: var(--h2-font);
}
.About-text p {
margin: 0.8rem 0 1.8rem;
line-height: 1.7;
}
.Heading {
text-align: center;
}
.Heading span {
color: var(--main-color);
font-weight: 600;
}
.Heading h2 {
font-size: var(--h2-font);
}
.Menu-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, auto));
grid-gap: 1.5rem;
align-items: center;
}
.box {
position: relative;
margin-top: 4rem;
height: auto;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background: #feeee7;
padding: 20px;
border-radius: 0.5rem;
}
.box-img {
width: 220px;
height: 220px;
}
.box-img img {
width: 100%;
height: 100%;
}
.box h2 {
font-size: 1.3rem;
color: var(--background-color);
}
.box h3 {
color: var(--background-color);
font-size: 1rem;
font-weight: 400;
margin: 4px 0 10px;
}
.box span {
font-size 
