全屏菜单,当单击链接时它不会消失

时间:2018-06-22 21:14:07

标签: javascript jquery html css sass

当单击链接时,全屏菜单问题不会消失。如果有人可以帮助我,我将不胜感激,对不起,请不要嘲笑我的新事物。如果有人想帮助我,谢谢。

租用我的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">&nbsp; </span></label>
 
        <div class="navigation__background">&nbsp;</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);
    }
}
一些文本一些文本一些文本一些文本一些文本一些文本一些文本一些文本一些文本一些文本一些文本一些文本

0 个答案:

没有答案