MEMBUAT FLOATING BOX DENGAN JQWERY
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>
