Membuat Floating Menu Dengan Jquery

Pada Tips dan Trik kali ini kita akan mencoba Membuat Floating Menu Dengan Jquery. Tips ini dapat membuat menu navigasi mengambang mengikuti scroll jika digerakan. Kita akan menggunakan css dan jquery untuk membuatnya. Ikuti langkah-langkah berikut.

HTML
Langkah pertama kita akan mulai dengan membuat struktur HTML-nya. Berikut kurang lebih kerangka HTML nya.

<div id="fl_menu">
	<div class="label">MENU</div>
	<div class="menu">
    	<a href="#" class="menu_item">Home</a>
        <a href="#" class="menu_item">News</a>
        <a href="#" class="menu_item">Programming</a>
        <a href="#" class="menu_item">Android</a>
        <a href="#" class="menu_item">Laravel</a>
        <a href="#" class="menu_item">Tips Trik</a>
        <a href="#" class="menu_item">Profile</a>
        <a href="#" class="menu_item">Sitemap</a>
    </div>
</div>

CSS
Masukan kode css kedalam tag head, berikut kodenya.

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;}
.content{width:820px; margin:50px auto;}

Jangan lupa untuk memasukan library dan plugins jquery kedalam tag head.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript" src="jquery.easing.1.3.js"></script>

jQuery
Langkah terakhir tambahkan script jquery pada baris terakhir sebelum tag body.

<script>
//config
$float_speed=1500; //milliseconds
$float_easing="easeOutQuint";
$menu_fade_speed=500; //milliseconds
$closed_menu_opacity=0.75;

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

Anda dapat melakukan atau merubah beberapa konfigurasi untuk floating menu di bawah //config.

Sekian Tips dan Trik kali ini, semoga bermanfaat.
Berikut link demo dan source code lengkapnya yang bisa di download.
DEMO | DOWNLOAD CODE

You may also like...

Leave a Reply

Your email address will not be published. Required fields are marked *