修复HTML、CSS和JavaScript响应式导航栏菜单无法打开的问题-js教程-PHP中文网

修复html、css和javascript响应式导航栏菜单无法打开的问题

本文旨在解决使用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>标签之前，以避免阻塞页面的渲染。

无涯·问知

无涯·问知，是一款基于星环大模型底座，结合个人知识库、企业知识库、法律法规、财经等多种知识源的企业级垂直领域问答产品

查看详情

<!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

登录后复制

以上就是修复HTML、CSS和JavaScript响应式导航栏菜单无法打开的问题的详细内容，更多请关注php中文网其它相关文章！