Hmm... kali ini saya akan mempostingkan atau bagaimana cara membuat jQuery floating dropdown menu mungkin beberapa diantara kalian ada yang tau floating menu atau menu melayang kalian bisa melihat contohnya langsung di blog demo jaya tkj disini
Floating menu kali ini ada dua versi yaitu floating dropdown menu dan floating menu horizontal. Dan 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:0px; padding:0px;}
#fl_menu{position:absolute; top:50px; left:0px; z-index:9999; width:150px; height:50px;}
#fl_menu .label{padding-left:20px; line-height:50px; font-family:"Arial Black", Arial, Helvetica, sans-serif; font-size:14px; font-weight:bold; background:#000; color:#fff; letter-spacing:7px;}
#fl_menu .menu{display:none;}
#fl_menu .menu .menu_item{display:block; background:#000; color:#bbb; border-top:1px solid #333; padding:10px 20px; font-family:Arial, Helvetica, sans-serif; font-size:12px; text-decoration:none;}
#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/'>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>
<a class='menu_item' href='http://alamat-url'>Visual Basic</a>
<a class='menu_item' href='http://alamat-url'>HTML</a>
<a class='menu_item' href='http://alamat-url'>HTML5</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
$closed_menu_opacity=0.75;
//cache vars
$fl_menu=$("#fl_menu");
$fl_menu_menu=$("#fl_menu .menu");
$fl_menu_label=$("#fl_menu .label");
$(window).load(function() {
menuPosition=$('#fl_menu').position().top;
FloatMenu();
$fl_menu.hover(
function(){ //mouse over
$fl_menu_label.fadeTo($menu_fade_speed, 1);
$fl_menu_menu.fadeIn($menu_fade_speed);
},
function(){ //mouse out
$fl_menu_label.fadeTo($menu_fade_speed, $closed_menu_opacity);
$fl_menu_menu.fadeOut($menu_fade_speed);
}
);
});
$(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