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
번호 분류 제목 글쓴이 날짜 조회 수
18 PlugIn 자동 롤링 배너 Jquery 2 file kay 2013.08.07 13877
17 PlugIn 스크롤 따라 다니는 배너 file kay 2013.09.14 4517
16 PlugIn vGrid - 브라우저 너비에 따른 가변 그리드 1 kay 2013.04.08 6956
15 PlugIn Tree 메뉴만들기 1 file kay 2013.08.14 5642
14 PlugIn tiptip - 툴팁 kay 2013.04.14 17886
13 PlugIn Star Rating Plugin - jQuery 별점 주기 2 file kay 2014.05.01 13219
12 PlugIn Smooth Scroll - 스크롤 이동 ( 속도 , 위치 ) 2 file kay 2013.04.06 12676
11 PlugIn sliding horizontal parallax - parallax 공부 샘플 kay 2013.04.17 6151
10 PlugIn poshytip - 툴팁 kay 2013.04.15 11803
9 PlugIn Moodular - 회전,슬라이더, 터치 ,모자이크 kay 2013.05.04 5352
» PlugIn makisu - 메뉴 접기(?) kay 2013.04.16 18446
7 PlugIn lightBox2 - 레이어 팝업 file kay 2013.04.06 6109
6 PlugIn jquery-syaku.rolling 상하좌우 롤링 ( 자동롤링 , 버튼 ) 10 file kay 2014.02.09 20152
5 PlugIn jQuery Zoom - 이미지 줌 제어 ( 휠 , 클릭 , 오버 ) kay 2013.04.17 8421
4 PlugIn jQuery Plugin For Auto Resizing iFrame - iFrame Resizer file kay 2014.03.10 105354
3 PlugIn jQuery Org Chart - 조직도 그리기 file kay 2014.09.01 16605
2 PlugIn jQuery Formatnumber , 콤마처리 kay 2015.11.03 2078
1 PlugIn fancyBox - 레이어팝업 (추천) kay 2013.04.16 32407
Board Pagination Prev 1 Next
/ 1