Float Menu Bar & Content

*Update: I tested it in IE5.5/Win and it was really messed up. I’ll revisit this when I find out what’s wrong, but at the moment it works in modern browsers.*

h3. Introduction

I’ve been trying to come up with a different way of showing a sidebar for so long. In my old box theme, I tried to have a “sidebar” that is positioned on top of everything. It didn’t really look that great, plus it wasn’t really useful because it was way on top. Another technique that have been used before is a “sliding” sidebar or top bar. This kind of bar is great that it hides when not needed. The problem with it is that it requires javascript for the sliding out. Now I’m not against using javascript, but I want to try out a more simple approach first.

After reading some things about drop-down lists, and fixed attributes in CSS, I came up with the idea of a floating menu bar. It’s been done before, and although, I’ve never seen one with a drop-down list also, I’m sure that’s not new either. However, that’s what I wanted to try out.

Secondly, as I mentioned in previous posts, I am redesigning. On top of my redesign wishlist, is a better background. With that is the wish that the content will “float” over it kind of like glass over the background. Again I used the fixed attribute for this.

Now if you want to skip to the good stuff, here is my demo of the floating menu bar.

h3. Creating the sidebar

Before I start describing the techniques I used to create the CSS for the float, we must first make a structure for the menu. As with any sidebar we must have a number of things including: search, tags, dates, and rss feeds. More can be added but it will have a similar structure.




Just some HTML you’ve all seen before.

h3. On to floating

Now that we got the skeleton down, we can go into CSS to make it pretty with a float. Now the float part I referenced the w3.org CSS tips & tricks. Now to make the float here is the trick:


div#sidebar {
  position:fixed;
  top:0;
  font:small;}

This is all you have to do to float anything. The important attribute to notice here is the ‘position: fixed‘ which “fixes” the block you are floating in relation to the browser. So as you scroll, it will stay “fixed” in the same place on the browser window.

h3. Dropping the menu

I referenced the A List Apart horizontal drop-down menu and the Suckerfish drop-down menu.

Now even with the menu floating in midair, it still looks too much like HTML to be called a true menu. Plus we want to separate the headings of each part of the menu from the content it’s associated with. Here’s how you do it:


div.sideblock {
  padding:5px;
  position:relative;
  float:left;
  width:10em;}

This bit of code makes the menu horizontal with the contents under each heading. Looking better than previously but we need more. Adding to the two codes we have so far we get this:


div#sidebar {
  border-right:1px solid #ccc;
  position:fixed;
  top:0;
  font:small;}

div.sideblock {
  border:1px solid #ccc;
  border-width:1px 0 1px 1px;
  padding:5px;
  position:relative;
  float:left;
  width:10em;
  color:#777;
  background:#235c9d url('nav-bg-blue.gif') repeat-x top left;
  text-decoration:none;
  cursor:pointer;}

We put some colors into it, use a background gradient, and put a border around the menu. We still need to hide the content, however. So we do the following. Hide the bullets in our lists, and use the background color from before:


div.sideblock ul {
  border:1px solid #ccc;
  list-style:none;
  background:#235c9d;}
div.sideblock form input {
  border:1px solid #000;}

You may also notice I added a border to the form in another block, that’s because I wanted to add the border to the search form separately. We must now hide the content:


div.sideblock ul, div.sideblock form {
  display:none;
  position:absolute;
  top:1em;
  left:0;
  width:10em;}

This positions the content absolutely, because apparently IE does it incorrectly if you don’t add the top and left attribute. So to change it back for other browsers we do this:


div.sideblock > ul, div.sideblock > form {
  top:auto;
  left:auto;}

Now here is the fun part. We will make it drop-down:


div.sideblock:hover ul, div.sideblock:hover form {
  display:block;}

h3. Oh woe is IE

Everything going smoothly so far, right? Not if you use IE to do this. As usual something about IE makes life difficult for us. We must use a little javascript in order to make it work in IE also. This is optional, but if you don’t want to abandon the many users still using IE then here is the workaround:


startList = function() {
  if (document.all&&document.getElementById) {
    navRoot = document.getElementById("sidebar");
    for (i=0; i

This little JS will add the class over to the content div's we have. So we just add it to our CSS code:


div.sideblock:hover ul, div.over ul, div.sideblock:hover form, div.over form {
  display:block;}

And that takes care of it.

Here is the final code with some additions and IE fixes:


div#sidebar {
  border-right:1px solid #ccc;
  position:fixed;
  top:0;
  _float:right;
  font:small;}
div#sidebar a, div#sidebar a:link {
  text-decoration:none;
  color:#fff;}
div#sidebar a:hover {
  border-bottom:none;
  color:#0cf;}
div#sidebar a:visited, div#sidebar a:active, div#sidebar a:focus {
  color:#ccc;}
div#sidebar a:visited:hover, div#sidebar a:active:hover, div#sidebar a:focus:hover {
  color:#0cf;}
div.sideblock {
  border:1px solid #ccc;
  border-width:1px 0 1px 1px;
  padding:5px;
  position:relative;
  float:left;
  width:10em;
  color:#777;
  background:#235c9d url('nav-bg-blue.gif') repeat-x top left;
  text-decoration:none;
  cursor:pointer;}
div.sideblock ul {
  border:1px solid #ccc;
  list-style:none;
  background:#235c9d;}
div.sideblock form input {
  border:1px solid #000;}
div.sideblock ul, div.sideblock form {
  display:none;
  position:absolute;
  top:1em;
  _top:2em;
  left:0;
  width:10em;}
div.sideblock > ul, div.sideblock > form {top:auto; left:auto;}
div.sideblock:hover ul, div.over ul, div.sideblock:hover form, div.over form {display:block;}
div.sideblock:hover {
  background:#235c9d;}

h3. Floating content

I suggest you take a break after all that, because frankly, I need a break from typing all that out. Don't worry I'll be waiting right here when you get back, go take a break.

Welcome back. Now that we finished the menu, we can work on the floating content. I referenced Eric Meyer's Complexspiral Demo for this technique.

Go look at the final page. Remember to scroll up and down.

It's a little hard to see perhaps and I apologize, but you should see the background (the clouds) moving behind the content. Nope, I didn't use a png to do this. It's pure CSS coding. Now before you say it doesn't work, make sure you're using Firefox, Camino, Opera, Safari, or some other nearly web standard browser. No, I don't count IE6 with that group.

This is done again with that simple fixed attribute. This time we use it in the background.


body{background:#6cf url("bg.jpg") 0 0 no-repeat fixed;}

This is the same as the shortcut used in the code above:


div#content { 
  background-color:#6cf;
  background-image:url("bg.jpg");
  background-position:0 0;
  background-repeat:no-repeat;
  background-attachment:fixed;}

You can read more about it in the reference link I provided before. I will summarize here. The background-attachment:fixed; is fixed with respect to the browser window. That means as you scroll, the window is not the actual part moving, the elements are. So I just assign a second background image with the color change behind the contents of the page and voila!

h3. Now it's your turn

Here is the finished product once again.

Now I need your help, that seems to work but as you can see the corners are still that: corners. So if anyone know of a way to keep the floating content effect with rounded corners please feel free to comment. Thank you for reading, and enjoy!