Menu Fixed Dengan CSS3 Dan jQuery

Membuat fixed pada menu dengan CSS dan jquery saat di scroll ke bawah kali ini saya akan share dengan sedikit tutorial saja dari 1stwebdesigner. cara kerja dari tutorial ini adalah bagaimana menu yang awalnya di set di dalam header namun saat di scroll ke bawah menu tersebut akan diam di atas sampai akhir dan kembali ke semula jika mouse di kembalikan ke atas.

Untuk cara memasang pada blog hampir sama dengan tutorial saya pada menu navigation dengan efek easing.

Lihat DemoWeb Tutorial

<div id="navi">
    <div id="menu" class="default">
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">CSS</a></li>
            <li><a href="#">Design</a></li>
            <li><a href="#">Development</a></li>
            <li><a href="#">Freebies</a></li>
            <li><a href="#">Inspiration</a></li>
            <li><a href="#">Resources</a></li>            
            <li><a href="#">Tutorials</a></li>            
            <li><a href="#">WordPress</a></li>            
        </ul>
    </div><!-- close menu -->
</div><!-- close navi -->

#navi {
    margin-top: 50px;
}
#menu {
    background: #333;
    text-align: center;
    margin: 0 auto;
    padding: 0;
}
#content {
    width: 750px;
    margin: 0 auto;
    margin-bottom: 25px;
    padding: 30px 0;
    text-align: left;
}
ul {
    padding: 5px;
}
ul li {
    list-style-type: none;
    display: inline;
    margin-right: 15px;
}
ul li a {
    color: #fff;
    text-decoration: none;
    text-shadow: 1px 1px 1px #000;
    padding: 3px 7px;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    
    -webkit-transition-property: color, background;
    -webkit-transition-duration: 0.5s, 0.5s;
}
ul li a:hover {
    background: #01458e;
    color: #ff0;

    -webkit-transition-property: color, background;
    -webkit-transition-duration: 0.5s, 0.5s;
}
.default {
    width: 850px;
    box-shadow: 0 0 2px #fff;
    -webkit-box-shadow: 0 0 2px #fff;
    -moz-box-shadow: 0 0 2px #fff;
}
.fixed {
    position: fixed;
    top: -5px;
    left: 0;
    width: 100%;
    border-bottom:1px solid #fff;
    box-shadow: 0 0 40px #222;
    -webkit-box-shadow: 0 0 40px #222;
    -moz-box-shadow: 0 0 40px #222;
}

<script type="text/javascript">
//<![CDATA[
$(function(){
    var menu = $('#menu'),
        pos = menu.offset();
        $(window).scroll(function(){
            if($(this).scrollTop() > pos.top+menu.height() && menu.hasClass('default')){
                menu.fadeOut('fast', function(){
                    $(this).removeClass('default').addClass('fixed').fadeIn('fast');
                });
            }else if($(this).scrollTop() <= pos.top && menu.hasClass('fixed')){
                menu.fadeOut('fast', function(){
                    $(this).removeClass('fixed').addClass('default').fadeIn('fast');
                });
            }
        });
});
//]]>
</script>

---

Post By : denzdii