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

Comments

  1. Al says

    January 5, 2010 at 3:23 AM

    Hey, thanks for the simple script. How can I calculate an offset for the bottom so I can accommodate a footer? Thanks.

    • Josh Hartman says

      January 5, 2010 at 11:29 AM

      You’re welcome Al, thanks for the comment!

      You can change the code to create a fixed-width centered horizontal floating menu 100px from the bottom of the page by updating these CSS sections:

      #floatMenu {
      	position:absolute;
      	bottom:100px;
      	left:50%;
      	width:600px;
      	background-color:#FFF;
      	margin:0 0 0 -300px;
      	padding:0;
      	font-size:11px;
      	border-left:1px solid #ddd;
      	border-right:1px solid #ddd;
      }
      

      and

      #floatMenu ul li {
      	padding-left:10px;
      	background-color:#f5f5f5;
      	border-bottom:1px solid #ddd;
      	border-top:1px solid #ddd;
      	display:inline-block;
      }
      

      I also noticed that the background does not show when you position using bottom css property, to counteract this i added a line to the moveFloatmenu() javascript function:

      	function moveFloatMenu() {
      		var topOffset = menuYloc.top + $(this).scrollTop() + 'px';
      		$('#floatMenu').css({'height' : $('#floatMenu').height() + 'px'}); \\ add this new line
      		$('#floatMenu').animate({top:topOffset},{duration:500,queue:false});
      	}
      

      Does this answer your question? If not please be more specific in your reply, thanks!

  2. Al says

    January 5, 2010 at 8:52 PM

    Josh,

    Thanks for the quick reply. That doesn’t quite do it for me. While the bottom:100px works, it pushes the entire div upwards 100px. I have to fit the menu within a space on my right bar.

    I’m trying to figure out how to add a bottom offset…

  3. Al says

    January 5, 2010 at 9:37 PM

    Josh,

    Found another script that worked for me.

    http://plugins.jquery.com/project/stickyfloat

    Thanks for all your help, appreciate it!

    • Josh Hartman says

      January 6, 2010 at 9:17 AM

      Glad you found something that works, thanks for the link to that script, looks very useful.

  4. Markus Steiger says

    June 29, 2010 at 5:36 PM

    Thanks for this small script.

  5. Tom says

    December 5, 2010 at 5:36 AM

    having a bit of trouble with getting this into WordPress.
    http://www.warpconduit.net/2009/10/07/create-a-floating-menu-with-jquery/

    i’m putting the menu at the bottom of the footer template, just above

    the javascript in the header template just above

    not that sure about the css, so I assumed that went in the stylesheet, at the bottom?

    Anyway, it doesn’t work.
    Any advice?

  6. Josh Hartman says

    December 5, 2010 at 8:15 PM

    @Tom:
    This is the raw HTML, JS and CSS needed for the floating menu and will need to be adapted for WordPress. You first need to make sure you are loading jQuery, usually by using wp_enqueue_script('jquery'); in your functions.php file and then change all the $’s in the JS code to jQuery because WordPress’s jQuery runs in “No Conflict” mode.

    Example:
    $(window).scroll(moveFloatMenu); becomes jQuery(window).scroll(moveFloatMenu);

    You are correct in placing the CSS, or you can place it in a separate file and link the stylesheet to your page. The HTML can go anywhere on the page. The CSS positions the menu div and the JS will keep it there.

  7. Melissa says

    February 4, 2011 at 11:18 PM

    Thanks for the jquery fix for the background oddity when wanting to work from the bottom. It worked great for me!

  8. online surveys for money says

    May 5, 2011 at 3:21 AM

    I really love to read articles that have good information and ideas to share to each reader. I hope to read more from you guys and continue that good work that is really inspiring to us.

  9. monstertech666 says

    February 20, 2012 at 1:52 AM

    it really good post. i have used it.

  10. Alexandre Vazzolla says

    June 21, 2012 at 10:26 PM

    it has not worked for me ;

    • Josh Hartman says

      June 24, 2012 at 2:32 PM

      Please provide more information if you wish to receive help.

  11. mark says

    July 1, 2012 at 2:03 PM

    The floating script works great. I’m wondering how I could change it so that instead of floating it stays fixed while the rest of the page moves freely when scrolled?

    • Josh Hartman says

      July 2, 2012 at 8:50 PM

      First remove all jQuery, then update the CSS to that the menu is position: fixed. View it on JSFiddle

      • mark says

        July 17, 2012 at 12:00 PM

        It works great, thank you very much. This is a real learning experience for me. One other question. I would like to be able to mouse over the menu items and have a separate menu drop down to the right. How would I do that?

        • Josh Hartman says

          July 17, 2012 at 12:19 PM

          You’re welcome. Take a look at using Superfish for creating drop-down menus.

          • mark says

            July 17, 2012 at 12:57 PM

            One last thing Josh. How can I create two fixed menus, one on the left and one on the right?

        • mark says

          July 20, 2012 at 4:56 PM

          I figured it out on my own. It was easy. Thanks again for all of your help.

  12. Paul Lukasiewicz says

    July 1, 2012 at 9:58 PM

    I have had success with using this menu. One question though: as my site spans several pages, is there a way to make the menu a separate file and reference it in the tags on the pages I want it used so that when I need to edit the menu I only have to edit one page, instead of editing the menu on each page individually? Thanks!

    • Josh Hartman says

      July 2, 2012 at 8:36 PM

      You would accomplish that using a server-side language and the use of server-side includes. For example, if you were to use PHP the menu content could be located in nav.php and then on each page you would replace the menu content with:

      This would allow you to make changes to only nav.php and see the change across all pages using the include.
      Find out what server-side languages are available to you and then do some research to see how you can accomplish server-side includes.

Trackbacks

  1. Richard Choi » Blog Archive » Excellent Floating Menu with jQuery says:
    April 26, 2011 at 10:27 PM

    […] http://www.warpconduit.net/2009/10/07/create-a-floating-menu-with-jquery/ […]

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.