Building A Fixed-Position Bottom Menu Bar (ala FaceBook)

Posted October 30, 2009 at 9:10 AM

Tags: Javascript / DHTML, HTML / CSS

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




Learning ColdFusion 9 - ColdFusion 9 tutorials, samples, examples, demos

Reader Comments

Oct 30, 2009 at 9:24 AM // reply »
2 Comments

Dude... IE6 is dead! lol


Oct 30, 2009 at 9:28 AM // reply »
7,572 Comments

@Timothy,

I'm inclined to agree - it was annoying to work with.


Oct 30, 2009 at 10:12 AM // reply »
1 Comments

http://twibbon.com/join/IE6-Must-Die


Oct 30, 2009 at 10:41 AM // reply »
124 Comments

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.


Oct 30, 2009 at 10:52 AM // reply »
7,572 Comments

@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.


Oct 30, 2009 at 1:28 PM // reply »
55 Comments

@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!


Oct 31, 2009 at 11:15 AM // reply »
1 Comments

Thanks for sharing, useful post.


Oct 31, 2009 at 12:32 PM // reply »
7,572 Comments

@Steve,

Looks like a cool service. Looks very much like the FaceBook design - which is nice and clean.


Nov 1, 2009 at 10:00 AM // reply »
1 Comments

Great stuff Ben....but we need to let IE6 go!!!


Nov 1, 2009 at 2:48 PM // reply »
7,572 Comments

@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.


Nov 11, 2009 at 5:46 AM // reply »
2 Comments

It is excellent code,

please suggest me how to create 2 link next to Menu,
so i can use the space properly.


Nov 11, 2009 at 10:32 AM // reply »
1 Comments

Great code dude, thanks for this article.


Nov 11, 2009 at 12:18 PM // reply »
1 Comments

you can give a warning to your visitor

"don't use IE6 hahahha....."


Nov 22, 2009 at 5:00 PM // reply »
2 Comments

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!


Nov 23, 2009 at 7:08 AM // reply »
3 Comments

Thanks Ben, Useful Tutto...!


Nov 23, 2009 at 10:18 AM // reply »
7,572 Comments

@Wilson,

That could be a fun little project. I'll give it some thought.


Nov 25, 2009 at 8:03 PM // reply »
2 Comments

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)


Nov 26, 2009 at 1:39 AM // reply »
1 Comments

Thanks for the article, I will try it...


Nov 26, 2009 at 6:25 AM // reply »
19 Comments

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


Nov 26, 2009 at 9:13 AM // reply »
7,572 Comments

@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.


Nov 27, 2009 at 3:21 PM // reply »
1 Comments

Thank you man! You saved my life!

This the most simple solution that I've found, and works perfectly.

You rock!

Regards!


Dec 4, 2009 at 7:12 AM // reply »
1 Comments

IE is a nightmare....

this snippet is absolutely not working in IE


Jan 10, 2010 at 11:38 AM // reply »
1 Comments

wow..this is great Ben :)

thanks, i've lookin for everywhere ...


Feb 3, 2010 at 7:04 PM // reply »
1 Comments

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


Feb 4, 2010 at 9:50 PM // reply »
7,572 Comments

@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.


Feb 9, 2010 at 9:54 PM // reply »
2 Comments

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


Feb 10, 2010 at 8:18 AM // reply »
7,572 Comments

@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.


Feb 13, 2010 at 6:51 AM // reply »
1 Comments

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.


Feb 16, 2010 at 7:54 PM // reply »
2 Comments

@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


Mar 3, 2010 at 11:19 AM // reply »
1 Comments

Hey man, thanks, very nice, clean and simple.


Mar 20, 2010 at 9:00 AM // reply »
1 Comments

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


Post Comment  |  Ask Ben

Recent Blog Comments
Mar 21, 2010 at 7:40 PM
Is Simulating User-Input Events With jQuery Ever A Good Idea?
A couple of things. One you embed the initial state of of more-info in the CSS. IMHO, that behavior should be in jQuery: moreInfo.hide(); It shows that the behavior your toggling and closing is mor ... read »
Mar 21, 2010 at 3:59 PM
Exploring ColdFusion Component Runtime Class Properties And Serialization
@Elliott, according to Ben's experiment, serializeJSON() doesn't access the private data by default - it doesn't even access the getHair() method - so trying to clone a Girl.cfc via serializeJSON/des ... read »
Mar 21, 2010 at 3:49 PM
Ask Ben: Javascript String Replace Method
I'm confused a bit by what you are asking, but if had this sentence: The color, red, is in the style statement; style: red;. and wanted to remove all or change all of the commas, colons, and semi-c ... read »
Mar 21, 2010 at 3:13 PM
Ask Ben: Javascript String Replace Method
I am trying to make a java program to count the number of times that these punctuation marks occur in a body of text: , : ; . ! - ' " ? / \ I am using this piece to ferret out the commas: numcommas ... read »
Mar 21, 2010 at 11:13 AM
A New Wrist Pain
@chiropractor suwanee, Spoken like someone trying to sell something. Other than for minor, temporary relief from some back pain, chiropractic treatment is nothing but placebo effect and quackery. ... read »
Mar 21, 2010 at 6:32 AM
ColdFusion CFPOP - My First Look
Apologies... The field name in the db for C. is "BounceCode" It stores the code / message which is returned in the email. Sorry for the confusion. ... read »
Mar 21, 2010 at 6:29 AM
ColdFusion CFPOP - My First Look
@Jose Galdamez, Hi Ben and Jose 1st of all.. big thanks to Jose for his Skype chat a few weeks back. Your time was much appreciated. I have come up with a rather unelegant solution to my problem a ... read »
Mar 21, 2010 at 3:42 AM
A New Wrist Pain
Chiropractic treatment is one of the best methods for treating numerous health problems naturally. After years of experience being a chiropractor, I have found that it is a powerful way to solve many ... read »