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 | Permalink | 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....."
