Переключение меню гамбургера Javascript

ProgramBox

Переключение меню гамбургера Javascript

Post author:admin
Запись опубликована:18 октября, 2022
Post category:Вопросы по программированию

#javascript #html #css #flexbox #hamburger-menu

#javascript #HTML #css #flexbox #гамбургер-меню

Вопрос:

Мое меню гамбургера не работает должным образом, то есть оно не отображает пункты меню всякий раз, когда пользователь нажимает на него. Однако он правильно работает с другими функциями всякий раз, когда на него нажимают. Я перепробовал все возможные уловки, и мне не удалось заставить его работать должным образом.Я не уверен, в чем проблема с моим 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 amp; 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>Xamp;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">amp;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 amp;nbsp;amp;nbsp;amp;nbsp;<i class="fas fa-angle-right fa-lg"></i></a>
            </div>
         </div>
      </section>

Развернуть фрагмент

Ответ №1:

Вам нужно удалить 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 amp; 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>Xamp;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">amp;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 amp;nbsp;amp;nbsp;amp;nbsp;<i class="fas fa-angle-right fa-lg"></i></a>
            </div>
         </div>
      </section>

Развернуть фрагмент

1. Большое вам спасибо. Теперь он работает нормально.

2. @Tendekai в любое время 🙂 затем нажмите на (ответ внизу). 😉

3. Я сделал, как вы просили, извините, что не нажал кнопку «Принять»

Вопрос:

Ответ №1:

Комментарии:

Вам также может понравиться

text-shadow (и другие css3) вызывает задержку прокрутки

Postgres вставляет в таблицу только новые строки

Как добавить все возможные комбинации двух списков без использования двух вложенных циклов?