当单击链接时,全屏菜单问题不会消失。如果有人可以帮助我,我将不胜感激,对不起,请不要嘲笑我的新事物。如果有人想帮助我,谢谢。
租用我的html代码:
<div class="navigation">
<input type="checkbox" name="checkbox" id="navi-toggle" class="navigation__checkbox">
<label for="navi-toggle" class="navigation__button"><span class="navigation__icon"> </span></label>
<div class="navigation__background"> </div>
<nav class="navigation__nav">
<ul class="navigation__list">
<li class="navigation__item"><a href="#home" class="navigation__link scroll"><span>01</span>Home</a></li>
<li class="navigation__item"><a href="#about-section" class="navigation__link scroll"><span>02</span>Best dishes</a></li>
<li class="navigation__item"><a href="#Potato_to_do" class="navigation__link scroll"><span>03</span>What to do with
potatoes</a></li>
<li class="navigation__item"><a href="#section-tours" class="navigation__link scroll"><span>04</span>Popular tours</a></li>
<li class="navigation__item"><a href="#story_section" class="navigation__link scroll"><span>05</span>Our champions</a></li>
<li class="navigation__item"><a href="#book_section" class="navigation__link scroll"><span>06</span>Take part</a></li>
</ul>
</nav>
</div>
这是scss:
.btn{
&,
&:link,
&:visited {
text-transform: uppercase;
text-decoration: none;
padding: 1.5rem 4rem;
display: inline-block;
border-radius: 10rem;
transition: all .8s;
position: relative;
font-size: $default-font-size;
//zminay dla <button> element
}
&:hover{
transform: translateY(-0.3rem);
box-shadow: 0 1rem 2rem rgba($color-black,.2);
&::after {
transform: scaleX(1.4) scaleY(1.6);
opacity: 0;
}
}
&:focus,
&:active{
transform: translateY(-0.1rem);
box-shadow: 0 0.5rem 1rem rgba($color-black,.2);
}
&--white{
background:$color-white;
color: $color-grey-dark;
&::after{
background: $color-white;
}
}
&--brown{
background:$color-primary-dark;
color: $color-white;
&::after{
background:$color-primary-dark;
}
}
&::after{
content: "";
display: inline-block;
height: 100%;
width: 100%;
border-radius: 10rem;
position: absolute;
top:0;
left: 0;
z-index: -1;
transition: all 0.5s ;
}
/*animacja buttona*/
&--animated{
animation: moveUpBtn 2s ease-out .75s;
animation-fill-mode: backwards;
}
}
.btn-text{
&:link,
&:visited{
font-size: $default-font-size;
color: $color-primary-dark;
display: inline-block;
text-decoration: none;
border-bottom: 1px solid $color-primary-dark;
padding: 3px;
transition: all .8s;
}
&:hover{
background-color: $color-primary-light;
color:$color-white;
box-shadow: 0 1rem 2rem rgba($color-black, .15);
transform: translateY(-2px);
}
&:active{
transform: translateY(0);
}
}