이 글의 내용은 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:'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를 사용하여 측면 슬라이딩 탐색 메뉴를 구현 code_jquery
JS_javascript 기술로 구현된 왼쪽 세로 슬라이딩 메뉴 효과 코드
위 내용은 js에서 페이지 사이드 슬라이딩 메뉴 효과를 얻는 방법(코드 포함)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!