How to achieve the effect of page side sliding menu in js (with code)

The content of this article is about how to achieve the effect of page side sliding menu in js (with code). It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

When writing a mobile website, there are often side-sliding menus. Here is an introduction:

First define an outermost p container, which is also the display part of the page. Set the style overflow: hidden ;

Then define a p in the container as the side sliding menu, the style is: position: absolute;top: 0px;left:-menu width;

You also need to write a p in the container main, the main page is stored in this p

The following is the js implementation

The general idea is as follows: When the menu button is clicked to display the menu, main moves sideways by the width of the menu, and the menu left is 0 ;When the menu disappears, it will be restored to its original state

The code is as follows:

$(".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;});
       
    }
})

Related recommendations:

CSS3 mobile side sliding menu 4 kinds of sliding menu special effects_html /css_WEB-ITnose

##jQuery CSS implements a side-sliding navigation menu code_jquery

JS implements the left side Vertical sliding menu effect code_javascript skills

The above is the detailed content of How to achieve the effect of page side sliding menu in js (with code). For more information, please follow other related articles on the PHP Chinese website!