Ray

      

      

          
選單一
          
選單二
          
選單三
          
選單四
          
選單五
          
選單六
          
選單七
      
      menu

@media (max-width: 767px){

  .menu {

    /*隱藏選單開始*/

    max-height: 0px;

    overflow: hidden;

    /*隱藏選單結束*/

    transition: max-height 2.3s;

    /*產生動畫效果*/

    margin-top: 1px;

    /*絕對定位疊在網頁上*/

    position: absolute;

    /*表單疊在上面*/

    z-index: 100;

    /*權重較高可以蓋掉*/

    /*header 80px+1px boder 線條*/

    top: 81px;

    /*表單從下往上長*/

    left: 0;

    right: 0;

    /*使選單左右滿版*/

    background: #0F222B;

  }

  .menu li{

    float: none;

    border-bottom: 1px dashed #69CA62;

  }

  .menu li a{

    transition: all 0.3s;

  }

  .menu li a:hover{

    background: #69CA62;

    color: #fff;

  }

  .showmenu{

    display: block;

    float: right;

    margin: 1em;

  }

  /*jQ點擊後動態在 body 加上 class */

  .menu-show .menu{

    max-height: 500px

  }

}

$(document).ready(function() {
   $('.showmenu').on('click',  function(e){
      e.preventDefault();
      $('body').toggleClass('menu-show');
  });
});