WarpConduit Computing

  • Quick Tips
  • Web Design & 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 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 benchmark cbc cipher class comparisons cpanel credit memo css decrypt encrypt font gzip htaccess html image increment javascript jquery list magento mcrypt mysql number old opencart order php profiling random redirect repository rijndael shipment software strict ubuntu url wincachegrind windows windows 7 wordpress xampp xdebug xss

Blogroll

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

© 2023 WarpConduit Computing. All Rights Reserved.