Stay On Top Menu With CSS3 and jQuery

Sebuah menu navigasi horizontal bisa kita modifikasi sedemikian rupa sampai tercipta sesuatu yang lain dari tampilan standardnya. Sebuah efek yang terkesan melayang dan berada pada posisi atas halaman seakan diam tanpa kata ketika mouse melakukan aksi scroll down. Begitu juga halnya ketika mouse scroll up dari posisi bawah , hingga pada titik tertentu dia kembali pada posisi awal di mana dia ditempatkan. Lebay dot com.

Stay On Top Menu With CSS3 and jQuery

Ketika kita berhasil memoles menu ini dengan bermodal pemahaman kita mengenai kode CSS3, jangan heran jika Anda melihat sebuah menu navigasi horizontal terpampang tampan di halaman blog Anda. Alay beud...

OK langsung ke pokok permasalahan. Beberapa saat yang lalu saya mengunjungi sebuah website luar mencoba mencari inspirsi sebagai bahan tulisan di blog baru ini. Alhasil saya menemukan dua hal yang menjadi inspirasi saya. Dan saya pun ingin cepat-cepat mempublikasikannya di blog ini. Sebuah menu navigasi horizontal dengan efek fixed yang diberi nama Stay-On-Top Menu with CSS3 and jQuery dan juga CSS3 Dropdown Menu. Namun pada postingan ini saya akan membahas hal yang pertama: Cara Menginstall Stay-On-Top Menu with CSS3 and jQuery. Lihat Demo.

Membuat Template Cadangan

Masuk ke Blogger.com » Template » Cadangkan/Pulihkan » Unduh Template Lengkap. Kenapa ini harus dilakukan? Sederhana saja, sebagai langkah antisipasi jika nanti terjadi kesalahan dalam penempatan kode dan ujung-ujungnya tampilan template porak-poranda. Jika itu benar terjadi, bersyukurlah karena Anda masih mempunyai template cadangan.

Menyisipkan Kode HTML

Dari halaman template sekarang masuk ke Edit HTML. Sekarang tanya pada diri sendiri: di mana widget ini harus ditempatkan? Di bawah header-kah? atau di atas main-wrapper? Semua terserah kepada Anda. Di sini saya hanya berbagi trik tidak lebih dari itu. He..he..

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

Menambahkan Kode CSS

Jika langkah menyisipkan kode HTML telah selesai dan Anda 100% yakin akan hal itu sekarang saatnya menambahkan kode CSS pada template Anda. Temukan kode ]]></b:skin>, kemudian salin kode berikut dan letakkan di atas kode ]]></b:skin>

body {
    background: #efefef;
    margin: 0;
    padding: 0;
    border: none;
    text-align: center;
    font: normal 13px Verdana, sans-serif;
    color: #222;
}
p{margin:10px auto;padding:10px;background:#fff;border:1px solid #ccc;}
#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;
}

Menyisipkan Kode JavaScript

Sekarang kita akan menyisipkan kode JavaScript pada template. Tapi sebelumnya saya ingin menekankan bahwa widget ini memakai kode jQuery, jadi jika di dalam template Anda sudah terinstall jQuery maka Anda tidak perlu menambahkannya lagi, pada kasus ini Anda cukup menambahkan potongan kode pemanggilnya saja.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
//<![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>

Baris kode yang dihighlight adalah kode jQuery, Anda tidak perlu menyertakannya jika template blog Anda saat ini sudah menginstall kode ini.

Simpan Pengaturan Template

Simpan pengaturan template Anda dan previes hasilnya. Semoga bermanfaat.

sumber kode: 1stwebdesigner.com

Tweet

Postingan terkait:

Ditulis EM — Monday 6 May 2013 — Add Comment — Blogger Hacks, jQuery, Navigation Menu