<section class="one">
   <div class="header-nav header-active">
    <p>imooc</p>
    <div class="click"></div>
    <div class="header-link">
    <a href="#1">前端</a>
    <a href="#1">java</a>
    <a href="#1">ios</a>
    <a href="#1">Android</a>
    <a href="#1">php</a>
    </div>     
   </div>
   <div class="middle">
    <img src="img/1.png">
    <p>IMOOC</p>
    <button value="start" name="start">start</button>
   </div>
  </section>
  @media screen and (max-width: 375px){
 .one{
     width: 100%;
     background: #B2C5CC;
     height: 10rem;
 }
 .header-nav{
        width: 100%;
        background:#7EA6B1;
        height: 1rem;
        justify-content: center;
        position: relative;
        display: flex;        
    }
    .header-nav p{
        display: block;
        color: #fff;
        font-size: 20px;
        width: 100%;
        line-height: 1rem;
        position: absolute;
        text-align: center;
    }
    .header-nav .click{
        width: 15px;
        height: 15px;
        border:2px solid #B2C5CC;
        float: right;
        position: absolute;
        right: .3rem;
        top: .3rem;
        z-index: 9;
    }
    .header-link{
     background:#7EA6B1;
     position: absolute;
     top: -350px;
     width: 100%;
     height: 2rem;
     transition: all 2s
     z-index: 1;
     display: flex;
     flex-direction: column;
    }
    .header-link a{
     height: 16px;     
    }
    $(function(){
    var bool=false;
    $('.click').click(function(){
        if (bool==true) {
            $('.header-link').css({'top':'-350px'});
            bool=false;
        }else{
            $('.header-link').css({'top':'1rem'});
            bool=true;
        }
         
    });
})