js如何實現頁面側滑選單的效果（附程式碼）

這篇文章帶給大家的內容是關於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:&#39;fast&#39;});
        $(".leftNav").animate({ left : 0},{duration:&#39;fast&#39;});
      
    }else{
        $(".main").animate({marginLeft:0},{duration:&#39;fast&#39;});
        $(".leftNav").animate({left:-403},{duration:&#39;fast&#39;});
       
    }
})

相關建議：

CSS3手機端側滑選單 4種滑動選單特效_html /css_WEB-ITnose

jQuery CSS實作一個側滑導覽選單程式碼_jquery

JS實作的左側豎向滑動選單效果程式碼_javascript技巧

#

以上是js如何實現頁面側滑選單的效果（附程式碼）的詳細內容。更多資訊請關注PHP中文網其他相關文章！