On websites we deal with long web pages and we need a scroll button to move up and down of the page and see all the content. It is very easy if we create a jQuery Floating Menu Bar. jQuery floating menu bar is an easy way to see all the content of the page without scrolling. This task is done by HTML, CSS and jQuery. This popular effect ensures that you never have to scroll back to the top of a page to navigate; the menu is always floating there, waiting to be used.

Demo


You May Also Like:


Here we learn how to create jQuery floating menu bar by using jQuery technology.

Creating Our Own jQuery Floating Menu Bar

 The HTML

Step 1

we code start with the HTML markup for a menu consisting of three sub-menus:

 

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

 

Step 2

Now we need some CSS rules to skin and position the menu.

#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;
}

 

 

Step 3

Now its time to add some jQuery magic in your menu bar.

 

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


About The Author

Related Posts