中间切换线未正确消失

我的练习网站上有一个切换按钮。单击时，它会进行一些过渡并制作十字或 X。我正在使用一些 CSS 来制作带有顶线和底线的十字，并通过隐藏中间线来。问题是在过渡后，中线没有隐藏并形成一些类似*的形状。

我尝试了可见性：中间一个没有，但它使整个切换按钮不可见。

我也尝试将中线背景颜色更改为与封面背景颜色相同的颜色，但这也不起作用。

header nav.small-menu {
background: #fff;
width: 100%;
height: 5rem;
box-shadow: 0 0 5px rgba(0, 0, 0, .3);
opacity: .9;
z-index: 2;
}
header nav.small-menu .logo {
position: absolute;
top: .9rem;
left: 2rem;
height: 80px;
width: 100px;
transition: .8s;
z-index: 2;
}
header .navigation .toggle {
background: var(--primary-white);
position: absolute;
width: 35px;
height: 4px;
top: 3rem;
left: 73rem;
box-shadow: 0 2px 5px rgba(0, 0, 0, .2);
transition: all .5s ease-out;
cursor: pointer;
z-index: 1;
}
header .navigation .togglesmall {
width: 35px;
height: 4px;
top: 2.5rem;
left: 73rem;
background: var(--primary-blue);
}
header .navigation .togglesmall::before,
header .navigation .togglesmall::after {
background: var(--primary-blue);
}
header .navigation .toggle::before,
header .navigation .toggle::after {
position: absolute;
content: '';
background: var(--primary-white);
width: 35px;
height: 4px;
box-shadow: 0 2px 5px rgba(0, 0, 0, .2);
transition: all .5s ease-out;
cursor: pointer;
}
header .navigation .toggle::before {
top: -14px;
}
header .navigation .toggle::after {
top: 14px;
}
header .navigation .toggle.active::before {
background: var(--primary-white);
box-shadow: 0 2px 5px rgba(0, 0, 0, .4);
top: 0;
transform: rotate(45deg);
z-index: 1;
}
header .navigation .toggle.active::after {
background: var(--primary-white);
box-shadow: 0 2px 5px rgba(0, 0, 0, .4);
top: 0;
transform: rotate(135deg);
z-index: 1;
}
header .navigation .overlay {
background: var(--primary-blue);
position: fixed;
top: 28px;
right: 53px;
width: 45px;
height: 45px;
border-radius: 50%;
transition: all .5s ease-out;
opacity: 0.7;
visibility: hidden;
cursor: pointer;
}
header .navigation .overlay.active {
transform: scale(100, 100);
visibility: visible;
cursor: pointer;
}
header .navigation .menu {
position: fixed;
top: 0;
left: 0;
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
overflow: auto;
visibility: hidden;
}
header .navigation .menu.active {
visibility: visible;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<html>
<body>
<header>
<nav class="navigation">
<div class="logo">
</div>
<div class="main-menu">
<div class="toggle"></div>
<div class="overlay"></div>
<div class="menu">
</div>
</div>
</nav>
</header>
<script src="js/jquery-3.4.1.min.js"></script>
</body>
</html>
<script>
$(document).ready(function() {
$('.toggle').click(function() {
$('.toggle').toggleClass('active');
$('.overlay').toggleClass('active');
$('.menu').toggleClass('active');
});
});
$(window).on('scroll', function() {
if ($(window).scrollTop() == 0) {
$('nav').removeClass('small-menu');
$('.navigation .main-menu .toggle').removeClass('togglesmall');
} else {
$('nav').addClass('small-menu');
$('.navigation .main-menu .toggle').addClass('togglesmall');
}
});
</script>

尝试在活动类时添加css。

$(document).ready(function() {
$('.toggle').click(function() {
$('.toggle').toggleClass('active');
$('.overlay').toggleClass('active');
$('.menu').toggleClass('active');
});
});
$(window).on('scroll', function() {
if ($(window).scrollTop() == 0) {
$('nav').removeClass('small-menu');
$('.navigation .main-menu .toggle').removeClass('togglesmall');
} else {
$('nav').addClass('small-menu');
$('.navigation .main-menu .toggle').addClass('togglesmall');
}
});

body{background: #000;}
header nav.small-menu {
background: #000;
width: 100%;
height: 5rem;
box-shadow: 0 0 5px rgba(0, 0, 0, .3);
opacity: .9;
z-index: 2;
}
header nav.small-menu .logo {
position: absolute;
top: .9rem;
left: 2rem;
height: 80px;
width: 100px;
transition: .8s;
z-index: 2;
}
header .navigation .toggle {
background: #fff;
position: absolute;
width: 35px;
height: 4px;
top: 3rem;
left: 73rem;
box-shadow: 0 2px 5px rgba(0, 0, 0, .2);
transition: all .5s ease-out;
cursor: pointer;
z-index: 1;
}
header .navigation .togglesmall {
width: 35px;
height: 4px;
top: 2.5rem;
left: 73rem;
background: var(--primary-blue);
}
header .navigation .togglesmall::before,
header .navigation .togglesmall::after {
background: var(--primary-blue);
}
header .navigation .toggle::before,
header .navigation .toggle::after {
position: absolute;
content: '';
background: #fff;
width: 35px;
height: 4px;
box-shadow: 0 2px 5px rgba(0, 0, 0, .2);
transition: all .5s ease-out;
cursor: pointer;
}
header .navigation .toggle::before {
top: -14px;
}
header .navigation .toggle::after {
top: 14px;
}
header .navigation .toggle.active::before {
background: #fff;
box-shadow: 0 2px 5px rgba(0, 0, 0, .4);
top: 0;
transform: rotate(45deg);
z-index: 1;
}
header .navigation .toggle.active::after {
background: #fff;
box-shadow: 0 2px 5px rgba(0, 0, 0, .4);
top: 0;
transform: rotate(135deg);
z-index: 1;
}
header .navigation .overlay {
background: #fff;
position: fixed;
top: 28px;
right: 53px;
width: 45px;
height: 45px;
border-radius: 50%;
transition: all .5s ease-out;
visibility: hidden;
cursor: pointer;
}
header .navigation .overlay.active {
transform: scale(100, 100);
visibility: visible;
cursor: pointer;
}
header .navigation .menu {
position: fixed;
top: 0;
left: 0;
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
overflow: auto;
visibility: hidden;
}
header .navigation .menu.active {
visibility: visible;
}
header .navigation .toggle.active {
box-shadow: none;
background: transparent;
}
.overlay.active { opacity: .7; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<header>
<nav class="navigation">
<div class="logo">
</div>
<div class="main-menu">
<div class="toggle"></div>
<div class="overlay"></div>
<div class="menu">
</div>
</div>
</nav>
</header>

单击时，您只需从CSS类中删除框阴影属性标题.navigation .toggle，它将起作用。

因此，单击菜单后，检查元素并取消选中 box-shadow 属性即可检查结果。

$(document).ready(function(){
$('.toggle').click(function(){
$('.toggle').toggleClass('active');
$('.overlay').toggleClass('active');
$('.menu').toggleClass('active');
});
});
$(window).on('scroll',function(){
if ($(window).scrollTop() == 0){
$('nav').removeClass('small-menu');
$('.navigation .main-menu .toggle').removeClass('togglesmall');
}
else{
$('nav').addClass('small-menu');
$('.navigation .main-menu .toggle').addClass('togglesmall');
}
});

header nav.small-menu{
background: #fff;
width: 100%;
height: 5rem;
box-shadow: 0 0 5px rgba(0, 0, 0, .3);
opacity: .9;
z-index: 2;
}
header nav.small-menu .logo{
position: absolute;
top: .9rem;
left: 2rem;
height: 80px;
width: 100px;
transition: .8s;
z-index: 2;
}
header .navigation .toggle{
background: var(--primary-white);
position: absolute;
width: 35px;
height: 4px;
top: 3rem;
left: 73rem;
box-shadow: 0 2px 5px rgba(0, 0, 0, .2);
transition: all .5s ease-out;
cursor: pointer;
z-index: 1;
transition: 0.3s linear;
}
header .navigation .toggle.active{
box-shadow: none;
transition: 0.3s linear;
}    
header .navigation .togglesmall{
width: 35px;
height: 4px;
top: 2.5rem;
left: 73rem;
background: var(--primary-blue);
}
header .navigation .togglesmall::before,
header .navigation .togglesmall::after{
background: var(--primary-blue);
}
header .navigation .toggle::before,
header .navigation .toggle::after{
position: absolute;
content: '';
background: var(--primary-white);
width: 35px;
height: 4px;
box-shadow: 0 2px 5px rgba(0, 0, 0, .2);
transition: all .5s ease-out;
cursor: pointer;
}
header .navigation .toggle::before{
top: -14px;
}
header .navigation .toggle::after{
top: 14px;
}
header .navigation .toggle.active::before{
background: var(--primary-white);
box-shadow: 0 2px 5px rgba(0, 0, 0, .4);
top: 0;
transform: rotate(45deg);
z-index: 1;
}
header .navigation .toggle.active::after{
background: var(--primary-white);
box-shadow: 0 2px 5px rgba(0, 0, 0, .4);
top: 0;
transform: rotate(135deg);
z-index: 1;
}
header .navigation .overlay{
background: var(--primary-blue);
position: fixed;
top: 28px;
right: 53px;
width: 45px;
height: 45px;
border-radius: 50%;
transition: all .5s ease-out;
opacity: 0.7;
visibility: hidden;
cursor: pointer;
}
header .navigation .overlay.active{
transform: scale(100, 100);
visibility: visible;
cursor: pointer;
}
header .navigation .menu{
position: fixed;
top: 0;
left: 0;
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
overflow: auto;
visibility: hidden;
}
header .navigation .menu.active{
visibility: visible;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<header>
<nav class="navigation">
<div class="logo">
</div>
<div class="main-menu">
<div class="toggle"></div>
<div class="overlay"></div>
<div class="menu">
</div>
</div>
</nav>
</header>

相关内容

最新更新

热门标签：