Building A Fixed-Position Bottom Menu Bar (ala FaceBook)
Now that I've explored two ways of creating fixed-position elements across browsers - using IE6 expressions and absolute layouts - I wanted to give a go at creating a fixed-position bottom menu bar, ala FaceBook. The menu bar isn't going to contain much of anything - just a single button and a pop-up menu; mostly, I wanted to see how easily I could use relative positioning once I was able to attach the menu bar to the bottom of the screen.
Even once I was able to get IE6 to put the menu bar at the bottom, using absolute positioning, it was still a real pain to get IE6 to work like the other browsers. Even with the absolute positioning, it was off by a pixel here and a pixel there. Also, the bottom-relative positioning of the pop-up menu seemed to work differently in IE6 than in any of my other browsers; as such, I had to move the "position: relative" CSS property up the parent chain to an element that had no top-padding. Only at that point did all browsers agree on what the bottom positioning meant.
<!DOCTYPE HTML>
<html>
<head>
<title>Using CSS Fixed Position Across Browsers</title>
<style type="text/css">
html,
body {
margin: 0px 0px 0px 0px ;
padding: 0px 0px 0px 0px ;
}
#site-body-container {}
#site-body-content {
padding: 15px 15px 15px 15px ;
}
#site-bottom-bar {
background-color: #F0F0F0 ;
border-top: 1px solid #CCCCCC ;
bottom: 0px ;
font-family: verdana, arial ;
font-size: 11px ;
height: 30px ;
position: fixed ;
width: 100% ;
z-index: 1000 ;
}
#site-bottom-bar-frame {
height: 30px ;
margin: 0px 10px 0px 10px ;
position: relative ;
}
#site-bottom-bar-content {
padding: 3px 0px 0px 0px ;
}
#menu-root {
background-color: #E8E8E8 ;
border: 1px solid #D0D0D0 ;
color: #000000 ;
display: block ;
height: 22px ;
line-height: 22px ;
text-align: center ;
text-decoration: none ;
width: 105px ;
}
#menu-root:hover {
background-color: #666666 ;
border-color: #000000 ;
color: #FFFFFF ;
}
#menu {
background-color: #E8E8E8 ;
border: 1px solid #666666 ;
bottom: 32px ;
display: none ;
left: 0px ;
padding: 5px 5px 1px 5px ;
position: absolute ;
width: 200px ;
}
#menu a {
background-color: #E8E8E8 ;
border: 1px solid #FFFFFF ;
color: #000000 ;
display: block ;
margin-bottom: 4px ;
padding: 5px 0px 5px 5px ;
text-decoration: none ;
}
#menu a:hover {
background-color: #666666 ;
border-color: #000000 ;
color: #FFFFFF ;
}
/* -------------------------------------------------- */
/* -- IE 6 FIXED POSITION HACK ---------------------- */
/* -------------------------------------------------- */
html,
body,
#site-body-container {
_height: 100% ;
_overflow: hidden ;
_width: 100% ;
}
#site-body-container {
_overflow-y: scroll ;
_overflow-x: hidden ;
_position: relative ;
}
/* To make up for scroll-bar. */
#site-bottom-bar {
_bottom: -1px ;
_position: absolute ;
_right: 16px ;
}
/* To make up for overflow left. */
#site-bottom-bar-frame {
_margin-left: 26px ;
}
/* To fix IE6 display bugs. */
#menu a {
_display: inline-block ;
_width: 99% ;
}
</style>
<script type="text/javascript" src="jquery-1.3.2.js"></script>
<script type="text/javascript">
jQuery(function( $ ){
var menuRoot = $( "#menu-root" );
var menu = $( "#menu" );
// Hook up menu root click event.
menuRoot
.attr( "href", "javascript:void( 0 )" )
.click(
function(){
// Toggle the menu display.
menu.toggle();
// Blur the link to remove focus.
menuRoot.blur();
// Cancel event (and its bubbling).
return( false );
}
)
;
// Hook up a click handler on the document so that
// we can hide the menu if it is not the target of
// the mouse click.
$( document ).click(
function( event ){
// Check to see if this came from the menu.
if (
menu.is( ":visible" ) &&
!$( event.target ).closest( "#menu" ).size()
){
// The click came outside the menu, so
// close the menu.
menu.hide();
}
}
);
});
</script>
</head>
<body>
<div id="site-bottom-bar" class="fixed-position">
<div id="site-bottom-bar-frame">
<div id="site-bottom-bar-content">
<a id="menu-root" href="##">Toggle Menu</a>
<div id="menu">
<a href="##">Here is a menu item</a>
<a href="##">Here is a menu item</a>
<a href="##">Here is a menu item</a>
<a href="##">Here is a menu item</a>
<a href="##">Here is a menu item</a>
<a href="##">Here is a menu item</a>
</div>
</div>
</div>
</div>
<!-- ------- -->
<!-- ------- -->
<div id="site-body-container">
<div id="site-body-content">
<cfloop
index="i"
from="1"
to="20"
step="1">
<p>
Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Aliquam dictum enim in mauris
luctus convallis. Aliquam erat volutpat.
Suspendisse potenti. Duis blandit, urna vitae
feugiat porttitor, risus est ornare metus, at
dignissim urna velit id enim. Donec lectus nisi,
consectetur eget sollicitudin id, bibendum
laoreet velit.
<p>
</cfloop>
</div>
</div>
</body>
</html>
All in all, getting this to work in IE6 was just a pain. I can easily see why a site would choose not to have this bottom bar for non-modern browsers. Especially for features that are not mission critical, it would be much easier to only insert the bar "position: fixed" is available.
Want to use code from this post? Check out the license.
Reader Comments
Dude... IE6 is dead! lol
@Timothy,
I'm inclined to agree - it was annoying to work with.
http://twibbon.com/join/IE6-Must-Die
I've been meaning to point this out for a long time, but the your object/embed code for embedding your videos is a bit messed up. You have different dimensions between the object & embed tags:
object element: width="256" height="246"
embed element: width="546" height="544"
Since I use FeedDemon as my RSS reader (which unforutnately uses IE for rendering) the video's are too small at 256x246 to be really useful. If it's something I end up watching, I've got to go to Firefox to view it.
If you just fixed the object element's dimensions, all would be good.
@Dan,
Ahh, thanks for pointing that out. The HTML for the embed gets auto-generated from the JING FTP process; I must have messed something up in the template that it is using.
@Ben,
Thanks for sharing this. I was actually just checking out CometChat (http://www.cometchat.com/?ref=sw) which also has the Facebook-ish toolbar at the bottom of the browser but geared more for the chat functionality. I was digging through their demo's css, etc. for ideas and then eventually happened across your post.
Anyway, thanks!
Thanks for sharing, useful post.
@Steve,
Looks like a cool service. Looks very much like the FaceBook design - which is nice and clean.
Great stuff Ben....but we need to let IE6 go!!!
@David,
I think I even tried opening up FaceBook in IE6 and if I recall correctly, they don't use the bottom bar.... I could be making that up, though.
It is excellent code,
please suggest me how to create 2 link next to Menu,
so i can use the space properly.
Great code dude, thanks for this article.
you can give a warning to your visitor
"don't use IE6 hahahha....."
Ben, this is a great post and I've learnt a lot from it. I currently use CometChat, which Steve mentioned, but they have encrypted and confusicated their code to the point where I can't add anything to it. I wish there were a way to integrate it into the menu-bar method you explain here.
What would be really useful is if you gave a tutorial on the instant-message bit so we could integrate it ourselves.
Not only that, but it would be very timely. Just think about all of the web sites out there that use the static bar at the bottom with IM capability - there seem to be no open-source versions of that for all the other web sites that want one. I would imagine such a resource is in high-demand right now.
I'd do it myself, but I know a lot more about PHP than I do javascript/ajax :/
Anyway, thanks for reading, and thanks for your post!
Thanks Ben, Useful Tutto...!
@Wilson,
That could be a fun little project. I'll give it some thought.
Glad to hear it Ben.
I have another question. I'm trying to add a second button, but it's not as straightforward as I thought it would be. Will I have to replicate the CSS blocks (menu-root, menu, etc. as menu2-root, menu2, etc.)? Or is there a more efficient way?
(Note, the problem is when I add another <a> and <div> for the second button, it just doesn't show up)
Thanks for the article, I will try it...
I freaking hate IE6.
If someone has IE6 installed they are redirected to IE6 security risk page and are giving the chance to download Firefox or Chrome. I'm so sick of bending over backwards so they can use a extremely outdated browser. Granted I only use this on sites that break with IE6 but I do give a pop-up telling them to upgrade.
BTW --- Thanks for the post ben
@Wilson,
Once you are inside of the menu bar, you *should* be able to just think about things as being relative position to each other; but I haven't tried yet. I will hopefully have something to post up in the not-so-distant future.
Thank you man! You saved my life!
This the most simple solution that I've found, and works perfectly.
You rock!
Regards!
IE is a nightmare....
this snippet is absolutely not working in IE
wow..this is great Ben :)
thanks, i've lookin for everywhere ...
How would you go about adding sub menus to the main list of menus?
Also, let's say I wanted to put this at the top instead of the bottom. I mean I do like the bottom, and realize you went through a lot of trouble to get tit there. Just wondering how to put it at the top.
Thanks,
Tyler
@Tyler,
If you want to put the menu at the top, isn't that just a standard menu bar? If you just want a standard menu bar, there's probably a ton of different plugins that will help you build that, though I don't know one right off hand.
How would you go about adding sub menus to the main menu list? If I was able to do this, then I would use it as a bottom menubar.
Thanks in advance,
Tyler
@Tyer,
Once you have the menu positioned, you should be able to sub-menus the same way you would with a menu that is located at the top of a page; that's the beauty of the positioning - the sub-elements are relative and don't care where the parent is actually located.
I've opened up the snippet in Dreamweaver, but found that when I preview in Internet explorer, the menu won't scroll up, although the button highlights. Also, when I try to insert a swf file to replace the lorem ipsum it won't load up the swf properly. I'm only new to building sites, so I'm sure there must be something obvious I'm missing here.
It seems like the best solution I've found to setting up a decent bottom menu & I'm really keen to try & make it work as it would make a monumental difference to how my site's working at the moment.
@Ben,
I've tried to add the sub menus, but not knowing entirely how to I am stuck with the following:
http://tylerpanesar.ca/test/test.html
The submenus are always visible rather than only when you activate the menu that they belong too.
How do I go about doing this correctly?
Thanks in advance,
Tyler
Hey man, thanks, very nice, clean and simple.
I would like to say thx for an easy way to create a bottom bar.
I do have a ?.
Is it possible to center the bar if i want to resize it to ex 85%.
Regards
Offenbach
@Frits,
You should be able to give the menu bar a width of 85% and give the left/right margin "auto". This should center it on the bottom of the screen.
If you support IE6, this might get a bit complicated since you are overlapping with the scroll bar, which requires margin itself. In that case, you'd probably need to have a menu bar "container" that accounts for the scrollbar margin; then, inside that, put your actual menu bar rendering that can have left/right auto margins.
If you don't need to support IE6, this is much easier!
I still cannot find a way to add more items to the bar itself. Can you give some more detail on doing this. I have added code pieces everywhere trying to get more menu items to show, but have had NO luck... Not sure why, but it is not being too friendly. Thank you in advance, and thanks for the code itself! awesome job!
@Kevin,
I'll try to find some time to flesh out a more robust example.
Thx for the tip Ben.
@Ben,
Thank you for this code. It's incredibly professional. Like Kevin, I await a way to add more than one element that will open up a menu.
Hey Ben,
I've tried using your menubar in another project of mine and everything seems to be working except one tiny problem.
The site:
tylerpanesar.ca
uses it's main content window as an iframe, and when you click the menu bar open, click any where that is iframe (which i have tried to make 100% wide and high because i want it to fill the entire page when it shows other sites i have doen with my menu bar still accessible. Except the height goes really weird when i use percentages) the menu stays open. there is only the margin area around the iframe or just below, because it does not completely fill the height, that will make the menu close. Rather frustrating for most users as the smaller screens can't see what is behind the menu.
Still didn't figure out how to do the sub menus that pop out to the side, but did manage the different buttons with the dots to do the trick for now. However when I have to many items that sub menu will come in very handy.
Thanks,
Tyler
@Tyler,
An iFrame is tricky because it is a completely different document. If you click into an iFrame, the click event does not register in the parent document.
What you might be able to do is leverage the "blur" event on the main window. I am pretty sure that when you click into the iFrame, the parent window loses "focus" and triggers the "blur" event.
I used this technique in a Google AdSense tracking blog post:
www.bennadel.com/blog/1752-Tracking-Google-AdSense-Clicks-With-jQuery-And-ColdFusion.htm
When the user blurs the parent window, you could use that event to trigger a close of the menu.
Is there a way for the menu to hide on a mouse out rather then a click in the parent document?
I was looking at the blur thing but it is way over my head and I don't know how to implement it.
If you could take a look at my source code that would be amazing.
Thanks again for all your help,
Tyler
@Tyler,
Are you using jQuery? If you're using jQuery, then you can use the "mouseleave" event to capture when the mouse hovers out of the menu area. For some more info on mouseenter / mouseleave, take a look here:
www.bennadel.com/blog/1805-jQuery-Events-MouseOver-MouseOut-vs-MouseEnter-MouseLeave.htm
@Ben, AWESOME.
Every since I incorporated your menu into my website Mid-January, I have struggled to accomplish this task.
I've posted on many forums, tried to set up call functions on the child document within an iFrame to have it hide the menu when the document was clicked. With no success.
Most recently I've been trying to see if there was a way to have it so that I could use "if statements" to achieve this.
Basically check to see if I moused out of the menu.
If I did, then check if I moused over a menu button.
If I didn't, hide menu.
Finally, this latest advice works perfectly. Thanks for everything.
Now that that HARD part is out of the way, I still haven't figured out how to get the "Sub Menus" to work.
As you can see on my site, my sub menus appear as bulleted lists right now.
I'm obviously doing something wrong, but for the time it does work. I will be adding a lot more content and more links that have sub items so this single column is going to fill up fast.
How do I do this correctly?
@Tyler,
Glad we're getting closer :) I haven't tried a sub-menu demo yet. I'll try to get some time to put something along those lines together.
Hi, this is, good but i can only make one menu bar? like i cant make more than 1 buttons please help
Hey!! I fixed it!!! I found out how to make it more than 1 buttons!!!!
Please feel free to share it with us, David.
Is there anything wrong with simply using this?
<div style="background-color: #000000;
height: 80px;
text-align: center;
font-size:10px;
color:#CC0000;
font-family:Verdana;
padding-top: 10px;
width: 100%;
position:fixed; left:0px; bottom:0px; "
>
Thank you for this. It's the best toolbar solution I've come across. I'm trying to center it and add a logo on the left and subscribe to email link on the right but I'm at a loss. Looks like David has it all figured out, but I guess he won't share.
I am very sorry everyone, I have been very busy especially because I launched a few websites.
Since i feel bad, I am making a custom bottom menu bar.
But i will need help to test in different verisons, such as IE6, 5, 4, 7 etc
Hello,
Thanks David for being a good sport.
Thank you Ben for the beginning / inspiration of an awesome toolbar.
I have built out a custom toolbar at: http://skincarenova.com/ for a wordpress site, but should work on any site. The email subscription form is linked to a constant contact account.
Let me know if your interested in me posting the code.
It wasn't easy but it works. Tested in Safari, FF and IE 7. works great!
I've never given back before, so I'm ready to pay my dues.
@Drew,
Looks pretty slick!!
@Ben,
Have you had any time to flesh out how to add additional buttons to the bar? I've had the same problems as Kevin and Wilson. When I do what I think should do in order to add a second button, it just doesn't show up.
Great script. Works nicely. Question however, is it expandable? can we add more than one popup? or button?
This is excellent, I'd really like to know how to add more buttons to the bar. I figured out how to add more to the bar, but the other ones wouldn't pop up like the first one.
I can send you a script where you would have to replace the buttons yourself. Or know how to replace images and enough CSS / html to figure out what goes where.
Email me and I will send.
@Drew,
I'm sorry, but is there somewhere where I should be able to find your email address? I can't seem to find anything.
Drew the custom toolbar for http://skincarenova.com/ is realy great i`m using a wordpress website too coult you send me the code at valentin@nht.ro ?
Hi Drew - your bottom bar looks great, but have you tested it in IE6? Something really wrong there. I assume you're not catering for IE6 but you might want to redirect users to another page - have a look at it in IE6 and you'll see what i mean.
@Ben - I have been playing around with this code the whole day and have managed to get it to work almost perfectly in all browsers, including IE6. I think this bar works great as a standalone bar on a page, without much other markup on the page. But once you combine it with lots of other html you'll see the little niggles start showing up.
Like I said - have it working perfectly throughout my site except for areas that use jquery tabs. Their controls exhibit weird behavior when you scroll which is definitely linked to the static bar at the bottom. Something with the jquery code and yours that don't play well together, but I'm getting to the bottom of it slowly :) If I find the culprit I'll let you know.
Have you thought of putting a demo page up of your little examples, like this one?
Cheers - keep up the good work
@Paolo,
I haven't actually done that much more with this kind of stuff. Honestly, if I were to implement it, I would probably leave the IE6 browser out of it, implementing the "fixed" position bar for modern browsers. Of course, if you take that approach, you have to make sure that functionality in the bottom-bar is *not* mission critical.
how could i add simple links on the bar? i have tried soooo many different ways but with no joy =o(
You remind me of Dwayne "The Rock" Johnson :)
@LAW,
Can you Smeeellllll what the Ben is cooking :)
This example works ugly under iphone, everything under the body is not available for viewing.
Nice code, Ben. Is there a way to make a button to turn the bar on/off? Rather like the menu bar on the Politico.com home page.
@Alexey,
Yeah, the iPhone doesn't have the same sense of "fixed" position since it doesn't have a true client window - it has a "view port". This adds all kinds of complexity.
@Peter,
I recently wrote something as a demo for someone who wanted a "sometimes there" footer:
www.bennadel.com/blog/2025-Using-SetTimeout-To-Delay-The-Closing-Of-A-Related-UI-Element-Based-On-User-Interactions.htm
That might help you.
Hi,
I am looking for a simply sticky element which will stick to the left side of the screen other than the bottom. Like some sites will have twitter or facebook to the left or to the right.
Can you please drop me links for such references. A very simple one is enough. I will show a bar of tools when the user click that icon. Like in Visual studio. Thank you.
@Jayapal,
Possibly some CSS like shown below would work for you.
#theme-box {
-moz-border-radius:0 5px 5px 0;
background:url("your_image") repeat scroll 0 0 transparent;
font-family:arial;
font-size:12px;
left:0;
padding:10px 10px 0;
position:absolute;
text-align:left;
top:20px;
width:105px;
z-index:9999;
}
@Paolo,
Hey all. I did look at the toolbar in IE6. GRRR... (Fist in the air at Microsoft) when can we all just upgrade. I see it repeats itself.
I don't have a fix for IE6. IE7 and up / Firefox / Safari - works great.
@All,
In case you missed it:
http://jqueryui.com/demos/position/
Positioning is such a generic problem, it was only a matter of time before there would be a generic jQuery UI solution. One of the options is positioning relative to the window.
As far as I can tell, you don't need to adopt the whole nine yards of jQuery UI just to use the position widget.
Brilliant!! Thanks Ben, great work - a problem that had me foxed for months.
Got rid of sub menus since I didnt need them so that got rid of the javascripting also. Made some nice tabs and a great bottom shadow effect.
http://www.d-sine.com/DEV/DWG/index.php
May move link soon, but will repost and mods if requested.
dude, Big thanks for your post! i've created a facebook-like chat using your menu. Thanks a lot! You may check it out here:
http://bostsip.blogspot.com/2011/01/facebook-llike-chat-part-2.html
@Ryan,
sorry typo in the link:
http://bostsip.blogspot.com/2011/01/facebook-like-chat-part-2.html
Hi Ben,
Im trying to insert 3 more blocks (different menus) to the right but i cant. Would you help me with the code? because i really tried for hours... =(
Thanks.
Ben,
How to put it on the top instead of the bottom ?
I found this to be extremely helpful...more importantly with backwards compatibility to IE6 which unfortunately I have a necessity for. The only issue I have is that while it works great in it's current setup, if you add another div to the layout, the scroll bar goes past the window of course only in ie6, since the rest seem to auto-adjust. As i show below, instead of having all content besides the footer scrollable, instead we try to have a seperate fixed header outside of the body-container, the scroll bar goes beyond the window. I've narrowed down the issue to the ie6 fix css making the container height 100%.
The problem it appears is that the site-body-container tries to be 100% of the page, not 100% of the remaining space after the fixed header div, therefore the scroll bar goes below the window about the same size as the header pushes it down. I actually proved this by separating it out and making the container only 70%. However, the footer and header are fixed pixels...so I don't want to leave the main scrollable body at 70% since 70% of a small 800x600 window would be a different pixels than a larger 1024x768 and therefore create gaps between the header > body > footer. Any thoughts/ideas? Again this is only an issue with IE6 of course, as the rest of them naturally compensate based on the "relative" layout.
Ben,
Awesome script. Is there a way to position it at the top vs. the bottom?
Did anybody find a way to add extra menu buttons, I'm struggling to do this myself. Thanks.
Very Good! This solved my problem ...
this is really cool stuff..the video is also a nice way of explaining ....thank you for sharing
thanks.....and Very Good!
Great job.... i believe you have done a FANTASTIC job!
Hey Ben
Thanks from India.
You know what? I was hunting for a similar tutorial.
And, you make it look so simple.
You are simply superb.
It makes me feel comfortable when the tutor provides all the codes in one place finally.
This way I can copy->paste->dive-> and Learn.
I will look forward to reading more tutorials from you.
Thanks again and best wishes to you.
It helped me!
hundred of thanks to you BEN! :)
Here's a warning about using fixed top or bottom menu bars that hasn't been mentioned.
Browsers don't factor fixed bars into the page height for page up and page down, meaning you'll have anything from a tiny overlap to completely skipped lines when a user pages down, depending on the height of the bar.
Text search is also broken when the browser scrolls display highlighted text at either the top or bottom of the screen, and the bar obscures it.
As far as I can tell, there's no way to tell a browser to factor a fixed bar into height calculations for scrolling behavior like they do for HTML frames.
Speaking of HTML frames, if frames are widely regarded as amateurish retro 90s design, I don't see how using CSS for the same effect is any better. At least HTML frames don't break page navigation.
Is there any way to make the sedebar navigation static so that sidebar never reloads with each page.
Hello,
This is awsm.
it's look like vista panel
This tutorial was very helpfull to me . thanx for share dude !
Is there a way to make more than one button?
its working fine. thanks a lot.