WarpConduit Computing

  • Quick Tips
  • Web Design & Development
  • Graphic Design
  • Home
  • WordPress Plugins
  • Password Generator
  • About
  • Contact

Create a Floating Menu with jQuery

October 7, 2009 by Josh Hartman

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>

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

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

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

Filed Under: Web Design & Development Tagged With: jquery, menu

Connect

  • Facebook
  • GitHub
  • RSS
  • Twitter
  • YouTube

Recent Posts

  • Extremely Useful Applications for Web Development and IT Tasks
  • Installing BookStack Wiki on cPanel Shared Hosting
  • Media (MIME) Type Reference List

Tags

automatic base64 benchmark cache counter css deflate email font gzip htaccess html image inarray increment inline images in_array javascript jquery link list magento mailto menu metadot mysql number obfuscation opencart operating system order php random redirect rewriterule slashes software timestamp ubuntu unix upgrade url windows windows 7 wordpress

Blogroll

  • CodeIgniter
  • Fusion Forward
  • jQuery
  • Nettuts+
  • Smashing Magazine

© 2021 WarpConduit Computing. All Rights Reserved.