모바일 네비게이션 슬라이드 sly.min.js

모바일  네비게이션 슬라이드 

아래 사이트 클릭 하면 데모를 볼 수 있습니다.

http://darsa.in/sly/examples/horizontal.html

아래 사이트 클릭하면 플러그인을 다운 받으실 수 있습니다.

http://darsa.in/sly/

<style>

.nav .nav_u {

    display: table;

    height: 44px;

    padding: 0 15px;

    white-space: nowrap;

}

.nav .nav_l {

    display: table-cell;

    margin: 0;

    white-space: nowrap;

    text-align: center;

}

.nav .nav_a {

    color: #333;

    display: block;

    font-size: 30px;

    font-weight: 700;

    height: 44px;

    line-height: 44px;

    margin-left: 5px;

    padding: 0 5px;

    position: relative;

    text-shadow: 0 -1px 1px rgba(255, 255, 255, 0.7);

}

</style>

<script src="/js/jquery-1.8.3.min.js"></script>

<script defer src="/js/vendor_plugins.js"></script>

<script defer src="/js/sly.min.js"></script>

<script>

jQuery(function($){

'use strict';

(function () {

var $frame  = $('#basic2');

var $slidee = $frame.children('ul').eq(0);

// Call Sly on frame

$frame.sly({

horizontal: 1,

itemNav: 'basic',

smart: 1,

activateOn: 'click',

mouseDragging: 1,

touchDragging: 1,

releaseSwing: 1,

startAt: 1,

scrollBy: 4,

activatePageOn: 'click',

speed: 300,

elasticBounds: 1,

easing: 'easeOutExpo',

dragHandle: 1,

dynamicHandle: 1,

clickBar: 1

});

}());

});

</script>

<div class="nav">

<nav class="topmn" id="basic2">

<ul class="nav_u">

<li class="nav_l "><a href="G5_URL/page/writemenu.php" class="nav_a">글쓰기</a></li>

<li class="nav_l "><a href="" class="nav_a">My홈피</a></li>

<li class="nav_l "><a href="G5_URL/index_main.php" class="nav_a">소통방</a></li>

<li class="nav_l "><a href="javascript:alert('준비중입니다.');" class="nav_a">뉴스</a></li>

<li class="nav_l "><a href="G5_URL/page/sec5_service.php" class="nav_a">5초생활</a></li>

<li class="nav_l "><a href="javascript:alert('준비중입니다.');" class="nav_a">상품홍보</a></li>

<li class="nav_l "><a href="G5_URL/page/ad_saving.php" class="nav_a">광고적립</a></li>

<li class="nav_l "><a href="http://shop.so.vc/html_file.php?file=all_best100.html&urlID=" class="nav_a">추천상품</a></li>

<li class="nav_l "><a href="G5_URL/page/mypost.php" class="nav_a">우체통</a></li>

<li class="nav_l "><a href="G5_URL/page/mypost.php" class="nav_a">우체통</a></li>

<li class="nav_l "><a href="G5_URL/page/mypost.php" class="nav_a">우체통</a></li>

<li class="nav_l "><a href="G5_URL/page/mypost.php" class="nav_a">우체통</a></li>

<li class="nav_l "><a href="G5_URL/page/mypost.php" class="nav_a">우체통</a></li>

<li class="nav_l "><a href="G5_URL/page/mypost.php" class="nav_a">우체통</a></li>

<li class="nav_l "><a href="G5_URL/page/mypost.php" class="nav_a">우체통</a></li>

<li class="nav_l "><a href="G5_URL/page/mypost.php" class="nav_a">우체통</a></li>

<li class="nav_l "><a href="G5_URL/page/mypost.php" class="nav_a">우체통</a></li>

<li class="nav_l "><a href="G5_URL/page/mypost.php" class="nav_a">우체통</a></li>

<li class="nav_l "><a href="G5_URL/page/mypost.php" class="nav_a">우체통</a></li>

<li class="nav_l "><a href="G5_URL/page/mypost.php" class="nav_a">우체통</a></li>

<li class="nav_l "><a href="G5_URL/page/mypost.php" class="nav_a">우체통</a></li>

<li class="nav_l "><a href="G5_URL/page/mypost.php" class="nav_a">우체통</a></li>

<li class="nav_l "><a href="G5_URL/page/mypost.php" class="nav_a">우체통</a></li>

<li class="nav_l "><a href="G5_URL/page/mypost.php" class="nav_a">우체통</a></li>

</ul>

</nav>

</div>

모바일사이드메뉴.zip