javascript - 汉堡菜单打开时如何更改背景内容的不透明度？

Question

我有一个工作的汉堡菜单，但我想改变背景的不透明度，在这个例子中，“容器”类的 div 为 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');
});

标签： javascripthtmlcss

Answer 1

您已经在菜单单击上切换了一个类，您可以在主体上切换另一个类，以更改背景不透明度。在这里，menu-open当菜单打开时，我在正文上添加了一个类，并且我已经更改了背景颜色。

我使用 body 是因为它比contentdiv 显示的更多。但你可以选择任何你想要的元素。

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>