Beranda » Widget » Membuat Floating bar dengan jquery dan CSS

Membuat Floating bar dengan jquery dan CSS

Membuat Floating bar dengan jquery dan CSS

Salah satu teman berkomentar di blog saya menanyakan bagaimana menerapkan sebuah floating bar di blog. Apakah Anda tahu apa floating bar di blog dan bagaimana membuat yang seperti itu? .

Demo

Lihat live demo sebagai Beberapa contoh yang baik lainnya untuk floating bar dapat ditemukan di Meebo dan Wibiya, saya pikir banyak dari Anda yang tahu Wibiya. Dengan floating bar ini, kita bisa.:

Membuat menu navigasi
informasi sosial
pengiklanan
Sorot informasi penting (promo, dll)
informasi kontak
Polling / umpan balik

Berikut adalah langkah-langkah untuk membuat sebuah floating bar

1, Dalam posting ini, saya akan membuat menubar floating, tetapi Anda dapat mengganti kode (dalam huruf tebal) dengan kode iklan, jaringan sosial, informasi kontak atau apapun yang Anda suka.

<div id="navi">
<div id="menu" class="default">
<!--code untuk floating bar awal-->
<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 -->

jika Anda menggunakan Blogger, pergi ke Dashboard -> Design -> Edit HTML, dan menambahkan kode ini tepat setelah <body> dalam template xml.

2, Floating bar ini membutuhkan beberapa CSS untuk menu bar.

Berikut adalah kode CSS:

<style>
#navi {
    height: 50px;
    margin-top: 50px;
}

#menu {
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #426d9c), color-stop(40%, #0f67a1), color-stop(100%, #1384d1));
    background: -moz-linear-gradient(top, #426d9c, #0f67a1, #1384d1);
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    line-height: 50px;
    text-align: center;
    margin: 0 auto;
    padding: 0;
}

#navi ul {
    padding: 0;
}

#navi ul li {
    list-style-type: none;
    display: inline;
    margin-right: 15px;
}

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

#navi ul li a:hover {
    background: #01458e;
    color: #ff0;
    -webkit-transition-property: color, background;
    -webkit-transition-duration: 0.5s, 0.5s;
}

.default {
    width: 850px;
    height: 50px;

    box-shadow: 0 5px 20px #888;
    -webkit-box-shadow: 0 5px 20px #888;
    -moz-box-shadow: 0 5px 20px #888;
}

.fixed {
    position: fixed;
    top: -5px;
    left: 0;
    width: 100%;
    box-shadow: 0 0 40px #222;
    -webkit-box-shadow: 0 0 40px #222;
    -moz-box-shadow: 0 0 40px #222;
}
</style>

jika Anda menggunakan Blogger, tambahkan kode di atas tepat sebelum </ head>. Anda dapat mengedit CSS untuk membuat menubar tampilkan seperti yang Anda inginkan (perubahan warna, font, bayangan, sudut bulat ...)

3, Akhirnya, bagian yang paling penting: Javascript

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

Anda dapat menambahkan kode di atas tepat sebelum </ body>.

Sekarang simpan file template dan Anda akan melihat floating menubar di blog anda

Bagaimana cara kerjanya?

Pada awalnya, jika halaman tidak di gulir, "menu" elemen seperti "default" atau tidak berubah. Ketika kita menggulir halaman,
kode javascript akan: menyembunyikan menu -> menggantikan kelas "default" dengan class "fixed" -> kemudian menampilkan menu yaitu float ini.
Apa yang membuat float menu "default" tetap brada di posisi "fixed", dalam kode CSS, kita mendefinisikan kelas "default" dengan atribut untuk menubar statis dan kelas "fixed" dengan atribut untuk menubar floating.
Jadi ketika kita gulir halaman, kelas "default" akan diganti dengan kelas "fixed", dan ini akan membuat menubar mengapung di atas unsur-unsur lain.

Ketika kita gulir kembali ke atas, kelas "fixed" akan diganti dengan kelas "default", dan menu mengambang menjadi menu statis.
Itu semua untuk sebuah floating bar. Untuk menyesuaikan ini floating bar, hanya perlu beberapa perubahan dalam CSS. Saya berharap ini akan membantu Anda.

Semoga bermanfaat...

Membuat Floating bar dengan jquery dan CSS

Belum ada tanggapan untuk "Membuat Floating bar dengan jquery dan CSS"

Post a Comment