Membuat Floating bar dengan jquery dan CSS

Home Widget Membuat Floating bar dengan jquery dan CSS

Membuat Floating bar dengan jquery dan CSS

Diposting oleh: Dafin defandaky pada: 3 Juli 2013

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

2 komentar

coba17 Desember 2013 pukul 02.23
kalau di wordpress gmna bikinnya?
BalasHapus
Balasan

Tambahkan komentar

Link aktif dalam komentar akan terhapus secara otomatis.
Untuk menyisipkan kode, gunakan tag <i rel="code">...KODE ANDA DI SINI...</i>
Untuk menyisipkan script, gunakan <i rel="pre">...KODE SCRIPT ANDA...</i>
Untuk menyisipkan gambar, gunakan tag <i rel="image">...URL GAMBAR ANDA ...</i>
Untuk menyisipkan judul, gunakan tag <b rel="h3">...JUDUL ANDA...</b>
Untuk menyisipkan catatan, gunakan tag <b rel="quote">...CATATAN ANDA...</b>
Untuk menciptakan efek tebal gunakan tag <b>...TEKS ANDA...</b>
Untuk menciptakan efek huruf miring gunakan tag <i>...TEKS ANDA...</i>

Konversi KodeOOT

Konversi Emo Oot

$:\$

$\o/$

Jika anda memiliki bahasan atau topik lain yang sama sekali tidak ada hubungan dengan tutorial diatas anda bisa menyampaikannya di halaman OOt. klik [link ini] untuk membuka halaman OOT.