(3)Merry Christmas(行動裝置)

【範例結果】

二、【手機】美化  ( nav 美化及 JQ設定)

針對nav 選單的CSS美化

/*S3:針對手機右上角icon及#nav美化*/
.navbtn,.navClosebtn{
  display: block;
  width: 50px; height: 50px;
  position: absolute; top: 0; right: 0;
  background: transparent; color: #fff; border: none;
  font-size: 30px; cursor: pointer;
}

.navClosebtn{
  background: #eee; color: #000;
}

nav{
  background: rgba(0, 0, 0, 0.6);
  position: fixed; top: 0; bottom: 0;
  width: 100%;

  display: none;    /* 美化完成,最後再加入後隱藏 */
}


#nav{
  position: static;
  padding-top: 50px;
}

#nav li{  float: none;}
#nav li a{text-align: center;}
#nav li a:hover{ background:#f7f57f; color: #000;}

JQ設定

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

 

    <script>
      $('.navbtn, .navClosebtn').click(function(){
          $('nav').slideToggle();
      });

      $(window).resize(function(){
          if($('.navbtn').is(':hidden')){
              $('nav').show();
          }else{
              $('nav').hide();
          }
      });
    </script>