У меня есть рабочее меню гамбургера, но я хочу изменить непрозрачность фона, в этом примере div с классом «container» на 0.5 (который представляет будущий контент, то есть весь контент сайта). Я искал везде, но мне трудно добавить его в мой код, так как я только начинаю JS.

Спасибо.

html

<nav class="navbar">
            <div class="hamburger-menu">
                <div class="line line-1"></div>
                <div class="line line-2"></div>
                <div class="line line-3"></div>
            </div>


            <ul class="nav-list">
                <li class="nav-item">
                    <a href="#" class="nav-link">početna</a>
                </li>
                <li class="nav-item">
                    <a href="#" class="nav-link">o brendu</a>
                </li>
                <li class="nav-item">
                    <a href="#" class="nav-link">doniraj kupovinom</a>
                </li>
                <li class="nav-item">
                    <a href="#" class="nav-link">doniraj uplatom</a>
                </li>
                <li class="nav-item">
                    <a href="#" class="nav-link">tvoj superhero nalog</a>
                </li>
                <li class="nav-item">
                    <a href="#" class="nav-link">plaćanje i dostava</a>
                </li>
                <li class="nav-item">
                    <a href="#" class="nav-link">nasi superheroji</a>
                </li>
                <div class="lang">
                    <li class="nav-item">
                        <a href="#" class="nav-link">srb</a>
                    </li>
                    <li class="nav-item">
                        <a href="#" class="nav-link">eng</a>
                    </li>
                </div>
            </ul>
        </nav>
<div class="container">
    <p>text</p>
</div>
<script src="script.js"></script>
css (If needed?)

.hamburger-menu {
    width:2.1rem;
    height:2.1rem;
    cursor:pointer;
    display:flex;
    flex-direction:column;
    justify-content:space-around;
    position:fixed;
    left:2.1rem;

}

.line {
    width:100%;
    height:3px;
    background-color:#000;
    transition: all 0.8s;
}

.navbar {
    width:25vw;
    height:100%;
    background-color:#F0F0F0;
    box-shadow:1px 0px 10rem #B0B0B0;
    padding-top:1rem;
    padding-left:2rem;
    position:fixed;
    left:-50rem;
    transition: left 0.8s cubic-bezier(.25,.75,.5,1.25);
    font-size:1.4rem;

}

.change {
    left:0;
}

.nav-item {
    list-style:none;
    margin:1rem 0;
}

.nav-list {
    margin-top:3rem;
}

.nav-link {
    text-decoration:none;
    text-transform:uppercase;
    color:#424242;
    font-weight:bold;
    transition:300ms ease;
    position:relative;
    padding:0.1rem 0;

}

.lang {
    display:flex;
    width:22%;
    justify-content:space-between;
}

.nav-list>.nav-item > .nav-link::after {
    content:"";
    width:100%;
    height:0.11rem;
    background-color:#424242;
    position:absolute;
    left:0;
    bottom:0;
    transform: scaleX(0);
    transition:transform 700ms ease;
    transform-origin:left;
}

.nav-list>.nav-item > .nav-link:hover::after {
    transform: scaleX(1);
}

.nav-list>.nav-item > .nav-link:active {
    color:#949494;
}

.nav-list>.nav-item > .nav-link:active::after {
    background-color:#949494;
}

.change .line-1 {
    transform: rotateZ(-405deg) translate(-8px, 7px);
}

.change .line-3 {
    transform: rotateZ(405deg) translate(-8px, -8.5px);
}

.change .line-2 {
    opacity:0;
}
js

const menuIcon = document.querySelector (".hamburger-menu");
const navbar = document.querySelector('.navbar');


menuIcon.addEventListener('click' , () => {
navbar.classList.toggle('change');
});

0
Petar Ivanovic 20 Дек 2019 в 16:04

1 ответ

Лучший ответ

Вы уже переключаете класс в своем меню, вы можете переключать другой класс в теле, который изменяет непрозрачность фона. Здесь я добавил класс menu-open в тело, когда меню открыто, и я изменил цвет фона.

Я использовал тело, потому что оно показало больше, чем content div. но вы можете выбрать любой элемент, который вы хотите.

const menuIcon = document.querySelector (".hamburger-menu");
const navbar = document.querySelector('.navbar');
const container = document.querySelector('body');

menuIcon.addEventListener('click' , () => {
  navbar.classList.toggle('change');
  container.classList.toggle('menu-open');
});
.hamburger-menu {
    width:2.1rem;
    height:2.1rem;
    cursor:pointer;
    display:flex;
    flex-direction:column;
    justify-content:space-around;
    position:fixed;
    left:2.1rem;

}

.line {
    width:100%;
    height:3px;
    background-color:#000;
    transition: all 0.8s;
}

.navbar {
    width:25vw;
    height:100%;
    background-color:#F0F0F0;
    box-shadow:1px 0px 10rem #B0B0B0;
    padding-top:1rem;
    padding-left:2rem;
    position:fixed;
    left:-50rem;
    transition: left 0.8s cubic-bezier(.25,.75,.5,1.25);
    font-size:1.4rem;

}

.change {
    left:0;
}

.nav-item {
    list-style:none;
    margin:1rem 0;
}

.nav-list {
    margin-top:3rem;
}

.nav-link {
    text-decoration:none;
    text-transform:uppercase;
    color:#424242;
    font-weight:bold;
    transition:300ms ease;
    position:relative;
    padding:0.1rem 0;

}

.lang {
    display:flex;
    width:22%;
    justify-content:space-between;
}

.nav-list>.nav-item > .nav-link::after {
    content:"";
    width:100%;
    height:0.11rem;
    background-color:#424242;
    position:absolute;
    left:0;
    bottom:0;
    transform: scaleX(0);
    transition:transform 700ms ease;
    transform-origin:left;
}

.nav-list>.nav-item > .nav-link:hover::after {
    transform: scaleX(1);
}

.nav-list>.nav-item > .nav-link:active {
    color:#949494;
}

.nav-list>.nav-item > .nav-link:active::after {
    background-color:#949494;
}

.change .line-1 {
    transform: rotateZ(-405deg) translate(-8px, 7px);
}

.change .line-3 {
    transform: rotateZ(405deg) translate(-8px, -8.5px);
}

.change .line-2 {
    opacity:0;
}

.menu-open {
  background-color: rgba(0,0,0,0.3)

}
<nav class="navbar">
            <div class="hamburger-menu">
                <div class="line line-1"></div>
                <div class="line line-2"></div>
                <div class="line line-3"></div>
            </div>


            <ul class="nav-list">
                <li class="nav-item">
                    <a href="#" class="nav-link">početna</a>
                </li>
                <li class="nav-item">
                    <a href="#" class="nav-link">o brendu</a>
                </li>
                <li class="nav-item">
                    <a href="#" class="nav-link">doniraj kupovinom</a>
                </li>
                <li class="nav-item">
                    <a href="#" class="nav-link">doniraj uplatom</a>
                </li>
                <li class="nav-item">
                    <a href="#" class="nav-link">tvoj superhero nalog</a>
                </li>
                <li class="nav-item">
                    <a href="#" class="nav-link">plaćanje i dostava</a>
                </li>
                <li class="nav-item">
                    <a href="#" class="nav-link">nasi superheroji</a>
                </li>
                <div class="lang">
                    <li class="nav-item">
                        <a href="#" class="nav-link">srb</a>
                    </li>
                    <li class="nav-item">
                        <a href="#" class="nav-link">eng</a>
                    </li>
                </div>
            </ul>
        </nav>
<div class="container">
    <p>text</p>
</div>
2
Nicolas 20 Дек 2019 в 13:09