這篇文章帶給大家的內容是關於js如何實現頁面側滑選單的效果（附程式碼），有一定的參考價值，有需要的朋友可以參考一下，希望對你有幫助。
寫手機站的時候常常會有側滑選單，以下就為大家介紹：
先定義一個最外層p container，這個也是頁面顯示部分，設定樣式overflow: hidden ;
然後在container裡面定義個p為側滑選單，樣式為：position: absolute;top: 0px;left:-選單寬度；
也需要在container裡面寫一個p main，這個p裡面存放主頁
下面就是js實現了
大致思路如下：當點擊選單按鈕顯示選單時，main向一旁移動選單寬度的大小，選單left為0 ；選單消失時，還原至原來狀態
程式碼如下：
$(".navBtn").click(function(){
var left = $(".leftNav").css("left");
left = parseInt(left);
if(left<0){
$(".main").animate({ marginLeft : 403},{duration:'fast'});
$(".leftNav").animate({ left : 0},{duration:'fast'});
}else{
$(".main").animate({marginLeft:0},{duration:'fast'});
$(".leftNav").animate({left:-403},{duration:'fast'});
}
})相關建議：
CSS3手機端側滑選單 4種滑動選單特效_html /css_WEB-ITnose
jQuery CSS實作一個側滑導覽選單程式碼_jquery
JS實作的左側豎向滑動選單效果程式碼_javascript技巧
#以上是js如何實現頁面側滑選單的效果（附程式碼）的詳細內容。更多資訊請關注PHP中文網其他相關文章！
