jquery animate를 이용한 네이버 모바일 처럼 왼쪽에서 슬라이딩 되는 메뉴
페이지 정보
![profile_image](http://beautipia.co.kr/img/no_profile.gif)
본문
<?
###################################################################################
# jquery animate를 이용한 네이버 모바일 처럼 왼쪽에서 슬라이딩 되는 메뉴
# 기본셋팅 : 왼쪽 -> 오른쪽
###################################################################################
# jquery animate를 이용한 네이버 모바일 처럼 왼쪽에서 슬라이딩 되는 메뉴
# 기본셋팅 : 왼쪽 -> 오른쪽
# 네이버 소스 아니며 메뉴기능 이외에 다른 기능 없음
//메뉴관련
$menuDivWidth = "280"; // 메뉴너비
$menuBtLeft = "10"; // 메뉴버튼 기본위치
$menuBtSpace = $menuDivWidth + $menuBtLeft; // 메뉴버튼 움직임 위치
$slideInit = "50"; // 메뉴 초기화 할 슬리이드 움직임 간격
?>
<script type="text/javascript" src="/js/jquery-1.8.0.min.js"></script>
<style type="text/css">
#slidemenu {
z-index:100; position:fixed; top:0px; left:-<?=$menuDivWidth?>px; padding:0px; margin:0px; width:<?=$menuDivWidth?>px;height:100%;
-webkit-user-select:none;
-webkit-touch-callout:none;
-webkit-tap-highlight-color: rgba(0,0,0,0);
overflow-y: visible !important;
}
#CarprMobileMenu
{
z-index:100; position:fixed; bottom:<?=$CarprMobileMenuBottom?>; left:<?=$menuBtLeft?>px; padding:0px; margin:0px; width:68px;height:68px;
-webkit-user-select:none;
-webkit-touch-callout:none;
-webkit-tap-highlight-color: rgba(0,0,0,0);
overflow-y: visible !important;
}
</style>
<div id="slidemenu">
메뉴들 <p>
<a href="#">내 홈피</a> <p>
<a href="http://www.naver.com">네이버</a> <p>
<a href="http://www.daum.net">다음</a> <p>
<a href="http://www.naver.com">네이트</a> <p>
</div>
<div style="text-align:right;background-color:none;" id="CarprMobileMenu">
<div style="text-align:right;display:;" id="CMbuttonp" onclick="CarPrMenuView();"><img src="오픈버튼이미지"></div>
<div style="text-align:right;display:none;" id="CMbuttonm" onclick="CarPrMenuView();"><img src="클로즈버튼이미지"></div>
</div>
<script>
<!--
// 클릭관련
function CarPrMenuRight()
{
// 메뉴 보임
CMbuttonp.style.display='none';
CMbuttonm.style.display='';
$("#CarprMobileMenu").stop().animate({left:"<?=$menuBtSpace?>px"}, 300);
$("#slidemenu").stop().animate({left:"0px"}, 300);
}
function CarPrMenuLeft()
{
// 메뉴 사라짐
CMbuttonm.style.display='none';
CMbuttonp.style.display='';
$("#CarprMobileMenu").stop().animate({left:"<?=$menuBtLeft?>px"}, 300);
$("#slidemenu").stop().animate({left:"-<?=$menuDivWidth?>px"}, 300);
}
// 메뉴관련 기본 함수.
function CarPrMenuView ()
{
var lastlaypoint = $("#slidemenu:last");
var lastlaypointer = lastlaypoint.offset();
if(lastlaypointer.left < 0)
{
CarPrMenuRight();
}
else
{
CarPrMenuLeft();
}
}
// 슬라이드 관련... addEventListener 모바일에서만 됨
if (navigator.userAgent.match(/iPhone|iPad|Mobile|UP.Browser|Android|BlackBerry|Windows CE|Nokia|webOS|Opera Mini|SonyEricsson|opera mobi|Windows Phone|IEMobile|POLARIS/) != null)
{
window.addEventListener("load", init, false);
var eventDiv;
var dstartX;
var dmoveX;
var dendX;
function init(e) {
eventDiv = document.getElementById("slidemenu");
eventDiv.addEventListener("touchstart", webTouchStart, false);
eventDiv.addEventListener("touchmove", webTouchMove, false);
eventDiv.addEventListener("touchend", webTouchEnd, false);
eventDiv.addEventListener("webkitTransitionEnd", webTouchEnd, false);
eventDiv.addEventListener("msTransitionEnd", webTouchEnd, false);
eventDiv.addEventListener("oTransitionEnd", webTouchEnd, false);
eventDiv.addEventListener("otransitionend", webTouchEnd, false);
eventDiv.addEventListener("transitionend", webTouchEnd, false);
}
function webTouchStart(e) {
var touch = e.touches[0];
dstartX = touch.clientX;
}
function webTouchMove(e) {
e.preventDefault();
var touch = e.touches[0] || e.changedTouches[0];
touchX = touch.clientX;
dmoveX = touch.pageX - dstartX;
if(dmoveX < 0)
{
menudmoveX = <?=$menuBtSpace?> + dmoveX;
$("#CarprMobileMenu").stop().animate({left: menudmoveX + "px"}, 0);
$("#slidemenu").stop().animate({left: dmoveX + "px"}, 0);
}
}
function webTouchEnd(e) {
var touch = e.touches[0] || e.changedTouches[0];
var dendX = touch.pageX;
var gap;
gap = dstartX - dendX;
if( gap > <?=$slideInit?>)
{
CarPrMenuLeft();
}
else
{
CarPrMenuRight();
}
}
}
//-->
</script>
###################################################################################
# jquery animate를 이용한 네이버 모바일 처럼 왼쪽에서 슬라이딩 되는 메뉴
# 기본셋팅 : 왼쪽 -> 오른쪽
###################################################################################
# jquery animate를 이용한 네이버 모바일 처럼 왼쪽에서 슬라이딩 되는 메뉴
# 기본셋팅 : 왼쪽 -> 오른쪽
# 네이버 소스 아니며 메뉴기능 이외에 다른 기능 없음
//메뉴관련
$menuDivWidth = "280"; // 메뉴너비
$menuBtLeft = "10"; // 메뉴버튼 기본위치
$menuBtSpace = $menuDivWidth + $menuBtLeft; // 메뉴버튼 움직임 위치
$slideInit = "50"; // 메뉴 초기화 할 슬리이드 움직임 간격
?>
<script type="text/javascript" src="/js/jquery-1.8.0.min.js"></script>
<style type="text/css">
#slidemenu {
z-index:100; position:fixed; top:0px; left:-<?=$menuDivWidth?>px; padding:0px; margin:0px; width:<?=$menuDivWidth?>px;height:100%;
-webkit-user-select:none;
-webkit-touch-callout:none;
-webkit-tap-highlight-color: rgba(0,0,0,0);
overflow-y: visible !important;
}
#CarprMobileMenu
{
z-index:100; position:fixed; bottom:<?=$CarprMobileMenuBottom?>; left:<?=$menuBtLeft?>px; padding:0px; margin:0px; width:68px;height:68px;
-webkit-user-select:none;
-webkit-touch-callout:none;
-webkit-tap-highlight-color: rgba(0,0,0,0);
overflow-y: visible !important;
}
</style>
<div id="slidemenu">
메뉴들 <p>
<a href="#">내 홈피</a> <p>
<a href="http://www.naver.com">네이버</a> <p>
<a href="http://www.daum.net">다음</a> <p>
<a href="http://www.naver.com">네이트</a> <p>
</div>
<div style="text-align:right;background-color:none;" id="CarprMobileMenu">
<div style="text-align:right;display:;" id="CMbuttonp" onclick="CarPrMenuView();"><img src="오픈버튼이미지"></div>
<div style="text-align:right;display:none;" id="CMbuttonm" onclick="CarPrMenuView();"><img src="클로즈버튼이미지"></div>
</div>
<script>
<!--
// 클릭관련
function CarPrMenuRight()
{
// 메뉴 보임
CMbuttonp.style.display='none';
CMbuttonm.style.display='';
$("#CarprMobileMenu").stop().animate({left:"<?=$menuBtSpace?>px"}, 300);
$("#slidemenu").stop().animate({left:"0px"}, 300);
}
function CarPrMenuLeft()
{
// 메뉴 사라짐
CMbuttonm.style.display='none';
CMbuttonp.style.display='';
$("#CarprMobileMenu").stop().animate({left:"<?=$menuBtLeft?>px"}, 300);
$("#slidemenu").stop().animate({left:"-<?=$menuDivWidth?>px"}, 300);
}
// 메뉴관련 기본 함수.
function CarPrMenuView ()
{
var lastlaypoint = $("#slidemenu:last");
var lastlaypointer = lastlaypoint.offset();
if(lastlaypointer.left < 0)
{
CarPrMenuRight();
}
else
{
CarPrMenuLeft();
}
}
// 슬라이드 관련... addEventListener 모바일에서만 됨
if (navigator.userAgent.match(/iPhone|iPad|Mobile|UP.Browser|Android|BlackBerry|Windows CE|Nokia|webOS|Opera Mini|SonyEricsson|opera mobi|Windows Phone|IEMobile|POLARIS/) != null)
{
window.addEventListener("load", init, false);
var eventDiv;
var dstartX;
var dmoveX;
var dendX;
function init(e) {
eventDiv = document.getElementById("slidemenu");
eventDiv.addEventListener("touchstart", webTouchStart, false);
eventDiv.addEventListener("touchmove", webTouchMove, false);
eventDiv.addEventListener("touchend", webTouchEnd, false);
eventDiv.addEventListener("webkitTransitionEnd", webTouchEnd, false);
eventDiv.addEventListener("msTransitionEnd", webTouchEnd, false);
eventDiv.addEventListener("oTransitionEnd", webTouchEnd, false);
eventDiv.addEventListener("otransitionend", webTouchEnd, false);
eventDiv.addEventListener("transitionend", webTouchEnd, false);
}
function webTouchStart(e) {
var touch = e.touches[0];
dstartX = touch.clientX;
}
function webTouchMove(e) {
e.preventDefault();
var touch = e.touches[0] || e.changedTouches[0];
touchX = touch.clientX;
dmoveX = touch.pageX - dstartX;
if(dmoveX < 0)
{
menudmoveX = <?=$menuBtSpace?> + dmoveX;
$("#CarprMobileMenu").stop().animate({left: menudmoveX + "px"}, 0);
$("#slidemenu").stop().animate({left: dmoveX + "px"}, 0);
}
}
function webTouchEnd(e) {
var touch = e.touches[0] || e.changedTouches[0];
var dendX = touch.pageX;
var gap;
gap = dstartX - dendX;
if( gap > <?=$slideInit?>)
{
CarPrMenuLeft();
}
else
{
CarPrMenuRight();
}
}
}
//-->
</script>
- 이전글페이지에서 사용된 문자열 인코딩 체크하기 확인하기 21.02.09
- 다음글모바일에서 화면 특정부분의 레이어 옆으로 이동시키기 21.02.09
댓글목록
등록된 댓글이 없습니다.