My Name is Kay....

DIY , 먹방 , 개발 , 육아 , 여행 좋아합니다.
AdBlock 사용시 화면이 정상적으로 노출되지 않습니다.
포스팅 관련 문의 및 개발 문의는 Email : wkzkfmxksi@gmail.com

추가 포스팅이 이뤄지지 않는 블로그입니다. 문의는 wkzkfmxksi@gmail.com 으로 연락주세요.
PlugIn
2013.04.16 12:47

makisu - 메뉴 접기(?)

kay
조회 수 18446 추천 수 0 댓글 0
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄

API Url : http://www.queness.com/post/13159/implement-the-impressive-paper-folding-effects

Test Url : http://www.uhoon.co.kr/test/513.html


종이 접듯 메뉴가 펼쳐지고 접히는 효과!


<!doctype html>
<html>
<head>
	<meta charset="utf-8" />
    <title>Makisu ~ CSS 3D Dropdown Concept</title>
	<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
    <script src="513/makisu.js"></script>
    <link href='http://fonts.googleapis.com/css?family=Days+One' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="513/style.css">
</head>
<body>
    <header class="header">
        <hgroup>
            <h1>Makisu</h1>
            <h2>CSS 3D Dropdown Concept</h2>
        </hgroup>
    </header>
    <section class="demo">
        <dl class="list nigiri">
            <dt>Nigiri</dt>
            <dd><a href="#">Maguro</a></dd>
            <dd><a href="#">Sake</a></dd>
            <dd><a href="#">Unagi</a></dd>
            <dd><a href="#">Buri</a></dd>
            <dd><a href="#">Suzuki</a></dd>
            <dd><a href="#">Saba</a></dd>
            <dd><a href="#">Iwashi</a></dd>
            <dd><a href="#">Kohada</a></dd>
            <dd><a href="#">Hirame</a></dd>
            <dd><a href="#">Tobiwo</a></dd>
        </dl>

        <dl class="list maki">
            <dt>Maki</dt>
            <dd><a href="#">Ana-kyu</a></dd>
            <dd><a href="#">Chutoro</a></dd>
            <dd><a href="#">Kaiware</a></dd>
            <dd><a href="#">Kampyo</a></dd>
            <dd><a href="#">Kappa</a></dd>
            <dd><a href="#">Natto</a></dd>
            <dd><a href="#">Negitoro</a></dd>
            <dd><a href="#">Oshinko</a></dd>
            <dd><a href="#">Otoro</a></dd>
            <dd><a href="#">Tekka</a></dd>
        </dl>

        <dl class="list sashimi">
            <dt>Sashimi</dt>
            <dd><a href="#">Maguro</a></dd>
            <dd><a href="#">Toro</a></dd>
            <dd><a href="#">Ebi</a></dd>
            <dd><a href="#">Saba</a></dd>
            <dd><a href="#">Ika</a></dd>
            <dd><a href="#">Tako</a></dd>
            <dd><a href="#">Tomago</a></dd>
            <dd><a href="#">Kani</a></dd>
            <dd><a href="#">Katsuo</a></dd>
            <dd><a href="#">Maguro</a></dd>
        </dl>

        <a href="#" class="toggle">Toggle</a>

    </section>
    <script>

        // The `enabled` flag will be `false` if CSS 3D isn't available
        if ( $.fn.makisu.enabled ) {
            var $sashimi = $( '.sashimi' );
            var $nigiri = $( '.nigiri' );
            var $maki = $( '.maki' );
            // Create Makisus
            $nigiri.makisu({
                selector: 'dd',
                overlap: 0.85,
                speed: 1.7
            });
            $maki.makisu({
                selector: 'dd',
                overlap: 0.6,
                speed: 0.85
            });
            $sashimi.makisu({
                selector: 'dd',
                overlap: 0.2,
                speed: 0.5
            });
            // Open all
            $( '.list' ).makisu( 'open' );
            // Toggle on click
            $( '.toggle' ).on( 'click', function() {
                $( '.list' ).makisu( 'toggle' );
            });
            // Disable all links
            $( '.demo a' ).click( function( event ) {
                event.preventDefault();
            });
        } else {
            $( '.warning' ).show();
        }
    </script>
</body>
</html>

makisu.png

?

List of Articles
번호 분류 제목 글쓴이 날짜 조회 수
54 A to Z JQuery A to Z kay 2013.01.02 5114
53 UI Menu Bar kay 2013.02.06 5150
52 etc 페이지 로딩 속도 개선 - 이미지 로딩처리 kay 2013.03.02 6507
51 etc XML 파싱 kay 2013.03.02 6337
50 UI SelectBox Option 값 초기화 및 수정 삭제 kay 2013.03.02 36655
49 etc 에러 리포팅 , Ajax 디버깅 ( JS , ASP ) - 오류메시지 확인하기 kay 2013.03.08 30612
48 UI AutoCompleate - ( XML + Jquery ) kay 2013.03.08 5540
47 UI AutoCompleate - ( JSON + Jquery ) kay 2013.04.02 5905
46 UI select Box option ( 초기화,추가,삭제 ) kay 2013.04.03 9529
45 UI .on kay 2013.04.03 4919
44 UI 객체 초기화 kay 2013.04.04 4958
43 A to Z jQuery Learning Center - 공부 공부 kay 2013.04.05 4236
42 PlugIn lightBox2 - 레이어 팝업 file kay 2013.04.06 6109
41 PlugIn Smooth Scroll - 스크롤 이동 ( 속도 , 위치 ) 2 file kay 2013.04.06 12676
40 PlugIn vGrid - 브라우저 너비에 따른 가변 그리드 1 kay 2013.04.08 6956
39 UI animate - 각종 애니메이션 효과 kay 2013.04.11 26329
38 PlugIn tiptip - 툴팁 kay 2013.04.14 17886
37 PlugIn poshytip - 툴팁 kay 2013.04.15 11803
» PlugIn makisu - 메뉴 접기(?) kay 2013.04.16 18446
35 PlugIn fancyBox - 레이어팝업 (추천) kay 2013.04.16 32407
Board Pagination Prev 1 2 3 Next
/ 3