@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');
  });
});
文章標籤
創作者介紹
創作者 READY sharing 的頭像
READY sharing

Ready sharing

READY sharing 發表在 痞客邦 留言(0) 人氣()