本文旨在解决使用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文件的
标签或标签的末尾，使用标签引入JavaScript文件。确保src属性指向正确的JavaScript文件路径。建议将标签放在标签之前，以避免阻塞页面的渲染。
<!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"> @@##@@ </div> </section> <!--About Starts--> <section class="About" id="About"> <div class="About-img"> @@##@@ </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"> @@##@@ </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"> @@##@@ </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"> @@##@@ </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"> @@##@@ <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"> @@##@@ <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"> @@##@@ <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这两个选择器能够正确地选中菜单图标和导航栏元素。
检查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):
Website for Foodies! Foods We speak the good
Food LanguageDessert 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.
Learn MoreFresh taste and great Price
@@##@@Cup Cake
Tasty Dessert
Rs. 60@@##@@Cake
Tasty Dessert
Rs. 600@@##@@Natural Ice-Cream
Tasty Dessert
Rs. 160We provide best quality food
@@##@@Order
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.
@@##@@Shipping
Fast delivery,Tracking available. Free Delivery!!!! on all the orders above Rs 500 and special coupons for all the orders above Rs 1000.
@@##@@Delivery
Delivery Anytime! Anywhere! We believe to bring small happiness in every ocassion so we always deliver on time.
We make quality food
Let's Talk
EVERYDAY!!!
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
以上就是修复HTML、CSS和JavaScript响应式导航栏菜单无法打开的问题的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1530538.html
微信扫一扫 
支付宝扫一扫 
