메뉴 클릭시 해당 컨덴츠로 이동하는 네비게이션 입니다.

메뉴클릭시 해당 페이지로 애니메이션 효과를 내며 이동하는 네비게이션 입니다.

1.링크

네비게이션을 사용하기 위해서 링크를 합니다.

<link href="//cdnjs.cloudflare.com/ajax/libs/animate.css/3.0.0/animate.min.css" rel="stylesheet" type="text/css">

<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>

<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>

<script src="//cdn.jsdelivr.net/npm/stickyNavbar.js@1.3.3/jquery.stickyNavbar.min.js"></script>​

2.HTML 마크업

네비게이션을 구성할 HTML 내용 입니다.

<div id="header" class="header">

     <nav id="nav">

             <ul class="nav navbar-nav">

                     <li>

                         <a href="#home">Home</a>

                     </li>

                     <li>

                         <a href="#about">About</a>

                     </li>

                     <li>

                         <a href="#services">Services</a>

                     </li>

                     <li>

                         <a href="#contact">Contact</a>

                     </li>

             </ul>

     </nav>

</div>​

3.바디 마크업

이동할 바디쪽 컨덴츠 입니다.

앞의 ID 값을 보면 어떻게 이동되는지 쉽게 파악이 됩니다.

<div id="home" class="scrollto">

        <!-- Your content goes here -->

<div id="about" class="scrollto">

        <!-- Your content goes here -->

<div id="services" class="scrollto">

        <!-- Your content goes here -->

<div id="contact" class="scrollto">

        <!-- Your content goes here -->

</div>​

4.스타일시트 ACTIVE 수정

선택되어진 버튼의 표현할 스타일 시트 입니다.

.active {

        color: #fff !important;

        text-decoration: underline !important;

        -webkit-transform: translate3d(0, 0, 0);

        -moz-transform: translate3d(0, 0, 0);

        -o-transform: translate3d(0, 0, 0);

        -ms-transform: translate3d(0, 0, 0);

        transform: translate3d(0, 0, 0); // hardware acceleration of CSS animation

}​

5.JQUERY

$(function () {

     $('.header').stickyNavbar();

});​

6.옵션

$(function () {

    $('.header').stickyNavbar({

        activeClass: "active", // Class to be added to highlight nav elements

        sectionSelector: "scrollto", // Class of the section that is interconnected with nav links

        animDuration: 350, // Duration of jQuery animation as well as jQuery scrolling duration

        startAt: 0, // Stick the menu at XXXpx from the top of the this() (nav container)

        easing: "swing", // Easing type if jqueryEffects = true, use jQuery Easing plugin to extend easing types - gsgd.co.uk/sandbox/jquery/easing

        animateCSS: true, // AnimateCSS effect on/off

        animateCSSRepeat: false, // Repeat animation everytime user scrolls

        cssAnimation: "fadeInDown", // AnimateCSS class that will be added to selector

        jqueryEffects: false, // jQuery animation on/off

        jqueryAnim: "slideDown", // jQuery animation type: fadeIn, show or slideDown

        selector: "a", // Selector to which activeClass will be added, either "a" or "li"

        mobile: false, // If false, nav will not stick under viewport width of 480px (default) or user defined mobileWidth

        mobileWidth: 480, // The viewport width (without scrollbar) under which stickyNavbar will not be applied (due user usability on mobile)

        zindex: 9999, // The zindex value to apply to the element: default 9999, other option is "auto"

        stickyModeClass: "sticky", // Class that will be applied to 'this' in sticky mode

        unstickyModeClass: "unsticky" // Class that will be applied to 'this' in non-sticky mode

    });

});​