Selamat datang di Dunia Tutorial :D Tidak banyak yang akan temukan ditempat ini, Mungkin hanya ide-ide dan pemikiran kecil ditengah keterbatasan kami. Tetapi bagi kami, keterbatasan bukanlah suatu alasan untuk berhenti saling berbagi.

Float Menu HTML menggunakan Jquery dan CSS3 di Blog

2 comments

BlogThis! | Email This! | Print This! | 2 comments
Do you like this post?
Hai sobat blogger tutorial semua, sambil kerja aku berbagi sesuatu. ^_^ hehe kayak THR aja. Kali ini Blogger Tutorial akan menjelaskan tips dan trik singkat bagaimana membuat menu dengan Jquery dan CSS3, namun fungsi menu tersebut saat pengunjung menggeser (scroll) kebawah halaman, maka menu utama di blog sobat Tutorial akan muncul bayangan menu, so pasti keren lah!!
Lihat demonya disini

Keren, tertarik ikuti langkah dibawah ini.

  • Login ke Dashboard blog - Rancangan - Edit html
  • Beri centang "Expand widget template"
  • Cari kode ]]></b:skin> dan ganti dengan kode dibawah ini
#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;
}


  • Cari kode </head> copy kode dibawah ini sebelum atau sesudah kode </head> 
<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>


  • Terakhir adalah membuat menu blog sobat, ubah nama menu dibawah ini sesuai menu blog sobat, dan copy kode dibawah ini setelah kode <body> 
<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="#">About</a></li>            
        </ul>
    </div><!-- close menu -->
</div><!-- close navi -->

  • Selesai dan simpan, share dan komen anda sangat berarti bagi Blogger Tutorial
SELAMAT MENCOBA!!


Artikel Terkait

Posted in: ,,,

2 komentar:

UnlimitSoft mengatakan... Balas

hehehe oke kang.. :)

4 November 2012 pukul 10.25
cici mengatakan... Balas

Yuk Merapat Best Betting Online Hanya Di AREATOTO
Dalam 1 Userid Dapat Bermain Semua Permainan
Yang Ada :
TARUHAN BOLA - LIVE CASINO - SABUNG AYAM - TOGEL ONLINE ( Tanpa Batas Invest )
Sekedar Nonton Bola ,
Jika Tidak Pasang Taruhan , Mana Seru , Pasangkan Taruhan Anda Di areatoto
Minimal Deposit Rp 20.000 Dan Withdraw Rp.50.000
Proses Deposit Dan Withdraw ( EXPRES ) Super Cepat
Anda Akan Di Layani Dengan Customer Service Yang Ramah
Website Online 24Jam/Setiap Hariny

12 Oktober 2020 pukul 21.24

Beri Komentar