Menu Fixed Blog Stay To Top

Stay On Top

Menu Fixed Blog Stay To Top - Bagaimana pentingnya peran menu pada blog sudah tidak perlu dijelaskan lagi karena kita semua pasti tau .

Dan di tutorial kali yang kita bahas adalah menu yang sudah sangat jelas fungsinya tersebut . Namun yang beda adalah Menu yang akan saya bagikan ini adalah menu Abadi . Katakan saja begitu .


Kenapa begitu ? Menu ini akan tetap diatas sejauh apapun anda menscroll halaman .
Keuntungannya apa ? Keuntungannya adalah pengguna website anda akan dipermudah karena tidak perlu menggulung layar keatas untuk melihat dan memilih menu lain , terlepas dari adanya Back To Top Button .

Demo 

Oke , langsung kita mulai tutorial kali ini .

Untuk membuat menu inikita akan menggunakan 3 Elemen penting yakni HTML,Css dan juga JavaScript .

Element

HTML

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

Css

#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;
} 

JavaScript

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

Pembahasan

1. Seperti biasa Untuk Css anda letakkan di atas kode ]]></b:skin>
2. Untuk JavaScript letakkan diatas kode </head>
3. Selanjutnya HTML bisa anda letakkan didalam template dibawah Header atau bisa juga disimpan dalam widget .

resource: under-88.blogspot.com