위토즈 - 개발자프로그램판매공간

정보공유

[JQUERY] 사이드 메뉴 슬라이드

 

 

HTML

 

<div class="aside">

    <div class="aside-header">

        jQuery asidebar

        <span class="close" data-dismiss="aside" aria-hidden="true">×</span>

    </div>

    <div class="aside-contents">

 

 

     </div>

</div>

<div class="aside-backdrop"></div>

 

 

 

 

 

 

CSS


.aside{min-width:300px;width:15%;position:fixed;top:0;right:0;bottom:0;background-color:#fafafa;font-family:Helvetica,Arial,sans-serif;z-index:10000;width:0;min-width:0;overflow:hidden;transition:.35s width ease,0.35s min-width ease}

.aside .aside-header{background-color:#3498db;padding:1em;padding-left:.5em;border-bottom:3px solid #2980b9;font-size:1.2em;color:#fff}

.aside .aside-header .close{float:right;cursor:pointer}

.aside .aside-contents{padding:0;padding-bottom:1em}

.aside.in{width:15%;min-width:300px;border-left:1px solid #333;box-shadow:0 0 15px 5px rgba(0,0,0,0.5);}

.aside-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;z-index:9998;background-color:#000;transition:.2s opacity ease;opacity:0;display:none}

 

.aside-backdrop.in{display:block;opacity:.5}body{background:#EEE;font-family:'Roboto'}

 

 

 

 

 

 

JS

 

 

function injectAsidebar(jQuery) {

  jQuery.fn.asidebar = function asidebar(status) {

    switch (status) {

      case "open":

        var that = this;

        // fade in backdrop

        if ($(".aside-backdrop").length === 0) {

          $("body").append("<div class='aside-backdrop'></div>");

        }

        $(".aside-backdrop").addClass("in");

 

 

        function close() {

          $(that).asidebar.apply(that, ["close"]);

        }

 

        // slide in asidebar

        $(this).addClass("in");

        $(this).find("[data-dismiss=aside], [data-dismiss=asidebar]").on('click', close);

        $(".aside-backdrop").on('click', close);

        break;

      case "close":

        // fade in backdrop

        if ($(".aside-backdrop.in").length > 0) {

          $(".aside-backdrop").removeClass("in");

        }

 

        // slide in asidebar

        $(this).removeClass("in");

        break;

      case "toggle":

        if($(this).attr("class").split(' ').indexOf('in') > -1) {

          $(this).asidebar("close");

        } else {

          $(this).asidebar("open");

        }

        break;

    }

  }

}

 

// support browser and node

if (typeof jQuery !== "undefined") {

injectAsidebar(jQuery);

else if (typeof module !== "undefined" && module.exports) {

module.exports = injectAsidebar;

}

 


정보공유
Total 49건 1 페이지
번호 제목 글쓴이 날짜 조회
49 magnificPopup css 를 추가하여 popup 마다 다른 사이즈 로 띄우기. 위토즈쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 01-16 804
48 magnificPopup 조건이 맞지 않으면 popup 띄우지 않기. 위토즈쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 01-12 772
47 magnificPopup iframe 으로 form submit 하기 위토즈쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 01-12 895
46 magnificPopup 으로 창을 호출 후 날짜 입력박스에 datepicker 실행되지 않는경우 위토즈쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 04-13 1828
45 magnificPopup 파라미터 변수 값 ajax 타입으로 전송 방법 위토즈쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 03-31 1897
44 jquery 로 text 필드와 file 첨부를 동시에. 위토즈쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 03-09 2016
43 파일 첨부 를 이미지버튼으로 대체한경우 첨부한 파일명 표시하기. 위토즈쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 03-09 1986
42 폼을 생성하고 선택된(필요한) 영역의 값만 전송 위토즈쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 01-17 2513
41 탭으로 나눠지는 슬라이드 쇼 위토즈쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 11-13 3277
40 jquery fullcalendar eventOrder 정렬 위토즈쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 08-23 11101
39 주소복사 계좌번호복사 URL복사 위토즈쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 05-11 10730
38 jquery 스와이프 메뉴 위토즈쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 04-15 10964
37 datepicker range select 커스터마이징 위토즈쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 01-30 14762
36 URL 에 포함되어있는 특정 파라미터값 가져오기 위토즈쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 01-29 13166
35 설문응답 유효성 검사 위토즈쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 11-13 11618