WarpConduit Computing

Create a Floating Menu with jQuery

by

Here is the code you can use to create a floating jQuery menu that stays where you absolutely position it on the screen. Make sure you have jQuery loaded on whatever page you use this. Try it out yourself, check it out on JSFiddle.

HTML

<div id="floatMenu">
<h3>Floating Menu</h3>
<ul>
	<li><a onclick="return false;" href="#">Menu Item 1</a></li>
	<li><a onclick="return false;" href="#">Menu Item 2</a></li>
	<li><a onclick="return false;" href="#">Menu Item 3</a></li>
	<li><a onclick="return false;" href="#">Menu Item 4</a></li>
	<li><a onclick="return false;" href="#">Menu Item 5</a></li>
	<li><a onclick="return false;" href="#">Menu Item 6</a></li>
	<li><a onclick="return false;" href="#">Menu Item 7</a></li>
	<li><a onclick="return false;" href="#">Menu Item 8</a></li>
</ul>
</div>

Javascript

<script language="javascript" type="text/javascript">
<!--//
$(function(){
	function moveFloatMenu() {
		var menuOffset = menuYloc.top + $(this).scrollTop() + "px";
		$('#floatMenu').animate({top:menuOffset},{duration:500,queue:false});
	}
 
	menuYloc = $('#floatMenu').offset();
 
	$(window).scroll(moveFloatMenu);
 
	moveFloatMenu();
});
//-->
</script>

CSS

#floatMenu {
	position:absolute;
	top:30%;
	left:10px;
	width:135px;
	background-color:#FFF;
	margin:0;
	padding:0;
	font-size:11px;
	border-left:1px solid #ddd;
	border-right:1px solid #ddd;
}
 
#floatMenu h3 {
	color:white;
	font-weight:bold;
	padding:3px;
	margin:0;
	background-color:#006;
	border-bottom:1px solid #ddd;
	border-top:1px solid #ddd;
	font-size:13px;
	text-align:center;
}
 
#floatMenu ul {
	margin:0;
	padding:0;
	list-style:none;
}
 
#floatMenu ul li {
	padding-left:10px;
	background-color:#f5f5f5;
	border-bottom:1px solid #ddd;
	border-top:1px solid #ddd;
}
 
#floatMenu ul li a {
	text-decoration:none;
}