Tutorial saya yang sebelumnya yaitu membuat jQuery floating dropdown menu kali ini saya akan mempostingkan bagaimana cara membuat jQuery floating menu horizontal. Kalian bisa melihat contohnya disini
Tertarik ingin mencobanya ikuti cara pembuatannya sebagai berikut:
* Seperti biasa login ke blogger terlebih dahulu
* Masuk ke Rancangan dan Edit HTML
* Tekan F3 dan cari kode <head> letakan kode dibawah ini diatas kode <head> atau sebelum kode <head>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js' type='text/javascript'/>
<script src='https://sites.google.com/site/jayablogdemo/floa/jquery.easing.1.3.js' type='text/javascript'/>
* Langkah selanjutnya cari kode ]]></b:skin> dan letakan kode CSS dibawah ini diatas kode ]]></b:skin>
<style type="text/css">
body{margin:0; padding:0;}
#fl_menu{position:absolute; top:50px; left:0px; z-index:9999; font-family:Arial, Helvetica, sans-serif; font-size:12px;}
#fl_menu .label{padding:10px 20px; font-weight:bold; background:#000; color:#fff; letter-spacing:7px; float:left; margin:1px 0 0 1px;}
#fl_menu .menu{float:left;}
#fl_menu .menu .menu_item{display:block; background:#000; color:#bbb; margin:1px 0 0 1px; padding:10px 20px; text-decoration:none; float:left;}
#fl_menu .menu a.menu_item:hover{background:#333; color:#fff;}
</style>
* Kalian bisa ganti kode warna #000 dengan kesukaan kalian
* Dan Langkah selanjutnya cari kode <body> letakan kode dibawah ini diatas kode <body>
<div id='fl_menu'>
<div class='label'>MENU</div>
<div class='menu'>
<a class='menu_item' href='http://shofisanjaya.blogspot.com/'>Beranda</a>
<a class='menu_item' href='http://alamat-url'>Tentang Saya</a>
<a class='menu_item' href='http://alamat-url'>Daftar isi</a>
<a class='menu_item' href='http://alamat-url'>Software</a>
<a class='menu_item' href='http://alamat-url'>Antivirus</a>
<a class='menu_item' href='http://alamat-url'>jQuery</a>
<a class='menu_item' href='http://alamat-url'>CSS3</a>
<a class='menu_item' href='http://alamat-url'>PHP</a>
</div>
</div>
* Ganti http://alamat-url dengan alamat url kalian masing masing
* Dan langkah terakhir Encode kode dibawah ini di situs centricel.com disini
* Caranya cukup mudah copy kode dibawah ini dan Encode di situs tersebut
* Setelah di Encode letakan kode yang di Encode tadi diatas kode <body>
<script>
//config
$float_speed=1500; //milliseconds
$float_easing="easeOutQuint";
$menu_fade_speed=500; //milliseconds
$page_load_fade_delay=2000; //milliseconds
$closed_menu_opacity=0.75;
//cache vars
$fl_menu=$("#fl_menu");
$fl_menu_menu=$("#fl_menu .menu");
$fl_menu_label=$("#fl_menu .label");
$fl_menu_item=$("#fl_menu .menu .menu_item");
$(window).load(function() {
menuPosition=$fl_menu.position().top;
FloatMenu();
$fl_menu_item.delay($page_load_fade_delay).fadeTo($menu_fade_speed, 0, function(){$fl_menu_item.css("display","none");});
$fl_menu.hover(
function(){ //mouse over
$fl_menu_label.stop().fadeTo($menu_fade_speed, 1);
$fl_menu_item.css("display","block").stop().fadeTo($menu_fade_speed, 1);
},
function(){ //mouse out
$fl_menu_label.stop().fadeTo($menu_fade_speed, $closed_menu_opacity, function(){$fl_menu_item.css("display","none");});
$fl_menu_item.stop().fadeTo($menu_fade_speed, 0);
}
);
});
$(window).scroll(function () {
FloatMenu();
});
function FloatMenu(){
var scrollAmount=$(document).scrollTop();
var newPosition=menuPosition+scrollAmount;
if($(window).height()<$fl_menu.height()+$fl_menu_menu.height()){
$fl_menu.css("top",menuPosition);
} else {
$fl_menu.stop().animate({top: newPosition}, $float_speed, $float_easing);
}
}
</script>
* Simpan dan lihat hasilnya
0 komentar:
Posting Komentar