欢迎来到雄杰鑫电商资讯网
技术教程

修复HTML、CSS和JavaScript响应式导航栏菜单无法打开的问题

聖光之護 次阅读

本文旨在解决使用HTML、CSS、Flexbox和JavaScript构建的响应式导航栏在屏幕尺寸缩小后，点击菜单图标无法展开的问题。通过将JavaScript代码从CSS文件中分离出来，并确保正确引入，可以有效地修复此问题，实现导航栏在移动端的正常显示和交互。

在构建响应式网站时，导航栏的正确显示和交互至关重要。当屏幕尺寸缩小，导航栏通常会折叠成一个菜单图标（通常是汉堡图标），点击该图标应该展开导航菜单。然而，有时会出现点击图标后菜单无法展开的问题。以下提供详细的解决方案。

问题分析

根据提供的信息，问题在于当屏幕尺寸缩小，导航栏折叠为菜单图标后，点击该图标无法触发菜单的展开。这通常是由于以下原因造成的：

  1. JavaScript代码未正确执行： 可能是因为JavaScript代码存在语法错误、未正确引入或未能正确地绑定到菜单图标的点击事件。
  2. CSS样式冲突或覆盖： CSS样式可能阻止了JavaScript代码的正常工作，或者覆盖了JavaScript代码所设置的样式。
  3. HTML结构问题： HTML结构可能存在问题，导致JavaScript代码无法正确地找到菜单图标或导航栏元素。

解决方案

解决此问题的关键在于确保JavaScript代码能够正确地执行，并且能够正确地操作HTML元素。以下是详细的步骤：

  1. 分离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");
};

  2. 正确引入JavaScript文件： 在HTML文件的

    标签或标签的末尾，使用标签放在标签之前，以避免阻塞页面的渲染。
    


    
    
    Website for Foodies!
    
    
    
    
    
    


    
    
        Foods
        
        
        
      
            
    • Home
      • 
            
    • About
      • 
            
    • Menu
      • 
            
    • Service
      • 
            
    • Contact
      • 
        
    
    
    
    
    
    
        
            
    Website for Foodies
    
            
    Food The 
     Most Precious Things
    
            Today's Menu
        
        
            @@##@@
        

    
    
    
    
    
        
            @@##@@
        
        
            About Us
            
    We speak the good
    Food Language
    
            
    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.
    
            Learn More
        
    
    
    
    
    
    
    
        
            Services
            
    We 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
    EVERYDAY!!!
    
        Let's Talk
    
    
    
    
    
        
            
                
                    
    Menu Links
    
                    
      
                        
    • Home
      • 
                        
    • About
      • 
                        
    • Menu
      • 
                        
    • Service
      • 
                        
    • Contact
      • 
                    
    
                
                
                    
    Our Service
    
                    
      
                        
    • Web Design
      • 
                        
    • Web Development
      • 
                        
    • Marketing
      • 
                        
    • Product Management
      • 
                        
    • Graphic Design
      • 
                    
    
                
                
                    
    Information
    
                    
      
                        
    • About us
      • 
                        
    • Delivery Information
      • 
                        
    • Privacy Policy
      • 
                        
    • Terms & Condition
      • 
                    
    
                
                
                    
    Contact

  3. 检查HTML结构和CSS选择器： 确保HTML结构正确，并且JavaScript代码中使用的CSS选择器能够正确地找到对应的HTML元素。例如，确保#menu-icon和.navbar这两个选择器能够正确地选中菜单图标和导航栏元素。

    
    Foods
    
    
      
        
    • Home
      • 
        
    • About
      • 
        
    • Menu
      • 
        
    • Service
      • 
        
    • Contact
      •

  4. 检查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;
    }
}

  5. 调试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
        
        
        
    
            
  • Home
    • 
            
  • About
    • 
            
  • Menu
    • 
            
  • Service
    • 
            
  • Contact
    • 
        

    

    
    

        
            
Website for Foodies

            
Food The 
 Most Precious Things

            Today's Menu
        
        
            @@##@@
        

    

    
    

        
            @@##@@
        
        
            About Us
            
We speak the good
Food Language

            
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.

            Learn More
        
    

    
    
    
    

        
            Services
            
We 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
EVERYDAY!!!

        Let's Talk
    

    
    

        
            
                
                    
Menu Links

                    
    
                        
  • Home
    • 
                        
  • About
    • 
                        
  • Menu
    • 
                        
  • Service
    • 
                        
  • Contact
    • 
                    

                
                
                    
Our Service

                    
    
                        
  • Web Design
    • 
                        
  • Web Development
    • 
                        
  • Marketing
    • 
                        
  • Product Management
    • 
                        
  • Graphic Design
    • 
                    

                
                
                    
Information

                    
    
                        
  • About us
    • 
                        
  • Delivery Information
    • 
                        
  • Privacy Policy
    • 
                        
  • Terms & Condition
    • 
                    

                
                
                    
Contact

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 app css javascript java go cookie js npm instagram

相关文章

按ESC键退出。