Top bar's seem to appearing on more and more websites each passing day. I've always quite liked the idea and with some XHTML and CSS you can also create your own top bar. Using it for whatever purpose you want it for.

I call them top bar's but other names like menu bar's, top navigation bars also mean the same thing. If you want some visual reference of what I mean look below:

(Screenshot is of the top bar featured on this website)

Okay so what I call top bar's are something relatively new on websites. You tend to see these appearing on websites that suit them, depending on what type of website it is and the overall design of them. You will notice that they are popular on certain blog layouts (Even though the one you see above is my own addition) but there popular as they can be used for different purposes that suit the webmaster. Anyway lets forget my rambling on and dive right in into coding one ourselfs.

Step 1: Creating the divs in XHTML

First off all were going to create two divs called top-bar and bar-content and apply them into a XHTML document like so:

<div id="top-bar">
<div class="bar-content"></div>
</div>

Embedding our bar-content div within the top-bar div is important, otherwise it's all going to fall to pieces. Thats all the XHTML we need to apply in right now, now let's move onto our CSS.

Step 2: Creating our divs CSS

The CSS will control most of how the top bar is displayed.

First div (Top-Bar):

#top-bar{
position:absolute;
top:0px;
width:100%;
height:35px;
margin-left:-9px;
background-color:#000000;
}

This is the main div that controls and tells the browser what position the div will be displayed in and what size etc.

Second div (bar-content):

.bar-content{
margin-left:8px;
color:#666666;
margin-top:9px;
font: bold 11px Arial, Helvetica, sans-serif;
}

This is the div that controls what's within the main div, so attributes like colour of the text and margins and controlled here.

Now that we have our CSS laid out, let's just add in some text between the bar-content div to test out what our result is so far:

<div id="top-bar">
<div class="bar-content">Test</div>
</div>

After our first test we should get something like this:

(Image Scaled down, so the layout of this blog doesn't break it's div)

Step 3: Making it look good!

Okay so we have our basic top-bar code in place. We can now start to make it more appealing, first off we can get rid of that boring on colour background colour and add in a gradient. You can create this yourself or download my example image below:

(Make sure you right click save as and apply where it is saved on your computer.

So now we have the gradient we can simply replace the background-color attribute on the top-bar's CSS div to this:

background-image:url(images/topbar-bg.png);
background-repeat:repeat;

Replace the background-color code with this code above so our top-bar CSS div will look like this:

#top-bar{
position:absolute;
top:0px;
width:100%;
height:35px;
margin-left:-9px;
background-image: url(images/topbar-bg.png);
background-repeat:repeat;
}

A few notes on the graident image:

If you create this graident image yourself, you will need to make sure the height of the image is the same as the height specified on the div. In this case it's 35px. I'd recommend setting the width of the imago to about 10px and then create a gradient with that image size.

Also you must have a repeat attribute in the div's CSS otherwise the background will not strech across the top-bar.

Apply our new changes and our top-bar should now look like this:

Notice how this small gradient makes the bar more appealing?

Step 4: Choosing what to put in it

Now this part is entirely up to you. You could use it as a new's bar where it displays the current updates on your website, or use it to contain links. Here's some screenshots of what I've done as examples.

As a news bar:

As a sub link navigation bar:

Remember when adding in your content you place it within the bar-content div:

<div id="top-bar">
<div class="bar-content">Your top bar content will go here</div>
</div>

Theres two examples of what you can do with top-bar's

Note: Remember my forcing Div's on one link hack?

You going to be needing this if your going to be using more div's within the bar content div in the XHTML, link is below:

http://www.james-blogs.com/2008/08/27/css-hack-making-divs-appear-on-the-same-line/

Additional code:

If you want your top-bar to be in a fixed position so it moves down the page when you scroll down on the page then you simply need to replace the position on the top-bar CSS div from this:

position:absolute;

To this:

position:fixed;

You may need to adjusted the margin's set in top-bar div in the CSS if you change the positioning

So there you go. I've gave you the XHTML and CSS for coding a top-bar, see what you make out of it!