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

Programing

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

c10106 2017. 11. 2. 22:11

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

간단한 사이드 바 다운로드 받기

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

2. 화면에서 다운로드 링크를 클릭합니다.

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

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

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

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

간단한 사이드 바 샘플 구경하기

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

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

2. 메뉴 버튼을 슬라이드로 클릭하고 당신의 메뉴에서 덤으로 Dim 처리합니다.

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

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

단순 사이드 바 구현하기

웹 펼쳐 용 이니 심플하게 해당 화면에서 너 마우스 클릭 후 "페이지 소스보기"로해서 소스를 오픈 해 봅니다.

<! DOCTYPE html>
<html>
  <헤드>
    <meta content = 'IE = edge'http-equiv = 'X-UA-Compatible'>
    <메타 문자셋 = '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> 간단한 사이드 바 정적-오른쪽 </ 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'>
    <!-[IE 9 인 경우]>
      <script src = 'https : //cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.min.js'> </ script>
    <! [endif]->
  </ head>
  <본체>
    <div class = 'main-content'id = 'main'>
      <div class = 'section'>
        <헤더>
          <h1> 단순 사이드 바 </ h1>
          <h3> 정적 페이지의 데모 테스트 </ h3>
          <h3> 사이드 바가 오른쪽에 정렬 </ h3>
        </ 헤더>
      </ 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>
            간단한 사이드 바 개발
          </ h3>
        </ div>
        <div class = 'section'>
          <h4>
            <a href='http://dcdeiv.github.io/simple-sidebar'>> 메인 웹 사이트로 돌아 가기 << / a>
          </ h4>
        </ div>
        <div class = 'section'>
          <탐색>
            <ul>
              <li class = 'close-sb'>
                <a href='index.html'> 개발 플레이 그라운드 홈페이지 </a>
              </ li>
              <li class = 'close-sb'>
                <a href='static-right.html'> 정적 오른쪽 </a>
              </ li>
              <li class = 'close-sb'>
                <a href='static-left.html'> 정적 왼쪽 </a>
              </ li>
              <li class = 'close-sb'>
                <a href='dynamic-right.html'> 동적 권리 </a>
              </ li>
              <li class = 'close-sb'>
                <a href='dynamic-left.html'> 동적 왼쪽 </a>
              </ li>
            </ ul>
          </ nav>
        </ div>
        <div class = 'section'>
          <p> wo = .close-sb 클래스 없음 </ p>
          <p> w = .close-sb 클래스 사용 </ p>
        </ div>
        <탐색>
          <ul>
            <li class = 'close-sb'>
              <a href='#'> 링크 (w) </a>
            </ li>
            <li> 링크 아님 (wo) </ li>
            <li>
              <a href='#'> 링크 (wo) </a>
            </ li>
            <li class = 'close-sb'> 링크 아님 (w) </ li>
            <li>
              <a href='#'> 링크 (wo) </a>
            </ li>
            <li> 링크 아님 (wo) </ li>
            <li>
              <a href='#'> 링크 (wo) </a>
            </ li>
            <li> 링크 아님 (wo) </ li>
            <li class = 'close-sb'>
              <a href='#'> 링크 (w) </a>
            </ li>
            <li class = 'close-sb'> 링크 아님 (w) </ li>
            <li class = 'close-sb'>
              <a href='#'> 링크 (w) </a>
            </ li>
            <li class = 'close-sb'> 링크 아님 (w) </ li>
            <li>
              <a href='#'> 링크 (wo) </a>
            </ li>
            <li> 링크 아님 (wo) </ li>
            <li>
              <a href='#'> 링크 (wo) </a>
            </ li>
            <li class = 'close-sb'> 링크 아님 (w) </ li>
            <li>
              <a href='#'> 링크 (wo) </a>
            </ li>
            <li class = 'close-sb'> 링크 아님 (w) </ li>
            <li>
              <a href='#'> 링크 (wo) </a>
            </ li>
            <li class = 'close-sb'> 링크 아님 (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>
    <스크립트>
      $ (문서) .ready (function () {
      	$ ( '# main-sidebar'). simpleSidebar ({
      		오프너 : '# toggle-sidebar',
      		래퍼 : '#main',
      		애니메이션 : {
      			여유 : 'easeOutQuint'
      		},
      		사이드 바 : {
      			정렬 : '오른쪽',
      			closeLinks : '.close-sb'
      		},
      		sbWrapper : {
      			디스플레이 : 참
      		}
      	})
      })
    </ script>
  </ body>
</ html>

우선 예제 소스의 하위 javascript 소스처럼 메뉴 요소 "$ ( '# main-sidebar')"에 simpleSidebar () 적용합니다.

오프너는 슬라이드 메뉴를 나오게 할 메뉴 버튼의 오브젝트 명

wrapper는 슬라이드 메뉴가 나올 때 옆으로 밀려서 Dim에 가려 질 부모 영역

animation은 액션 종류로 https://www.npmjs.com/package/simple-sidebar#options-list에 접속 고르시면됩니다.

sidebar의 align이 당신의 시작 하느냐 왼쪽에서 시작 하느냐입니다. 왼쪽에서 시작하고 싶으시면 left라고 고 치시면입니다.

사이드 바에서 닫기 Links는 슬라이드 메뉴 닫기 링크입니다. 예제에서는 단추에 .close-sb라는 클래스를 소개지만

보통 프로젝트에서는 X 모양의 버튼을 만들어서 #closeBtn 식으로 아이디를 지정하곤합니다.

sbWrapper는 슬라이드 영역에 css를 직접 부여하고자 할 때 사용하는데, 그냥 기본으로 true로 두시고 디자인 파트에서 작업하는 것이 상호 좋겠죠? ^^;

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

이상입니다.

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

'Programing' 카테고리의 다른 글

iptime 공유기 비밀번호 설정 및 초기화 (0)	2018.02.10
[javascript] 모바일 여부 확인 후 튕겨내기 (0)	2017.11.09
JAVA 로또 번호 JSON 방식으로 불러오기 (0)	2017.11.01
MSSQL Server 스케쥴러 (에이전트) 등록 방법 (1)	2017.11.01
이클립스에 개발자용 폰트 적용하기 (0)	2017.10.31

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

c10106