javascript - 切换汉堡菜单 Javascript

Question

我的汉堡菜单无法正常工作，即每当用户单击它时它都不会显示菜单项。但是，只要单击它，它就会正确地作用于其他功能。我已经尝试了所有可能的技巧，但我没有设法让它正常工作。我不确定我的 javascript 的挑战是什么，因为我认为问题应该是这样。下面是我的代码：

const hamburger = document.querySelector(".hamburger");
const navbar = document.querySelector(".nav__list");

hamburger.addEventListener("click", ()=> {
    navbar.classList.toggle("open");
});


const hamburgerBtn = document.querySelector('.hamburger');
let hamburgerOpen = false;

hamburgerBtn.addEventListener('click', () => {
    if (!hamburgerOpen) {
        hamburgerBtn.classList.add('open');
        hamburgerOpen = true;
    } else {
        hamburgerBtn.classList.remove('open');
        hamburgerOpen = false;
    }
});

:root {
    --fw-normal: 400;
    --fw-dark: 600;
    --fw-bold: 700;

    /***Colors***/
    --clr-primary: #333;
    --clr-text: #fafafa;
    --clr-blue: #22a7ff;
    --clr-purple: #871e5f;
    --clr-green: #19a356;
    --clr-yellow: #ffff2e;
    --clr-red: #cd1a21; 
    --clr-orange: #ff4500;

    /*** Font and Typography ***/
    --ff-body: Georgia, "Times New Roman", Times, serif;
    --ff-header: Verdana, Arial, Helvetica, sans-serif;
    --fs-header: 4.5rem;
    --fs-header1: 2.5rem;
    --fs-header2: 1.5rem;
    --fs-header3: 1.2rem;
    --fs-lg-para: 1.1rem;
    --fs-md-para: 1rem;
    --fs--sm-para: .938rem;

    /*** z index ***/
    --z-index: 99;
}





/***************************************************
2. #Global Styles
***************************************************/

*, ::before, ::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    padding: 0;
    font-family: var(--ff-body);
    background: var(--clr-text);
    color: var(--clr-primary);
    font-size: var(--fs-para);
    line-height: 1.6;
}

a {
    text-decoration: none;
    cursor: pointer;
    letter-spacing: 2px;
    padding:  1.25em;
    display: inline-block;
    width: 100%;
    text-align: center;
    transition:all .5s;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--ff-header);
    margin: 0;
}

p {
    margin: 0;
}

ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

/* img {
    max-width: 100%;
    width: 100%;
    height: auto;
} */





/************************************************
3. #Typography
************************************************/

    /* Navigation Bar & Hero Section*/
.bg-hero {
    position: relative;
    width: 100%;
    min-height: 100vh;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--clr-blue);
    transition: .5s;
}

.navbar {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    padding-right: 2.5em;
    display: flex;
    justify-content: space-between;
    align-items: center;
}



@media screen and (max-width: 48em) {
    .nav__list {
        position: fixed;
        top: 0;
        right: -100%;
        width: 80%;
        height: 80%;
        background: rgba(255,255,255, 0.3);
        backdrop-filter: blur(10px);
        z-index: var(--z-index);
        flex-direction: column;
        align-items: center;
        justify-content: center;
        transition: .2s;
        display: none;
        opacity: 0;
    }
}

.open {
    right: 0;
}

.nav__link {
    color: var(--clr-text);
    font-weight: var(--fw-normal);
    font-size: var(--fs-lg-para);
}

.nav__link:hover {
    color: var(--clr-purple);
}

.shopping-cart {
    margin-right: 2em;
    color: var(--clr-text);
}

.social__media {
    display: flex;
    justify-content: center;
    align-items: center;
    padding-left: 3em;
    margin-top: 3em;
}

.sm__link {
    background: var(--clr-text);
    width: 2.7em;
    height: 2.7em;
    margin: 1em .625em;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.sm__link i {
    transition: .1s linear;
}

.sm__link:hover i {
    transform: scale(1.5);
}

.sm__facebook {
    font-size: 1.5rem;
    color: #4267b2;
}

.sm__twitter {
    font-size: 1.5rem;
    color: #1da1f2;
}

.sm__instagram {
    font-size: 1.5rem;
    color: #000;
}

.social__contact {
    display: none;
}





/*****************************************************
4. #Components
*****************************************************/

/*4.1 Cart Basket*/
.cart-item {
    background: linear-gradient(-270deg, #ff7800 8.6%, #ff5000 99.58%, #ff5000 100%);
    border-radius: 50%;
    padding: 1px 3px 2px;
}

 /*4.2 Buttons*/
 .btn-main {
    display: inline-block;
    width: 18em;
    max-width: 100%;
    height: 3em;
    padding: .5em 1.25em;
    border-radius: 1.563em;
    margin-top: 2.5em;
    background: linear-gradient(-270deg, #ff7800 8.6%, #ff5000 99.58%, #ff5000 100%);
    color: var(--clr-text);
    font-weight: 600;
    font-size: .88rem;
}

.fa-angle-right {
    color: #ff7800;
    background: var(--clr-text);
    border-radius: 50%;
    padding: .438em;
    margin-right: -.938em;
}

.btn-main:focus,
.fa-arrow-right:focus {
    color: var(--clr-primary);
    opacity: 0.1;
}

.btn-main:hover,
.fa-arrow-right:hover {
    color: var(--clr-primary);
}

/*4.3 Hamburger*/
.hamburger {
    position: absolute;
    cursor: pointer;
    right: 2%;
    top: 50%;
    transform: translate(-5%,-50%);
    z-index: var(--z-index);
}

.hamburger-btn {
    width: 20px;
    height: 3px;
    background: var(--clr-text);
    margin: .625em;
    transition: all .5s ease-in-out;
}

.hamburger-btn::before,
.hamburger-btn::after {
    content: '';
    position: absolute;
    width:20px;
    height: 3px;
    background: var(--clr-text);
    border-radius: 5px;
    transition: all .5s ease-in-out;
}

.hamburger-btn::before {
    transform: translateY(-7px);
}

.hamburger-btn::after {
    transform: translateY(7px);
}

.hamburger.open .hamburger-btn {
    transform: translateX(-50px);
    background: transparent;
}

.hamburger.open .hamburger-btn::before {
    transform: rotate(45deg) translate(35px, -35px);
}

.hamburger.open .hamburger-btn::after {
    transform: rotate(-45deg) translate(35px, 35px);
}

<section class="bg-hero">
         <nav class="navbar">
            <a href="#" class="company-brand"><img src="#" alt="#" class="#"><span>X&L Limited</span></a>
            <ul class="nav__list">
               <li class="nav__list-item"><a href="" class="nav__link"></a></li>
               <li class="nav__list-item"><a href="" class="nav__link">Products</a></li>
               <li class="nav__list-item"><a href="" class="nav__link">Our Story</a></li>
               <li class="nav__list-item"><a href="" class="nav__link">Blog</a></li>
               <li class="nav__list-item"><a href="" class="nav__link">Contact Us</a></li>
               <div class="social__media">
                  <a href="#" class="sm__link"><i class="fab fa-facebook-f sm__facebook"></i></a>
                  <a href="#" class="sm__link"><i class="fab fa-twitter sm__twitter"></i></a>
                  <a href="#" class="sm__link"><i class="fab fa-instagram sm__instagram"></i></a>
               </div>
            </ul>
            <div>
               <i class="fas fa-shopping-cart fa-lg shopping-cart">&nbsp;<span class="cart-item">0</span></i>
            </div>
            <div class="hamburger">
               <div class="hamburger-btn"></div>
            </div>
         </nav>
         <div class="hero">
            <div class="contentBox">
               <h1 class="hero-title">Do you like <br><span>Smooth Skin?</span></h1>
               <p class="hero-para">Naturally, the skin is supposed to be smooth and soft, however, the only insurance for dry and oily skin is skincare products that consistently offer effective skin protection. To protect dry and oily skin, make the smart choice, because the choice is yours, and it's simple.</p>
               <a class="btn-main" href="#">View Our Products &nbsp;&nbsp;&nbsp;<i class="fas fa-angle-right fa-lg"></i></a>
            </div>
         </div>
      </section>

标签： javascripthtmlcssflexboxhamburger-menu

Answer 1

您需要从您的 .open 中删除 display:none .nav__list，添加opacity:1到 .open 并在移动版本上编辑您的代码。

const hamburger = document.querySelector(".hamburger");
const navbar = document.querySelector(".nav__list");

hamburger.addEventListener("click", ()=> {
    navbar.classList.toggle("open");
});


const hamburgerBtn = document.querySelector('.hamburger');
let hamburgerOpen = false;

hamburgerBtn.addEventListener('click', () => {
    if (!hamburgerOpen) {
        hamburgerBtn.classList.add('open');
        hamburgerOpen = true;
    } else {
        hamburgerBtn.classList.remove('open');
        hamburgerOpen = false;
    }
});

:root {
    --fw-normal: 400;
    --fw-dark: 600;
    --fw-bold: 700;

    /***Colors***/
    --clr-primary: #333;
    --clr-text: #fafafa;
    --clr-blue: #22a7ff;
    --clr-purple: #871e5f;
    --clr-green: #19a356;
    --clr-yellow: #ffff2e;
    --clr-red: #cd1a21; 
    --clr-orange: #ff4500;

    /*** Font and Typography ***/
    --ff-body: Georgia, "Times New Roman", Times, serif;
    --ff-header: Verdana, Arial, Helvetica, sans-serif;
    --fs-header: 4.5rem;
    --fs-header1: 2.5rem;
    --fs-header2: 1.5rem;
    --fs-header3: 1.2rem;
    --fs-lg-para: 1.1rem;
    --fs-md-para: 1rem;
    --fs--sm-para: .938rem;

    /*** z index ***/
    --z-index: 99;
}





/***************************************************
2. #Global Styles
***************************************************/

*, ::before, ::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    padding: 0;
    font-family: var(--ff-body);
    background: var(--clr-text);
    color: var(--clr-primary);
    font-size: var(--fs-para);
    line-height: 1.6;
}

a {
    text-decoration: none;
    cursor: pointer;
    letter-spacing: 2px;
    padding:  1.25em;
    display: inline-block;
    width: 100%;
    text-align: center;
    transition:all .5s;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--ff-header);
    margin: 0;
}

p {
    margin: 0;
}

ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

/* img {
    max-width: 100%;
    width: 100%;
    height: auto;
} */





/************************************************
3. #Typography
************************************************/

    /* Navigation Bar & Hero Section*/
.bg-hero {
    position: relative;
    width: 100%;
    min-height: 100vh;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--clr-blue);
    transition: .5s;
}

.navbar {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    padding-right: 2.5em;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.nav__list {
        right: -100%;
        opacity: 0;
    }
.open{
  
        right: 0;
  opacity:1;
}

@media screen and (max-width: 48em) {
    .nav__list {
        position: fixed;
        top: 0;
        right: -100%;
        width: 80%;
        height: 80%;
        background: rgba(255,255,255, 0.3);
        backdrop-filter: blur(10px);
        z-index: var(--z-index);
        flex-direction: column;
        align-items: center;
        justify-content: center;
        transition: .2s;
        opacity: 0;
    }
}

html .open {
    right: 0;
  opacity:1;
}

.nav__link {
    color: var(--clr-text);
    font-weight: var(--fw-normal);
    font-size: var(--fs-lg-para);
}

.nav__link:hover {
    color: var(--clr-purple);
}

.shopping-cart {
    margin-right: 2em;
    color: var(--clr-text);
}

.social__media {
    display: flex;
    justify-content: center;
    align-items: center;
    padding-left: 3em;
    margin-top: 3em;
}

.sm__link {
    background: var(--clr-text);
    width: 2.7em;
    height: 2.7em;
    margin: 1em .625em;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.sm__link i {
    transition: .1s linear;
}

.sm__link:hover i {
    transform: scale(1.5);
}

.sm__facebook {
    font-size: 1.5rem;
    color: #4267b2;
}

.sm__twitter {
    font-size: 1.5rem;
    color: #1da1f2;
}

.sm__instagram {
    font-size: 1.5rem;
    color: #000;
}

.social__contact {
    display: none;
}





/*****************************************************
4. #Components
*****************************************************/

/*4.1 Cart Basket*/
.cart-item {
    background: linear-gradient(-270deg, #ff7800 8.6%, #ff5000 99.58%, #ff5000 100%);
    border-radius: 50%;
    padding: 1px 3px 2px;
}
 /*4.2 Buttons*/
 .btn-main {
    display: inline-block;
    width: 18em;
    max-width: 100%;
    height: 3em;
    padding: .5em 1.25em;
    border-radius: 1.563em;
    margin-top: 2.5em;
    background: linear-gradient(-270deg, #ff7800 8.6%, #ff5000 99.58%, #ff5000 100%);
    color: var(--clr-text);
    font-weight: 600;
    font-size: .88rem;
}

.fa-angle-right {
    color: #ff7800;
    background: var(--clr-text);
    border-radius: 50%;
    padding: .438em;
    margin-right: -.938em;
}

.btn-main:focus,
.fa-arrow-right:focus {
    color: var(--clr-primary);
    opacity: 0.1;
}

.btn-main:hover,
.fa-arrow-right:hover {
    color: var(--clr-primary);
}

/*4.3 Hamburger*/
.hamburger {
    position: absolute;
    cursor: pointer;
    right: 2%;
    top: 50%;
    transform: translate(-5%,-50%);
    z-index: var(--z-index);
}

.hamburger-btn {
    width: 20px;
    height: 3px;
    background: var(--clr-text);
    margin: .625em;
    transition: all .5s ease-in-out;
}

.hamburger-btn::before,
.hamburger-btn::after {
    content: '';
    position: absolute;
    width:20px;
    height: 3px;
    background: var(--clr-text);
    border-radius: 5px;
    transition: all .5s ease-in-out;
}

.hamburger-btn::before {
    transform: translateY(-7px);
}

.hamburger-btn::after {
    transform: translateY(7px);
}

.hamburger.open .hamburger-btn {
    transform: translateX(-50px);
    background: transparent;
}

.hamburger.open .hamburger-btn::before {
    transform: rotate(45deg) translate(35px, -35px);
}

.hamburger.open .hamburger-btn::after {
    transform: rotate(-45deg) translate(35px, 35px);
}

<section class="bg-hero">
         <nav class="navbar">
            <a href="#" class="company-brand"><img src="#" alt="#" class="#"><span>X&L Limited</span></a>
            <ul class="nav__list">
               <li class="nav__list-item"><a href="" class="nav__link"></a></li>
               <li class="nav__list-item"><a href="" class="nav__link">Products</a></li>
               <li class="nav__list-item"><a href="" class="nav__link">Our Story</a></li>
               <li class="nav__list-item"><a href="" class="nav__link">Blog</a></li>
               <li class="nav__list-item"><a href="" class="nav__link">Contact Us</a></li>
               <div class="social__media">
                  <a href="#" class="sm__link"><i class="fab fa-facebook-f sm__facebook"></i></a>
                  <a href="#" class="sm__link"><i class="fab fa-twitter sm__twitter"></i></a>
                  <a href="#" class="sm__link"><i class="fab fa-instagram sm__instagram"></i></a>
               </div>
            </ul>
            <div>
               <i class="fas fa-shopping-cart fa-lg shopping-cart">&nbsp;<span class="cart-item">0</span></i>
            </div>
            <div class="hamburger">
               <div class="hamburger-btn"></div>
            </div>
         </nav>
         <div class="hero">
            <div class="contentBox">
               <h1 class="hero-title">Do you like <br><span>Smooth Skin?</span></h1>
               <p class="hero-para">Naturally, the skin is supposed to be smooth and soft, however, the only insurance for dry and oily skin is skincare products that consistently offer effective skin protection. To protect dry and oily skin, make the smart choice, because the choice is yours, and it's simple.</p>
               <a class="btn-main" href="#">View Our Products &nbsp;&nbsp;&nbsp;<i class="fas fa-angle-right fa-lg"></i></a>
            </div>
         </div>
      </section>