Menu Fixed Dengan CSS3 Dan jQuery

Fixed Menu 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>

license by under 88 blogspot.com
Post By : denzdii

5 comments:

  1. pertamax.........hehehe

    ReplyDelete
  2. Wah mantap nih tutorialnya \m/
    Salam kenal :D

    ReplyDelete
  3. ane berhasil gan Thank's gan...

    ReplyDelete
  4. mantap tutorialnya :) thanks a lot gan \o/

    ReplyDelete

Perhatian !! Komentar Pada Bulan September 2012 belum bisa di balas.
di karenakan semua admin sedang sibuk dengan urusan kulliahnya.
semoga setelah akhir bulan artikel dan komentar akan segera di update.


terima kasih atas perhatiannya sekali lagi kami minta maaf yang sebesar-besarnya.

 
loading...
Top