Building A Fixed-Position Bottom Menu Bar (ala FaceBook)
Posted October 30, 2009 at 9:10 AM
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.
Launch code in new window » Download code as text file »
- <!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.
Download Code Snippet ZIP File
Post Comment | Ask Ben | Other Searches | Print Page
Newer Post
Learning ColdFusion 9: Iterating Over Pseudo XML Node Wrappers With CFLoop
Older Post
Using PushStack() In jQuery Plugins To Create New Collections
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
