当我点击汉堡时，导航栏菜单不显示

问题描述 投票：0回答：1

我的代码有问题。我想制作一个响应式导航栏，但是，虽然当我点击汉堡时它变成“X”，但菜单没有显示。我真的不明白，这让我发疯。

感谢任何可以启发我的人。

HTML代码（我把JS放在HTML中）：

var typed = new Typed(".auto-type", {
    strings : ["WEB", "MOBILE", "PHP"],
    typeSpeed : 300,
    backSpeed : 300,
    loop : true
});

const hamburger = document.querySelector(".hamburger");
const navbarNav = document.querySelector(".container .navbar_nav");

hamburger.addEventListener("click", mobileMenu);

function mobileMenu() {
    hamburger.classList.toggle("active");
    navbarNav.classList.toggle("active");
}

const navLink = document.querySelectorAll(".cat");

navLink.forEach(n => n.addEventListener("click", closeMenu));

function closeMenu() {
    hamburger.classList.remove("active");
    navbarNav.classList.remove("active");
}
* {
    right: 0;
    left: 0;
}

body {
    margin: 0;
    padding: 0;
    width: 100%;
}

/* DEBUT PARTIE NAVBAR */
.container {
    margin-right: 3%;
    margin-left : 3%;
}

.navbar {
    position: fixed;
    display: flex;
    align-items: center;
    background-color: black;
    justify-content: center;
    z-index: 100;
}

.navbar_nav {
    display: flex;
    list-style: none;
    align-items: center;
    padding : 0 10px 0 10px;
   /* margin-right: 30%; */
   /* margin-left: -30%; */
}

.navbar_brand {
    margin-right: auto;
    margin-left: 9%;
}


#logo {
    height: 40px;
    width: 150px;
}

li {
    display: inline-block;
    padding-right: 14px;
}


.cat {
    text-decoration: none;
    color: rgb(255, 255, 255);
    font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
    font-size: 21px;
    padding: 12px;
    width: 25%; 
    text-align: center; 
}

.cat:hover {
    color: #007FFF;
}

.cat:active {
    color: #007FFF;
    background-color: white;
}

.social-media {
    margin-right: 9%;
}

.social-icon {
    height: 20px;
}

a:active {
    background-color: #007FFF;
    color: white;
  }


  .hamburger {
    display: none;
}

  .bar {
    display: block;
    width: 25px;
    height: 3px;
    margin: 5px auto;
    -webkit-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
    background-color: #101010;
}

/* FIN PARTIE NAVBAR */




#backgroundimage {
    background-image: url("../img/Frame\ 1.png");
    width: 100vw;
    height: 100vh; 
    background-size: 100% 100%;
    background-repeat: no-repeat;
    position: relative;
    /*filter: brightness(15%);*/
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    } 

.msg {
    color: rgb(255, 255, 255);
    font-size: 75px;
    font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
}

span {
    color: #007FFF;
    font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
}





@media screen and (max-width: 1075px) {
    .navbar_nav {
        position: fixed;
        display: flex;
        align-items: center;
        background-color: black;
        justify-content: center;
        z-index: 100;
    }

    .navbar_nav.active {
        left: 0;
    }
    #logo {
        margin-top: 10px;
        height: 47px;
        width: 169px;
    }


    .cat {
        text-decoration: none;
        color: rgb(255, 255, 255);
        font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
        font-size: 20px;
        padding: 12px;
        width: 25%; 
        text-align: center; 
        display: none;
        margin: 2.5rem 0;
    }

    .social-media {
        display: none;
    }
    
    .social-icon {
        display: none;
    }

    .hamburger {
        display: block;
        cursor: pointer;
        color: white;
        padding-right: 9%;
    }

    .hamburger.active .bar:nth-child(2) {
        opacity: 0;
    }

    .hamburger.active .bar:nth-child(1) {
        transform: translateY(8px) rotate(45deg);
    }

    .hamburger.active .bar:nth-child(3) {
        transform: translateY(-8px) rotate(-45deg);
    }

    .bar {
        display: block;
        width: 25px;
        height: 3px;
        margin: 5px auto;
        -webkit-transition: all 0.3s ease-in-out;
        transition: all 0.3s ease-in-out;
        background-color: #007FFF;
}
}

@media screen and (max-width: 600px) {
    
    .msg {
        color: rgb(255, 255, 255);
        font-size: 55px;
        font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
        justify-content: center;
        text-align: center;
    }
    
    span {
        color: #007FFF;
        font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
        justify-content: center;
        text-align: center;
    }
    
    
}
<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Urban Web Solutions</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>

    <!--LA PARTIE CONCERNANT LA NAVBAR-->
    <nav id="navbar" class="navbar">
        <a class="navbar_brand" href="index.html"><img id="logo" src="img/logo.png" alt=""></a>
        
        <div class="container">
            <ul class="navbar_nav">
                <li ><a  class="cat" href="index.html">ACCUEIL</a></li>
                <li><a class="cat" href="#">NOTRE AGENCE</a></li>
                <li><a class="cat" href="#services">NOS OFFRES</a></li>
                <li><a class="cat" href="">NOUS CONTACTER</a></li>
            </ul>            
        </div>
        <div class="social-media">
            <a href=""><img class="social-icon" src="img/fb.png" alt=""></a>
            <a href=""><img class="social-icon" src="img/twitter_3256013.png" alt=""></a>
            <a href=""><img class="social-icon" src="img/in.png" alt=""></a>
        </div>

        <div class="hamburger">
            <span class="bar"></span>
            <span class="bar"></span>
            <span class="bar"></span>
        </div>
    </nav>
    <!--FIN DE LA PARTIE CONCERNANT LA NAVBAR-->

    <header>
        <div id="backgroundimage">
            <h1 class="msg">DÉVELOPPEUR <span class="auto-type"></span></h1>
        </div>
    </header>

    <main>

    </main>

    <script src="https://unpkg.com/[email protected]/dist/typed.umd.js"></script>

</body>
</html>

javascript html css navbar responsive
1个回答
0
投票

在 

.cat
'css 中，您将锚点设置为不显示。但你从未将它们设置为显示。

在 CSS 中，当 navbar_nav 处于活动状态时，我使用下面的内容来显示 .cat 锚点。

.navbar_nav.active .cat{
  display:block
}


var typed = new Typed(".auto-type", {
    strings : ["WEB", "MOBILE", "PHP"],
    typeSpeed : 300,
    backSpeed : 300,
    loop : true
});

const hamburger = document.querySelector(".hamburger");
const navbarNav = document.querySelector(".container .navbar_nav");

hamburger.addEventListener("click", mobileMenu);

function mobileMenu() {
    hamburger.classList.toggle("active");
    navbarNav.classList.toggle("active");
}

const navLink = document.querySelectorAll(".cat");

navLink.forEach(n => n.addEventListener("click", closeMenu));

function closeMenu() {
    hamburger.classList.remove("active");
    navbarNav.classList.remove("active");
}
* {
    right: 0;
    left: 0;
}

body {
    margin: 0;
    padding: 0;
    width: 100%;
}

/* DEBUT PARTIE NAVBAR */
.container {
    margin-right: 3%;
    margin-left : 3%;
}

.navbar {
    position: fixed;
    display: flex;
    align-items: center;
    background-color: black;
    justify-content: center;
    z-index: 100;
}

.navbar_nav {
    display: flex;
    list-style: none;
    align-items: center;
    padding : 0 10px 0 10px;
   /* margin-right: 30%; */
   /* margin-left: -30%; */
}

.navbar_brand {
    margin-right: auto;
    margin-left: 9%;
}


#logo {
    height: 40px;
    width: 150px;
}

li {
    display: inline-block;
    padding-right: 14px;
}


.cat {
    text-decoration: none;
    color: rgb(255, 255, 255);
    font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
    font-size: 21px;
    padding: 12px;
    width: 25%; 
    text-align: center; 
}

.navbar_nav.active .cat{
  display:block
}

.cat:hover {
    color: #007FFF;
}

.cat:active {
    color: #007FFF;
    background-color: white;
}

.social-media {
    margin-right: 9%;
}

.social-icon {
    height: 20px;
}

a:active {
    background-color: #007FFF;
    color: white;
  }


  .hamburger {
    display: none;
}

  .bar {
    display: block;
    width: 25px;
    height: 3px;
    margin: 5px auto;
    -webkit-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
    background-color: #101010;
}

/* FIN PARTIE NAVBAR */




#backgroundimage {
    background-image: url("../img/Frame\ 1.png");
    width: 100vw;
    height: 100vh; 
    background-size: 100% 100%;
    background-repeat: no-repeat;
    position: relative;
    /*filter: brightness(15%);*/
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    } 

.msg {
    color: rgb(255, 255, 255);
    font-size: 75px;
    font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
}

span {
    color: #007FFF;
    font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
}





@media screen and (max-width: 1075px) {
    .navbar_nav {
        position: fixed;
        display: flex;
        align-items: center;
        background-color: black;
        justify-content: center;
        z-index: 100;
    }

    .navbar_nav.active {
        left: 0;
    }
    #logo {
        margin-top: 10px;
        height: 47px;
        width: 169px;
    }


    .cat {
        text-decoration: none;
        color: rgb(255, 255, 255);
        font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
        font-size: 20px;
        padding: 12px;
        width: 25%; 
        text-align: center; 
        display: none;
        margin: 2.5rem 0;
    }

    .social-media {
        display: none;
    }
    
    .social-icon {
        display: none;
    }

    .hamburger {
        display: block;
        cursor: pointer;
        color: white;
        padding-right: 9%;
    }

    .hamburger.active .bar:nth-child(2) {
        opacity: 0;
    }

    .hamburger.active .bar:nth-child(1) {
        transform: translateY(8px) rotate(45deg);
    }

    .hamburger.active .bar:nth-child(3) {
        transform: translateY(-8px) rotate(-45deg);
    }

    .bar {
        display: block;
        width: 25px;
        height: 3px;
        margin: 5px auto;
        -webkit-transition: all 0.3s ease-in-out;
        transition: all 0.3s ease-in-out;
        background-color: #007FFF;
}
}

@media screen and (max-width: 600px) {
    
    .msg {
        color: rgb(255, 255, 255);
        font-size: 55px;
        font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
        justify-content: center;
        text-align: center;
    }
    
    span {
        color: #007FFF;
        font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
        justify-content: center;
        text-align: center;
    }
    
    
}
<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Urban Web Solutions</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>

    <!--LA PARTIE CONCERNANT LA NAVBAR-->
    <nav id="navbar" class="navbar">
        <a class="navbar_brand" href="index.html"><img id="logo" src="img/logo.png" alt=""></a>
        
        <div class="container">
            <ul class="navbar_nav">
                <li ><a  class="cat" href="index.html">ACCUEIL</a></li>
                <li><a class="cat" href="#">NOTRE AGENCE</a></li>
                <li><a class="cat" href="#services">NOS OFFRES</a></li>
                <li><a class="cat" href="">NOUS CONTACTER</a></li>
            </ul>            
        </div>
        <div class="social-media">
            <a href=""><img class="social-icon" src="img/fb.png" alt=""></a>
            <a href=""><img class="social-icon" src="img/twitter_3256013.png" alt=""></a>
            <a href=""><img class="social-icon" src="img/in.png" alt=""></a>
        </div>

        <div class="hamburger">
            <span class="bar"></span>
            <span class="bar"></span>
            <span class="bar"></span>
        </div>
    </nav>
    <!--FIN DE LA PARTIE CONCERNANT LA NAVBAR-->

    <header>
        <div id="backgroundimage">
            <h1 class="msg">DÉVELOPPEUR <span class="auto-type"></span></h1>
        </div>
    </header>

    <main>

    </main>

    <script src="https://unpkg.com/[email protected]/dist/typed.umd.js"></script>

</body>
</html>

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.