jquery animate를 이용한 네이버 모바일 처럼 왼쪽에서 슬라이딩 되는 메뉴 > PHP

• 목록

<?
 ###################################################################################
 #  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>