RSS
Lastfm
Delicious
Vimeo
loading comments

How to make a decent navigation bar

Posted on: August 26, 2008 Categories: CSS, Menus/Navigation, Tutorials
css logo

A navigation bar is of course essential part of a website as it’s going to where all your links to the site are stored, so your obviously be going to needing one, and it’s also going to be need to look appealing. This tutorial will teach you how to make a navigation bar using only XHTML and CSS with no use of Javascript or any other code

Step 1: Creating the first CSS part

Before we do anything else we’re going to code the navigation bar’s CSS first, so make a new CSS document called navigation.css (This can be done in any program such as Notepad etc) and our first attribute will be called #navigation (So this will mean it’s doing to be a ID div when we add it into our XHTML page)

#navigation{
font-family:Georgia, "Times New Roman", Times, serif;
background-image:url(images/under-nav-bg.png);
position:absolute;
width:100%;
border:1px solid #FFFFFF;
height:90px;
}

Step 2: The only XHTML you need:

This is the base layer of our code navigation bar and would need to be opened in a div first otherwise following divs won’t be able to us the base code to display properly. I’d suggest now that you open a blank XHTML document and add in the basic XHTML structure tags such as head, meta etc.. Once you’ve done that add in this between your head tags:

<link rel="stylesheet" href="navigation.css" type="text/css" charset="utf-8" />

Take note of the navigation.css link rel. If you use this for your own website you will need to change that according to the CSS Stylesheet name you’ve named (If different to the example) and the directory it will be in.

Now add in this XHTML code between the body tags:

<div id="navigation">
<a href="#">Home</a>
<a href="#">About</a>
<a href="#">News</a>
<a href="#">Special Offers</a>
<a href="#">Content</a>
<a href="#">Links</a>
</div>

This is the only XHTML you will need to place in the XHTML, the rest is CSS Controlled

Step 3: The other CSS Parts

The final 2 CSS attributes we need to add in do not use divs as they are related to the anchor tag which is already been added on our XHTML as a link:

<a href="#">Home</a>

Go back to our navigation.css and add in this second css attribute:

#navigation a{
text-decoration:none;
float:left;
padding:15px;
font-size:16px;
color:#FFFFFF;
}

This is the CSS for controlling what the links will look like when the mouse pointer of someones mouse is not over any of the links, the colour can be changed by using a different hexdecimal colour other that #FFFFFF. Add this below your other CSS attribute on the navigation.css

Now our other part of anchor tag is this:

#navigation a:hover{
background-image:url(images/nav-button-bg.png);
padding:15px;
}

The CSS is controlling what the display of the navigation will look like when someone’s mouse moves over a link hence the hover attribute. Now I’ve been using two images for the tutorial and I bet you’ve been thinking where can I get my hands on them! Well here they are below (Make sure you right click and save them!:

under-nav nav-button

When you download them I’d recommend you put them in a folder called images if you don’t change the image locations within the CSS, if you do put them in different folder update the CSS with the new image locations!

Okay so thats all of the stuff you need once we put it altogether you should get something like this:

navigaion result

navigaion result

I'm James, I'm 18 years old and I'm a freelance website developer from Nottingham, England. I have a passion for website development and have designed websites for a range of clients in my freelance years. James' Blog is my personal blog where I post articles and general posts whenever I can. I typically like talking website development, but you'll find a range of posts and articles here on my blog.

  • http://www.boxmodeldesign.co.uk web designer – david calvert

    cool, really easy to set-up and looks great.

  • http://www.james-blogs.com James

    @web designer – david calvert

    Thanks, glad you like it :)

  • http://blueboxsols.com/?p=1495 CSS Tutorial: How to make a decent navigation bar – Blue Box Sols

    [...] #navigation (So this will mean it’s doing to be a ID div when we add it into our XHTML page) view plaincopy to [...]

  • joie

    how to center this nav??? tnx

  • http://ho0ked.net potato

    James White
    38 Wymondham Close
    Arnold
    Nottingham
    Phone: +44.07890090936

    lolz can u help me on the phone or can i just send something in the mail?

  • nickos

    nice work bud

  • Funanani

    Hi, i couldnt get the hovering part work, it is not picking it up

    here is my code

    Untitled Page

    .style1
    {
    width: 100%;
    height: 9px;
    }

    .navigation a
    {
    font-family:Tahoma;
    background-image:url(Images/Backrgound/Normal.jpg);
    text-decoration:none;
    font-size:14px;
    font-weight:bold;

    }

    .navigation a:hover{
    background-image:url(Images/Backrgound/Hovering.jpg);

    }

    Overview

    Technology

    Features

    Modules
    <%–
    –%>

    Contact US

    tnx

  • http://www.james-blogs.com James

    In your CSS you haven’t included the main navigation div:

    #navigation{
    font-family:Georgia, “Times New Roman”, Times, serif;
    background-image:url(images/under-nav-bg.png);
    position:absolute;
    width:100%;
    border:1px solid #FFFFFF;
    height:90px;
    }

    If you want to set up the nav on a page and then link me to it I’ll happily check it out

  • Mukesh

    very very useful……….

  • http://sempreaaprender.com/liga.html Luís

    Hello James.

    I’ve been looking, for a long time, for a way to make a navigation bar that will open all my pages in one DIV underthe nav bar but I can’t a way to make it work. I did google and read many things about Ajax and Jquery but I just can’t understand it. Do you have any toturial or a link that will teach me how do it? In advance, thanks.

  • http://www.james-blogs.com James
  • http://sempreaaprender.com/liga.html Luís

    Hey James. me again. In advance, I don’t want to bug. Let me know if I turning in one and I won’t put more questions in here.

    About the dynamicdrive menu you send. I did all they say but nothing happens. I put links to some test pages (html) and it didn’t open that pages on a DIV below the menu, in the same page. Like I expected, It just open a new page.

    One of my links eg: Teste

    I don’t know much about this but I think I have to say where that page should open (Shouldn’t I indicate the DIV content somewhere?)

    Once again, thank you.

    Enjoy life

  • http://www.james-blogs.com James

    Your not bugging me at all im happy to help :)

    What I propose to do is I’ll create a example page of the navigation but I’ll explain each part in more detail and hopefully give you a better understanding of the navigation bar and the process of how it works.

    Give me a few days to get the example working and I’ll email to you if you’d like. If you want to talk to me about anything else you welcome to email me at admin@james-blog.com

    Thanks :)

  • http://sempreaaprender.com/liga.html Luís

    Hi James

    It’s good to know that I wasn’t bugging. Thanks!

    I will wait for your example.

    Once again, thank you very much for your time and kindness.

    Carpe diem :)

  • http://www.infoeduindia.com/?p=315 How to make a decent navigation bar : infoeduindia multimedia collection

    [...] View Tutorial [...]

  • http://infoeduindia.com/2009/06/10/how-to-make-a-decent-navigation-bar/ How to make a decent navigation bar – Tutorial Collection

    [...] View Tutorial No Comment var addthis_pub=”izwan00″; BOOKMARK This entry was posted on Wednesday, June 10th, 2009 at 5:40 am and is filed under Css Tutorials. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site. [...]

  • http://haulaasag.com Terry

    Hello James, I realize it’s been some time since you revisited this post and I hope to reach you. I’ve followed your instruction and incorporated this nav bar into my website. It’s loking and working great except for one thing – the text (and therefore the BG images) is justifying itself to the vertical top of the navigation bar space, rather than centering. DO you have any idea which control in CSS might be causing this? Any help would be appreciated.

    Thanks again for the great tut!
    Terry

  • http://www.pregnancymiraclez.net/pregnancy-miracle-book Pregnancy Miracle Book

    Pregnancy Miracle…

    [...]below you can check out my links page http://www.pregnancymiraclez.net/my-favourite-sites/ with some very good sites that I think you should definitely go visit[...]…

  • http://www.togetasixpackfast.com get a six pack fast

    Did you know Jolie broke up with him?…

    [...]below you will find the link to a couple sites we think you should visit[...]…

  • http://www.gamertester.com game tester

    Like girls more then you should?!…

    [...]Don’t bother that you are having this. This is natural. Just like any other guy you are having this[...]…

blog comments powered by Disqus