js에서 페이지 사이드 슬라이딩 메뉴 효과를 얻는 방법(코드 포함)

이 글의 내용은 js에서 페이지 사이드 슬라이딩 메뉴의 효과를 얻는 방법에 관한 것입니다. (코드 포함) 도움이 필요한 친구들이 참고할 수 있기를 바랍니다. .

모바일 사이트를 작성할 때 사이드 슬라이딩 메뉴가 종종 있습니다. 소개는 다음과 같습니다.

먼저 페이지 표시 부분이기도 한 가장 바깥쪽의 p 컨테이너를 정의합니다. overflow:hidden;

그런 다음 컨테이너의 p를 측면 슬라이딩 메뉴로 정의합니다. 스타일은 다음과 같습니다. 위치: 절대;상단: 0px;왼쪽:-메뉴 너비;

또한 컨테이너에 p main을 작성해야 합니다. 메인 페이지는 메뉴 너비를 옆으로 이동하고 메뉴가 사라지면 원래 상태로 돌아갑니다.

코드는 다음과 같습니다.

$(".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를 사용하여 측면 슬라이딩 탐색 메뉴를 구현 code_jquery

JS_javascript 기술로 구현된 왼쪽 세로 슬라이딩 메뉴 효과 코드

위 내용은 js에서 페이지 사이드 슬라이딩 메뉴 효과를 얻는 방법(코드 포함)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!