WarpConduit Computing

  • Quick Tips
  • Web Development
  • WordPress Plugins
  • Home
  • Passphrase Generator
  • 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

Floating Menu

  • Menu Item 1
  • Menu Item 2
  • Menu Item 3
  • Menu Item 4
  • Menu Item 5
  • Menu Item 6
  • Menu Item 7
  • Menu Item 8

Javascript


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

Filed Under: Web Development Tagged With: jquery, menu

Connect

  • Facebook
  • GitHub
  • RSS
  • Twitter
  • YouTube

Recent Posts

  • How to Permanently Remove the “Learn about this picture” Spotlight Wallpaper Icon From Your Windows Desktop
  • How to Quickly Test a Fax Machine
  • Extremely Useful Applications for Web Development and IT Tasks

Tags

automatic benchmark bigint class composer css embed escape event font function gzip helper htaccess html htmlspecialchars image increment javascript jquery list magento media mysql number observer opencart order output photo php profiling random redirect rijndael software text type ubuntu url windows windows 7 wordpress xampp xss

Blogroll

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

© 2025 WarpConduit Computing. All Rights Reserved.