無限的可能: jQuery教學－側邊固定滑出式選單

2014年6月19日星期四

jQuery教學－側邊固定滑出式選單

http://www.minwt.com/js/7598.html

CSS樣式：
放在.....之間：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39

#mwt_mwt_slider_scroll
{
 top: 0;
 left:-360px;
 width:360px; 
 position:fixed;
 z-index:9999;
}
 
#mwt_slider_content{
 background:#3c5a98;
 text-align:center;
 padding-top:20px;
}
 
#mwt_fb_tab {
 position:absolute;
 top:20px;
 right:-24px;
 width:24px;
 background:#3c5a98;
 color:#ffffff;
 font-family:Arial, Helvetica, sans-serif; 
 text-align:center;
 padding:9px 0;
 
 -moz-border-radius-topright:10px;
 -moz-border-radius-bottomright:10px;
 -webkit-border-top-right-radius:10px;
 -webkit-border-bottom-right-radius:10px; 
}
#mwt_fb_tab span {
 display:block;
 height:12px;
 padding:1px 0;
 line-height:12px;
 text-transform:uppercase;
 font-size:12px;
}

Javascript：
放在.....之間：

View Code JAVASCRIPT

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

<script type='text/javascript' src='http://code.jquery.com/jquery-1.9.1.min.js'></script>
<script type='text/javascript'>
$(function(){
 var w = $("#mwt_slider_content").width();
 $('#mwt_slider_content').css('height', ($(window).height() - 20) + 'px' ); //將區塊自動撐滿畫面高度
 
 $("#mwt_fb_tab").mouseover(function(){ //滑鼠滑入時
  if ($("#mwt_mwt_slider_scroll").css('left') == '-'+w+'px')
  {
   $("#mwt_mwt_slider_scroll").animate({ left:'0px' }, 600 ,'swing');
  }
 });
 
 
 $("#mwt_slider_content").mouseleave(function(){　//滑鼠離開後
  $("#mwt_mwt_slider_scroll").animate( { left:'-'+w+'px' }, 600 ,'swing'); 
 }); 
});
 
</script>

HTML：
放在.....之間：

View Code HTML

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

沒有留言:

張貼留言

2014年6月19日 星期四

jQuery教學－側邊固定滑出式選單

沒有留言:

2014年6月19日星期四