WarpConduit Computing

Create a Floating Menu with jQuery

by

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

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

Comments

  1. Al says

    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

      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

    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…

  6. Josh Hartman says

    @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

    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

    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.

  11. mark says

    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?

  12. Paul Lukasiewicz says

    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

      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