如何解决全屏菜单将透明背景转换为单击时的彩色背景
我对全屏菜单有疑问。 我只是在滚动和使用页面时希望它透明。但是,当我单击右上角的汉堡包图标时,将打开全屏菜单。问题是,打开背景后,我无法修复背景使其变成黑色。它保持透明。有人可以帮我点击使菜单背景变黑吗?
这是我在标题中使用的代码
菜单切换动画
<html>
<div id="wrapper">
<span class="label">Click for animation.</span>
<div id="smallWrapper">
<input type="checkbox">
<div id="bars">
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
</div>
</div>
</div>
</html>
<style>
#wrapper {
width:100%;
height:100%;
}
.label {
position: absolute;
top: calc(50% - 3em);
left: calc(50% - 2em);
font-size: 50px;
width: 4em;
font-family: sans-serif;
color: #CCC;
}
#smallWrapper {
position:absolute;
top:calc(50% - 20px);
left:calc(50% - 20px);
}
input {
opacity:0;
z-index:1;
width:40px;
height:40px;
margin:0;
padding:0;
position:absolute;
appearance: none;
}
#bars {
width:40px;
height:35.3333333333333333px;
padding-top: 4.6666666666666666666px;
border-radius: 10px;
transition: background-color 0.2s,transform 0.3s ease-in-out;
}
.bar {
width 40px;
height: 4px;
margin-bottom: 9.3333333333333333px;
background: #fff;
transition: transform 0.2s ease-in-out,color 0.5s linear;
}
input:checked + #bars {
background-color: hsla(0,100%,20%,0.0);
transform: rotate(270deg);
}
input:checked + #bars .bar {
background:#fff;
}
input:checked + #bars .bar:first-child {
transform: rotate(45deg) translate(10px,9.33333333333333333px);
}
input:checked + #bars .bar:nth-child(2) {
transform-origin: 50% 50%;
transform: rotate(-45deg);
}
input:checked + #bars .bar:last-child {
transform: rotate(45deg) translate(-10px,-9.33333333333333333px);
}
</style>
菜单转换为全屏动画:
<script>jQuery(function($){
$('#menu-open').click(function() {
$('.section-transform').toggleClass('section-transform-active');
});
$('.menu-item-click').click(function() {
$('.section-transform').removeClass('section-transform-active');
});
});</script>
<style>
section-transform{
cursor: pointer;
}
.section-transform-active {
height: 100% !important;
width: 100% !important;
z-index: 99999 !important;
background-color: #000000 !important;
}
.section-transform {
-webkit-transition: all 0.5s ease !important;
-moz-transition: all 0.5s ease !important;
-o-transition: all 0.5s ease !important;
-ms-transition: all 0.5s ease !important;
transition: all 0.5s ease !important;
}
</style>
属于以上CSS的JS:
<script>
$('#hamburger').click(function() {
$( this ).toggleClass( "active" );
});
</script>
我希望有人能帮助我。 该网站的网址为www.nr-design.nl
预先感谢, 尼克
解决方法
嘿,使用onClick功能可以使您的背景变黑
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。