시작페이지로 즐겨찾기추가
로그인
회원가입 l 출석체크 l 마이페이지 l CGIMALL
happycgi
자료실 사이트등록 랭킹100 프로그램리뷰 관리자추천자료 초보가이드
커뮤니티
전체 펼쳐보기
퀵메뉴링크 jquery , CSS , PHP , Javascript , 무료폰트 , ASP
상세검색
 > JAVASCRIPT > javascript 소스창고 > 메뉴 관련 > Slideout 상세정보
사이트등록
현재접속자 새로고침
Slideout
소스통계정보 오류신고 및 문의
해피팀
네티즌
트위터로 보내기 페이스북으로 보내기 싸이월드 공감
소스분류 메뉴 관련
다운로드 횟수 46 회
간단설명 모바일에서 이용하면 좋을듯한 메뉴 스크립트 입니다.
평가하기 훌륭함 매우좋음 좋음 괜찮음 보통 별로
홈페이지바로가기 소스다운로드 데모 미리보기 스크랩하기

안녕하세요 모바일에서 사용하면 괜찮은 jquery 입니다.
 
PC 에 사용해도 상관은 없지만 모바일에 더 잘 어울릴꺼 같아요  ^^;
 

 

기본적인 HTML 은 아래와 같은 구성을 가지고 있습니다.

<nav id="menu">
  <header>
    <h2>Menu</h2>
  </header>
</nav>

<main id="panel">
  <header>
    <h2>Panel</h2>
  </header>
</main>


스타일도 당연히 따라오겠죠 ^^

body {
  width: 100%;
  height: 100%;
}

.slideout-menu {
  position: fixed;
  top: 0;
  bottom: 0;
  width: 256px;
  min-height: 100vh;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
  z-index: 0;
  display: none;
}

.slideout-menu-left {
  left: 0;
}

.slideout-menu-right {
  right: 0;
}

.slideout-panel {
  position: relative;
  z-index: 1;
  will-change: transform;
  background-color: #FFF; /* A background-color is required */
  min-height: 100vh;
}

.slideout-open,
.slideout-open body,
.slideout-open .slideout-panel {
  overflow: hidden;
}

.slideout-open .slideout-menu {
  display: block;
}


구동하기 위한 스크립트도 당연히 있습니다.

<script src="dist/slideout.min.js"></script>
<script>
  var slideout = new Slideout({
    'panel': document.getElementById('panel'),
    'menu': document.getElementById('menu'),
    'padding': 256,
    'tolerance': 70
  });

  // Toggle button
  document.querySelector('.toggle-button').addEventListener('click', function() {
    slideout.toggle();
  });
</script>



압축파일 해제 하시면 test 폴더안에 index.html, index.right.html 2개가 있고 둘다 문제 없이 작동은 합니다.
  
그러나  index.html 은 개발자가 메뉴가 작동하는걸 보여주기 위해 강제로 2번 정도 메뉴가 움직이도록 해 두었네요.
 
소스 하단에 보시면 var runner = mocha.run(); 있는데요. 주석처리하시면 자동 메뉴 움직이는거 막을 수 있습니다.

참고하셔서 이쁜 모바일 사이트 만들어 보세요 ^^

https://github.com/Mango/slideout  에 접속하시면 옵션, 이벤트 들에 대한 API 문서가 있으니 필요하시면 참고 하시기 바랍니다.
 


네티즌 의견   이용하신 자료의 후기를 자유롭게 작성하세요. (상업적인 광고 및 도배성 글 등은 사전통보없이 삭제될 수 있습니다.)
내용 아이디 의견남기기
등록된 의견이 없습니다.
1
이름
내용
:네맞아요: :화나는군요: :잠와: :우울해: :이건아냐: :왕하하: 왕웃음~ 놀램~
도배방지키
 30916591 보이는 도배방지키를 입력하세요.