For all of us who deal with long web pages and need to scroll to the top for the menu, here's a nice alternative: floating menus that move as you scroll a page. This is done using HTML, CSS and jQuery, and it's fully W3C-compliant.
Demo and Source
You can see a demo of this tutorial by clicking on the "Demo" button above. For the source download, please note that the jQuery library, Dimensions plugin, and Eric Meyer's Reset code are not in the ZIP file.
What We're Building
This tutorial covers how to create a "floating menu" using HTML, CSS, and jQuery. To reiterate, a floating menu stays visible even if you scroll down a web page. They're animated, so they move up and down as you scroll the browser window up or down. I am going to show you how to make a floating menu using jQuery and CSS, and hopefully make some new jQuery disciples :D.
Before we continue to the coding steps, have a look at the two screen snaps below. The first shows a web page with a floating menu at top right. Of course, you can't tell it's floating until you see it live and actually scroll the page. So look at the second snapshot, and you can see that the menu has moved.
Step 1
Let's start with the HTML markup for a nice menu consisting of three sub-menus:
<div id="floatMenu">
<ul>
<li><a href="#" onclick="return false;"> Home </a></li>
</ul>
<ul>
<li><a href="#" onclick="return false;"> Table of content </a></li>
<li><a href="#" onclick="return false;"> Exam </a></li>
<li><a href="#" onclick="return false;"> Wiki </a></li>
</ul>
<ul>
<li><a href="#" onclick="return false;"> Technical support </a></li>
</ul>
</div>
This is the basic markup we will use. The main part in this bit of HTML is the <div id="floatMenu">...</div> in Line 01, which encapsulates the whole menu. The three lists are only used to demonstrate structure, which can be modified to suit your needs. In this case, there are three sections to the menu, as represented by three unordered HTML lists.
As a matter of habit, I disable the click on dummy links (href="#"). Just to be sure that a click on a dummy link doesn't send the page back to the top, there is also an onclick="return false;" in <a href>. This method allows to add menu item features such as lightboxing - something that requires the page to stay at its current vertical position when the user clicks on a menu link.
Step 2
Now we need some CSS rules to skin and position the menu. (I used Eric A. Meyer's CSS Reset, so that's why there is no margin:0 or padding:0 on the ul element):
body {
background-color:#000;
height:2000px;
color:#ccc;
font:10px "Lucida Grande", "Lucida Sans", "Trebuchet MS", verdana, sans-serif;
}
#floatMenu {
position:absolute;
top:150px;
left:50%;
margin-left:235px;
width:200px;
}
#floatMenu ul {
margin-bottom:20px;
}
#floatMenu ul li a {
display:block;
border:1px solid #999;
background-color:#222;
border-left:6px solid #999;
text-decoration:none;
color:#ccc;
padding:5px 5px 5px 25px;
}
The body height (Line 03, above) has been set only to get enough room for our menu to scroll up and down with the page. This should be removed in a real case scenario. The two other things to take note of are the position:absolute (Line 08) and the left:50% (Line 10), both in the #floatMenu CSS rule (Line 07), above.
The "position" attribute is used when you need to remove an element from the flow of the document and keep it at a precise place in your page. If you use the text zoom function of your browser, an element with absolute positioning will not move, even if the text around it increases in size.
The "left" attribute is used to position the specific div element horizontally. The value needs to be defined as a percentage in the case that we want a centered design. With a 50% value, the left side of the container is positioned in the middle of the page. To position it left or right we need to use the "margin-left" attribute (Line 11), with a negative value for an offset to the left and a positive one for an offset to the right.
The others elements in the above stylesheet rules customize the visual design.
Step 3
Now we have a menu of three sections positioned in the upper right hand side of the page. To enhance the menu item roll-over effect, let's add style classes menu1, menu2 and menu 3 to each menu section, respectively (to each <ul> element). We will have 3 distinct sub-menus using our 3 <ul> tags. The code below is a modification of the HTML code shown in Step 1 above:
<div id="floatMenu">
<ul class="menu1">
...
</ul>
<ul class="menu2">
...
</ul>
<ul class="menu3">
...
</ul>
</div>
Now let's define some CSS hover-based roll-over effects, which will be different for each menu section.
#floatMenu ul.menu1 li a:hover {
border-color:#09f;
}
#floatMenu ul.menu2 li a:hover {
border-color:#9f0;
}
#floatMenu ul.menu3 li a:hover {
border-color:#f09;
}
Now each menu section will display a different color when the mouse hovers over a menu item. If you like, you can also add rules for other menu link states using :link, :visited, :hover and :active pseudo classes. The order in which you should write them can be easily memorized like this: LoVe and HAte, where the capitalized letters represents the first letter of each state.
Step 4
We've got a nice looking menu and could stop here, but we do want that floating menu, so it's time to add some jQuery. You'll need to download the jQuery library and the Dimensions plugin. This plugin will be used to grab information about the browser's window (width, height, scroll, etc.). You can link to both bits of jQuery code from your HTML file in the <head>...</head> section. Just remember to change the URL path according to where on your server you place the jQuery library and plugin files.
<script language="javascript" src="jquery.js"></script>
<script language="javascript" src="jquery.dimensions.js"></script>
We'll need some custom jQuery code as well, so start a new <script> section, also within the <head>...</head> section of your HTML document:
<script language="javascript">
...
</script>
Add the following jQuery code inside the the <script> section:
$(document).ready(function(){
// code will go here
});
The $(document).ready() function is similar to the window.onLoad but improved. With the window.onLoad function, the browser has to wait until the whole page (DOM and display) is loaded. With the $(document).ready() function, the browser only waits until the DOM is loaded, which means jQuery can start manipulating elements sooner.
Step 5
We need a listener for the "scroll page" window event. Our custom jQuery script now looks like this:
$(document).ready(function(){
$(window).scroll(function () {
// code will go here
});
});
A listener is an event handler waiting on standby for a particular window event to happen - in this a page scroll up or down.
Step 6
Since our menu will "float" as the page is scrolled, we need to track its initial position. Instead of hard-coding that into the jQuery, we'll read it's position using the Dimensions jQuery plugin, then use the retrieved value. We will do the same with the name of our menu. Let's add two variable definitions (Lines 01, 02) so that our code now looks like this:
var name = "#floatMenu";
var menuYloc = null;
$(document).ready(function(){
menuYloc = parseInt($(name).css("top").substring(0,$(name).css("top").indexOf("px")))
$(window).scroll(function () {
// code will go here
});
});
Lines 01 and 02 define variables "name" and "menuYloc". Line 05 sets the value of "menuYloc". The "name" variable will be used to reference our floating menu. The "menuYloc" variable will contain the original vertical position of our menu.
Let's look at how the value of menuYloc is set in Line 05. This statement is an example of jQuery's powerful function-chaining. First we read the "top" attribute value from the CSS rules of our menu element (which is "150px", set in Step 2). Then we strip off the "px" string at the end, since we only need the "150" part. To do this, the jQuery function call .css("top") first finds the value of the top attribute for the menu. (This attribute was set in Line 09 of the code in Step 2, above.) That results in retrieving the value "150px". Then the .indexOf() function finds where the "px" in "150px" starts, and the .substring() function ensures we save everything before the "px". The .parseInt() function turns the string "150" into an numeric integer value.
Step 7
We now arrived at the fun part of this tutorial: animating the menu to make it "float". To do this, we need to determine how far the page has scrolled in pixel dimension. We have the original menu location stored in variable "menuYloc". We need the offset of the scroll bar, which we can get from the command $(document).scrollTop(), defined in the Dimensions jQuery plugin. After grabbing the offset we can add the animate command. Lines 07 and 08, below, show the new code:
var name = "#floatMenu";
var menuYloc = null;
$(document).ready(function(){
menuYloc = parseInt($(name).css("top").substring(0,$(name).css("top").indexOf("px")))
$(window).scroll(function () {
var offset = menuYloc+$(document).scrollTop()+"px";
$(name).animate({top:offset},{duration:500,queue:false});
});
});
The variable "offset", in Line 07 above, contains the difference between the original location of the menu (menuYloc) and the scroll value ($(document).scrollTop()), in pixel measurement. To make it work as a CSS rule, we add the necessary measurement unit, "px", after the numeric value. Now we can apply the vertical offset, as calculated, to position the menu and thus making it move.
To make it all look nicer, let's make use of jQuery's animation options. We've stored the menu name in the variable "name" and can recall it when needed, to use it along with the .animate() function. The animate function requires two parameters: (1) the style properties, and the (2) animation options. In this tutorial, we just need to animate the "top" CSS property, but to specify additional parameters, separate each property:value pair with a comma (,).
We're using two parameters here. The "duration" is the length of the animation in milliseconds, and the "queue" is a list of all positions we want our object to be animated to. Since we only want to animate our object to its final location (the browser's current scroll location), we set "queue" to false.
We should now have a functioning floating menu.
Related Posts
Check out some more great tutorials and articles that you might like
Plus Members
Source Files, Bonus Tutorials and
More for $9 a month for all TUTS+
sites in one subscription.
User Comments
( ADD YOURS )Joefrey Mahusay June 26th
Nice floating Menu. Keep up the great work
( )Alexis Garduño June 26th
So Beautiful:)
( )Riko K June 26th
After you scroll up to the top, the floating menu didn’t return to its original positional….
( )Erik June 26th
Good job! A perfect example as of why jQuery makes writing Javascript so much more fun
One small remark might be that it doesn’t work well in Firefox 3. As soon as you scroll the page the menu jumps to the top of the viewport, disregarding the offset. Other than that, it’s great!
( )Raanan Avidor June 26th
Very very nice. Two problems. One: If the menu is too long (or the browse window height is too short) you will not be able to scroll down to the bottom of the menu. Two: In the RSS feed of this article when you click on the link to the demo you get a blank page.
( )Keith Donegan June 26th
Very Nice indeed. Great Job Jeff!
( )QuenBee June 26th
403 when trying to view the amazonaws.com URL at the bottom
( )Skellie June 26th
Hey Raj,
I would suggest putting the live demo link near the top of the post so people can see whether they like the effect or not before reading through the tutorial.
Congrats on getting your first tut up
.
( )Bruce Alrighty June 26th
This great. I have been thinking about putting something like on my next site.
Why no download link?
( )Aloke Pillai June 26th
Awesome! Thanks a lot for this.
( )Raj Dash June 26th
Skellie: Collis is producing some nice “demo” buttons that we’ll be putting at the top and bottom of all tutorials.
Bruce Almighty: I don’t know. A complete oversight on my part. I’ll get that fixed tomorrow. Apologies to all.
Everyone else: I tested Jeff’s code on multiple new browsers (except FF 3) and it worked fine. So did the demo link (must have been an Amazon problem). Older browsers don’t support jQuery cleanly.
( )Matthew Egan June 26th
I love nettuts, but I wish not every other tutorial was a tutorial on how to make a jQuery menu. Don’t take me wrong, the tutorials on these topics are pretty slick, but I wouldn’t mind seeing a couple more Css and HTML and Site Builds (Which are the coolest thing on the planet btw…). And what about server side things, like, PHP, database and the such, maybe some more wordpress thingies.
Ok. I really think I’m complaining to much. Please don’t hate me Collis.
Matt.
( )Viz June 26th
Good tutorial I like the outcome
hey do you think you guys could do some Mootools tutorials too?
http://mootools.net/
its a bit like jquery so I’m told
( )Rijalul Fikri June 26th
Another nice effect to try
( )Andrei Constantin June 26th
Never been a fan of floating menus and/or long long pages however this tutorial is great to have an idea. With a bit fine-tuning it will rock
However, as far as I see, mootols is forgotten in favor of jquery
( )Daniel June 26th
nice tutorial! sharp and clean.
( )keep up the good work and thanks a lot!
ysamjo June 26th
With jQuery 1.2.6 there’s no need to link the Dimensions plugin.
( )Thomas Milburn June 26th
Another great tutorial but I’m afraid I’m not really a fan of animated menus. They distract users from the real content and are really annoying when they overlap other content. Javascript and JQuery isn’t needed in situations like this.
All you need to do is set a div with the css ‘position:fixed;’ You can then have a fixed menu at the top, side or bottom of the page even for browsers with no Javascript.
( )Adrian July 10th
Even for IE?
( )john September 11th
how would you do that. cause i cant get it working
( )Ben Griffiths June 27th
Nice tutorial, and the effect is nice and smooth too.
( )vlado June 27th
by the way – nothing has moved on my browser… Safari and I tried FF as well
( )Shane June 27th
Nice floating menu with a good explanation, but it obscures some of the content in that example, which a little bit poor usability-wise.
That’s a small point really though – something to be aware of when doing floating menus such as this.
( )Tom June 27th
Nice tutorial. I don’t like so much the final effect, but it’s a personal opinion.
( )D. Carreira June 27th
Nice tutorial! I want more and more NetTuts tutorials!
David Carreira
( )David Hellmann June 27th
Good Tutorial but a bug when you scroll back to top the menü ist not in the start position.
( )Danny June 27th
that’s pretty cool i like it
( )Sorel @ DailyWP.com June 27th
Nice Tutorial, but when you are coming back on the top of the page the menu is not coming back into the normal position.
( )Amarjeet Rai June 27th
Bug with Firefox 3 please fix.
It doesn’t stick back to the original position.
Come on this should have been tested first.
( )Stephen Orr June 27th
2 problems:
1. In the first listing, you’re missing the closing quote on the onclick attribute of each link.
( )2. In the latest versions of jQuery, the Dimensions plugin has been integrated into the core
Raj Dash June 27th
Amarjeet: How would that be possible, considering this tutorial was written before FF3? We can’t go back and test every tutorial for every new browser.
Stephen: Thanks Re missing quote: Fixed.
Stephen, ysamjo: Thanks. Re the Dimensions plugin: noted. Not sure how I, as Editor, can avoid such things, so it’s appreciated when a reader lets us know about updated libraries and plugins.
For those of you saying “it doesn’t work for me,” it’d really help if you said which browser AND version. As I said in the comments above, I tested Jeff’s code for multiple new browsers (except FF3) and it worked fine. jQuery does not support some older browsers. Some simply render slightly incorrectly in terms of spacing or positioning.
Matthew: Noted, but I’m at the mercy of what’s been submitted, ain’t I?
jQuery is relevant right now, whereas database topics have to be within the frame of reference of popular CMSes. E.g., a tutorial on some sort of database manipulations for WordPress might appear, but a database tutorial not related to WP or another CMS/ blog platform likely will not.
( )John Deszell June 27th
Cool effect, but I don’t think it’s very practical. I can’t think of a site that I could actually work it into its just to me a “flashy type effect.” I think it distracts from the site in general.
( )Alex Fraiser June 27th
I usually think these menus are annoying, but it always adds some life to the site that uses it. Thanks for the article.
( )Nate June 27th
Could be useful for some upcoming projects. Thanks guys
( )Umut June 27th
Very nice tutorial.
I also have a similar tutorial which float the menus and banners in a smarter way:
http://www.webresourcesdepot.com/smart-floating-banners/
In this example menus are static but they float when needed and become fixed when needed again.
( )Brad Blogging.com - Daily Blog Tips For The Masses June 27th
Whats that font you use in the graphics?
( )Joseph Rodgers June 27th
As a new designer, this website has helped me understand some of the basics involved for web development.
Does anyone have any insight on the Alltop banner? I love it’s transparency and the home button.
Any resources would be helpful.
Thanks,
( )Joseph
MD June 27th
Good tut!
( )ty June 27th
I just don’t care for that type of floating menu, maybe it’s just me, but they annoy me pretty much always.
( )Nice tutorial though.
Thomas June 27th
Wouldn’t it be cleaner to put the “return false” for the links in the JS rather than placing it in an “onclick” on the A element?
I agree with many others that this particular example is not a practical one or a good choice for a menu the tut itself is nice so thanks.
( )Junkie234 June 27th
How about when you want this menu to stop scrolling down at a certain point? Mine keeps going into the footer. Any suggestions?
( )Ivan June 27th
Nice job! You should consider updating the example to not use dimensions since its now in the core.
( )Lamin Barrow June 27th
Very nice effect. Thanks very much.
( )tripdragon June 27th
Ugh. Don’t teach people how to make these. These are gross. Just used fixed so it never moves and always stays in view.
( )This is like watching a slug move on the screen.
Taylor Satula June 27th
Doesnt work in firefox 3
( )Raj Dash June 27th
Don’t forget that NETTUTS tutorials are not just about the final effect but the coding techniques displayed. Whether or not you actually like floating menus or would ever use them, this tutorial demonstrates several jQuery techniques including animating elements. So the point is to absorb that and adapt the techniques to your own use.
( )James June 28th
I have been interested in doing this for quite a while but have never bothered to look it up… Thanks for the tut!
@Thomas Milburn – Yes you could just use position:fixed; but what would you do to accommodate IE6 users??
btw Cannot believe people are still using inline JS!!! Hello! – What happened to unobtrusive beauty!??
( )Eric June 28th
Very nice tutorial. It doesn’t matter that it doesn’t work right in firefox 3 beta 5 cause most people don’t have it. Maybe wait till they release it before you start complaining!
( )Thomas Milburn June 29th
@James
Position:fixed can be made to work in IE6 using a few hacks. See this example on CSSplay http://www.cssplay.co.uk/layouts/fixed.html
And you’re completely right about not using inline JavaScript. Same goes for inline CSS. Put it in an external file.
BTW Has anyone noticed the rather strange formatting of the CSS code on the demo page? Have a look, it’s quite a good method!
( )kristarella June 29th
I find the effect itself a little distracting, maybe annoying for use on a website, but definitely a fun exercise. Look forward to getting into jQuery.
Couple of questions: If you wanted such a menu without the jumpy-javascript effect would the menu work by making the position fixed and giving it a large z-index value?
( )The Dude June 30th
hmmm, I don’t think I would ever use it… it just seems “unprofessional”? or am I just old school?
( )Braden Keith June 30th
SUHHHWEEEETTTT!
This is beautiful. Thank you.
( )Braden Keith June 30th
@The Dude
( )Yeah you’re old school. Lol. But no, with some color changes you could make this work in a professional setting.
Taylor Satula June 30th
Wow like the link to cssplay. When I saw this i thought “Wow somebody is not good at css” thanks for saying about the css thing. JS free too.!
( )Taylor Satula June 30th
Ok well not bad but not a css wizard. That came out wrong
( )Jonas July 7th
OK – I am designing my portfolio site (I work mainly in print). Is it possible to use this “menu” as a thumbnail gallery.
So, when the image is clicked it would scroll the whole page vertically?
( )Khaotic July 18th
wow very nice i will definitely use this =]
( )somi July 23rd
easy code , but nice float menu ~~
( )jo July 30th
will it work with FF3??? at the moment version FF 3.0.1 no!!!!!
( )thx
jo July 30th
why does it work for your page???
( )Xavier August 7th
Hi,
Very helpful and straightforward, thank you so much.
I just do not understand why you use indexOf() on line 05, since parseInt() will get rid of “px” anyway, unless I am missing something. I implemented your solution without indexOf() and works like a charm!
( )Windows Themes September 5th
nice one but needs improvement. Thanks
( )web hosting September 7th
I downloaded the script, but it is not working.
It seems that it is just me who have this problem. I tried with IE7 and firefox 3.0.1
( )egypt web design October 23rd
wow nice menu
( )Cliff October 27th
One thing about this setup though is that it works well in a fixed-width layout where you can position the menu absolutely regardless of how wide the user’s browser window is.
However, with a fluid-width layout (or sometimes called “liquid-width”), the left:50% code is probably going to be inadequate.
The menu then “floats” to a percentage value meaning that the menu is not fixed to the right side of the window and drifts away toward the left as the window is resized wider.
This makes it hard to set a menu inside of a right sidebar column in a fluid-width layout.
( )Evolve November 5th
This guy cracks the problem with no jQuery and the simplist of CSS code. Works with FF3, ie6, mozilla, opera etc etc..
His site here: http://www.cssplay.co.uk/layouts/fixed.html
Basically this is the code:
Make a div for the floating section in html.
This is my floaty text, it floats YAY!
Replace this code with your floating links, text, images code
In your CSS add the following:
body{
height:100%;
overflow-y:auto;
}
#menu {display:block; top:10px; left:170px; width:130px; position:fixed; border:1px solid #888; padding:10px; }
* html #menu {position:absolute;}
add this as a ie6 hack in your HTML header tag.
/**/
IT WORKS! NO HASSLES. SURE IT COULD BE ENHANCED BUT HEY ITS SIMPLE.
( )Eric Davis November 24th
Thanks, this worked great. I didn’t use it as a menu but as a counter to keep track of how many rows a user has selected (e.g. You have selected 12 of 134 items).
( )MissANN November 24th
wow!!!! this is what i’ve been looking for!!! thnk u very much for this tutorial… ^___^
( )–ann
Scott December 2nd
If you don’t want to have to position the menu element with CSS to start with (ie absolute top (top:20px;)) then you can change this line
( )menuYloc = parseInt($(name).css(”top”).substring(0,$(name).css(”top”).indexOf(”px”)))
to
menuYloc = parseInt($(name).offset().top);
It’s the jquery way.
Works for me in IE6, Firefox 2, Opera 9.27
prsanth December 9th
very nice! its easy to use and understand!!
Thank you!
( )elusive January 8th
“How about when you want this menu to stop scrolling down at a certain point? Mine keeps going into the footer. Any suggestions?”
I am having the same issues when viewed in different resolutions. Can this be done?
( )John January 16th
Totally Tubular Dude
( )Mario Di Vece January 16th
Nice tutorial! In mootools 1.2, you’de do exactly the same except for step 7 which would be:
( )window.addEvent(’domready’, function(event) {
window.addEvent(’scroll’, function(ev) {
var offset = $(document).getScrollTop();
$(’testBasket’).tween(’top’, offset + ‘px’);
});
});
Adam January 26th
thanks Mario…. I have movement with Mootools!!
but… can u help me out. The moment the page starts scrolling the div jumps to the ‘top’ of the wrapper div container rather than the ‘top’ absolute positioning of the specified div.
( )Widodo February 3rd
Thanks for your tutorial. I need it.. I will use on my on my wordpress themes.
( )alex February 4th
Doesn’t work with safari ?
( )alex February 4th
sorry for the comment above, just checked it and it works, but i was messing with the source.
( )shpoffo February 5th
You need to properly define your DTD for Firefox 3+ to correctly compute .scrollTop() Safari will then break, in all cases I found. Use:
function getScroll () {
if ( window.pageYOffset > $(”html,body”).scrollTop() ) {
return window.pageYOffset;
} else {
return $(”html,body”).scrollTop() ;
}
}
also search my username and scrollTop to find other forum discussion.
( )suresh February 21st
Gud floating Menu, i found one mis alignment in the menu. when the user minimize the browser window, then menu is aligned properly, according to window size, the menu should position the same . can u tell me how to achieve this one ?
( )suresh February 21st
Gud floating Menu, i found one mis alignment in the menu. when the user minimize the browser window, then menu is not aligned properly, according to window size, the menu should position the same . can u tell me how to achieve this one ?
( )Lio February 27th
Hello,
( )Thank you for this tutorial. I followed it and it works. I have a problem though, and I don’t know if you could help me. I have a rather long menu and its top position is 320px. So you cannot fully see it on a 1024/768 screen resolution. When you start scrolling, one can never see the lower part of the menu. It keeps staying at 320px from top. Can it be made to have a higher top position after starting scrolling, so that the menu might be seen in it’s entirety?
Thank you for your help.
Jon July 5th
I have the same problem as Lio and have tried, but failed, to come up with a solution. Has anyone got any suggestions? Thanks!
( )Ted March 8th
How can I stop scrolling when the floatMenu is > the div#footer?
( )saumitra March 21st
great post
( )Glenn March 24th
Look at apple’s summary block on this page: http://store.apple.com/us/configure/MB881LL/A?mco=MzE2NjMyOA
It slides within it contraints without the tweening of position. How? Can jquery do this?
( )Mr.adny April 11th
very nice.
( )lili April 15th
could this menu also float left and right for a horizontally scrolling page? have tried as it is but it doesn’t float L/R.
( )CgBaran Tuts May 1st
Great tutorial thanks
( )Melissa May 5th
What a great tutorial! You have explained everything very well, even to someone like me who is brand new to CSS and knows nothing about Java. Thank you so much.
( )Ben June 12th
Helpful tutorial.
Pretty useful for shopping carts you want to scroll with you down the page, but don’t want to use position:fixed in case a use expands their browser window.
I guess Apple uses something like this for their shopping basket?
( )Ejaz ahmad June 15th
Hi
i checked this code on all of browsers… in mozilla its not working fine .. menu having space from in IE but not in mozzilla . except this script is very nice
( )iklan baris June 28th
Nice floating Menu. Keep up the great work
( )iklan baris June 30th
This is beautiful. Thank you.
( )stop dreaming start action June 30th
This is beautiful. Thank you.
( )Carmela Pelaez July 1st
Doesn’t work on FF 3.5
( )It did work on FF 3.1.
Tony core July 8th
CSS position:fixed does the same
( )Amir August 6th
Very nice.
I’ve also wrote a post about the floating mechanism that explain how to build a jquery plug-in.
http://www.amirharel.com/2009/08/05/implementing-floating-div/
you can see the demo here:
http://bit.ly/bB2D
Amir
( )sofia August 7th
thank you for sharing
( )intan September 4th
Great tutorial thanks
( )Joe October 11th
Sweet !
( )jmarreros October 14th
I’m not a fan of flotating menus, but perhaps it’s a good solution for some kind of client.
Thanks for the tutorial.
( )Neurotoxine October 15th
What’s the problem with you guys?
(Those that keep posting position fixed do the same)
IN YOUR DREAMS.
Position fixed just puts the div in there to be nailed to that place on the page, but if you have used many divs, many positions, many hacks and chrome + safari, you’ll notice this system just works when css failed. And it does with style.
Thanks for the tutorial.
( )mas adi October 16th
thank’s for share…
( )Halfling Rogue November 9th
What if you want to have it a fixed position from the bottom of the window? Just replacing the “top”s with “bottom”s definitely doesn’t do it.
( )Aivar November 11th
Nice one mate! Really good explanations on the jQuery. Will give it a try in a bit
( )Tharadas November 15th
that’s fantastic work.it really explains each and every corner of the code…..thank you…..
( )