IT

jQuery 우측 슬라이드 메뉴 만들기

lottoking 2017. 11. 15. 20:58
반응형

보통 모바일 웹 페이지를 만들 때 좌측 슬라이드 메뉴를 만들곤 하는데, 사실 일반 사람들은 페이지의 좌측 상단을 메뉴 버튼 보다는 뒤로가기(←) 버튼이 익숙하기 때문에 가끔씩 좌측 슬라이드가 아닌 우측 슬라이드메뉴가 필요한 경우가 있습니다. 저 역시 프로젝트를 진행하면서 우측 슬라이드 메뉴가 필요한 경우가 있는데 포스팅 대부분이 좌측 슬라이드라 참고하는데 지장이 좀 있었습니다. 그리하여 심플하게 사용할 수 있는 모듈을 찾아서 잘 응용하여 쓸 수 있게 되어 포스팅하여 공유하고자 합니다.


simple-sidebar 다운로드 받기


1. 우선 https://www.npmjs.com/package/simple-sidebar에 접속합니다.



2. 화면에서 Download 링크를 클릭 합니다.


3. Download 영역으로 스크롤 되면 releases 링크를 클릭합니다.




4. 다운로드 페이지로 이동하면 제일 최신 버튼을 다운로드 받습니다.

   저는 2.8.3버전으로 zip파일을 다운로드 받았습니다.




5. simple-sidebar-2.8.3.zip 파일을 다운로드 받고 나면 아무 곳에 압축을 풀고 demo/static-right.html 파일을 더블 클릭하여 실행합니다.










simple-sidebar 샘플 구경하기


1. demo/static-right.html를 실행하면 아래 캡쳐 그림처럼 원했던 우측 메뉴 예제를 확인할 수 있습니다.

  그럼 메뉴 버튼을 클릭해 볼까요?




2. 메뉴 버튼을 클릭하고 나면 우측에서 메뉴가 슬라이드로 나오면서 덤으로 Dim처리까지 됩니다.

   샘플의 슬라이드를 원위치 시키시려면 메뉴들 아래쪽에 Link (w)라는 링크가 있는데

   그걸 클릭하거나 Dim(회색 투명 음영처리) 부분을 클릭하면 원위치로 돌아가게 됩니다.




simple-sidebar 소스 파악하기


웹 스크립트용이니 심플하게 해당 화면에서 우측 마우스 클릭 후 "페이지 소스 보기"로 해서 소스를 오픈해 봅니다.
<!DOCTYPE html>
<html>
  <head>
    <meta content='IE=edge' http-equiv='X-UA-Compatible'>
    <meta charset='utf-8'>
    <meta content='width=device-width, user-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0' name='viewport'>
    <title>simpler-sidebar static-right</title>
    <link href='https://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.3/normalize.min.css' rel='stylesheet' type='text/css'>
    <link href='assets/style.css' rel='stylesheet' type='text/css'>
    <!--[if lt IE 9]>
      <script src='https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.min.js'></script>
    <![endif]-->
  </head>
  <body>
    <div class='main-content' id='main'>
      <div class='section'>
        <header>
          <h1>simple-sidebar</h1>
          <h3>demo test of a static page</h3>
          <h3>sidebar aligned to right</h3>
        </header>
      </div>
      <div class='section' id='lorem-ipsum'>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit..</p>
      </div>
    </div>
    <!-- div#main -->
    <div class='main-navbar main-navbar-fixed-top' id='main-navbar'>
      <div class='main-navbar-content'>
        <div class='icon right' id='toggle-sidebar'>
          <img alt='menu' height='24px' src='assets/menu32@64.png' width='24px'>
        </div>
      </div>
    </div>
    <!-- div#main-navbar -->
    <div class='main-sidebar main-sidebar-right' id='main-sidebar'>
      <div class='main-sidebar-wrapper'>
        <div class='section'>
          <h3>
            simple-sidebar development
          </h3>
        </div>
        <div class='section'>
          <h4>
            <a href='http://dcdeiv.github.io/simple-sidebar'>> Go Back to the Main Website <</a>
          </h4>
        </div>
        <div class='section'>
          <nav>
            <ul>
              <li class='close-sb'>
                <a href='index.html'>Development playground homepage</a>
              </li>
              <li class='close-sb'>
                <a href='static-right.html'>Static Right</a>
              </li>
              <li class='close-sb'>
                <a href='static-left.html'>Static Left</a>
              </li>
              <li class='close-sb'>
                <a href='dynamic-right.html'>Dynamic Right</a>
              </li>
              <li class='close-sb'>
                <a href='dynamic-left.html'>Dynamic Left</a>
              </li>
            </ul>
          </nav>
        </div>
        <div class='section'>
          <p>wo = without .close-sb class</p>
          <p>w = with .close-sb class</p>
        </div>
        <nav>
          <ul>
            <li class='close-sb'>
              <a href='#'>Link (w)</a>
            </li>
            <li>Not a link (wo)</li>
            <li>
              <a href='#'>Link (wo)</a>
            </li>
            <li class='close-sb'>Not a link (w)</li>
            <li>
              <a href='#'>Link (wo)</a>
            </li>
            <li>Not a link (wo)</li>
            <li>
              <a href='#'>Link (wo)</a>
            </li>
            <li>Not a link (wo)</li>
            <li class='close-sb'>
              <a href='#'>Link (w)</a>
            </li>
            <li class='close-sb'>Not a link (w)</li>
            <li class='close-sb'>
              <a href='#'>Link (w)</a>
            </li>
            <li class='close-sb'>Not a link (w)</li>
            <li>
              <a href='#'>Link (wo)</a>
            </li>
            <li>Not a link (wo)</li>
            <li>
              <a href='#'>Link (wo)</a>
            </li>
            <li class='close-sb'>Not a link (w)</li>
            <li>
              <a href='#'>Link (wo)</a>
            </li>
            <li class='close-sb'>Not a link (w)</li>
            <li>
              <a href='#'>Link (wo)</a>
            </li>
            <li class='close-sb'>Not a link (w)</li>
          </ul>
        </nav>
      </div>
    </div>
    <!-- div#main-sidebar -->
    <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js'></script>
    <script src='https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js'></script>
    <script src='../dist/jquery.simple-sidebar.min.js'></script>
    <script>
      $(document).ready(function() {
      	$('#main-sidebar').simpleSidebar({
      		opener: '#toggle-sidebar',
      		wrapper: '#main',
      		animation: {
      			easing: 'easeOutQuint'
      		},
      		sidebar: {
      			align: 'right',
      			closingLinks: '.close-sb'
      		},
      		sbWrapper: {
      			display: true
      		}
      	})
      })
    </script>
  </body>
</html>


우선 예제소스의 아래쪽 javascript 소스처럼 슬라이드 메뉴 요소"$('#main-sidebar')"에 simpleSidebar() 적용합니다.
opener는 슬라이드 메뉴를 나오게 할 메뉴 버튼의 오브젝트명
wrapper는 슬라이드 메뉴가 나올 때 옆으로 밀려서 Dim에 가려질 부모 영역
animation은 액션 종류인데 https://www.npmjs.com/package/simple-sidebar#options-list에 접속하셔서 고르시면 됩니다.
sidebar의 align이 우측에서 시작하느냐 좌측에서 시작하느냐입니다. 좌측에서 시작하고 싶으시면 left라고 고치시면 됩니다.
sidebar에서 closingLinks는 슬라이드 메뉴 닫기 링크입니다. 예제에서는 각종 버튼에 .close-sb라는 class를 줬지만
보통 프로젝트에서는 X 모양의 버튼을 만들어서 #closeBtn식으로 아이디를 지정하곤 합니다.
sbWrapper는 슬라이드 영역에 css를 직접 부여하고자 할 때 사용하는데, 그냥 기본으로 true로 두시고 디자인 파트에서 작업하는 것이 상호 간에 좋겠죠? ^^;

그밖의 다른 옵션들을 구경하고 싶다면 https://www.npmjs.com/package/simple-sidebar#options-list로 접속해서 구경하면 됩니다.

이상입니다.

슬라이드 모듈 이름 자체가 simple-sidebar인만큼 옵션도 심플하고 손 댈 곳이 별로 없어서 간단하게 사용하기 딱 좋아서 추천해 드립니다.



반응형

'IT' 카테고리의 다른 글

MySQL 소개  (0) 2017.11.15
[javascript] 모바일 여부 확인 후 튕겨내기  (0) 2017.11.15
JAVA 로또 번호 JSON 방식으로 불러오기  (0) 2017.11.15
MSSQL Server 스케쥴러 (에이전트) 등록 방법  (0) 2017.11.15
이클립스에 개발자용 폰트 적용하기  (0) 2017.11.15

'IT'의 다른글

  • 현재글jQuery 우측 슬라이드 메뉴 만들기

관련글

댓글

티스토리툴바