Creating a website navigation bar with CSS

89

There are many ways to create a navigation bar, you can use a programs like Photoshop and then convert the image into code, but when I see people creating them in Photoshop I think why bother? When you can simply use CSS for the whole creation and code of it. Granted Photoshop can be used in other development tasks such as designing a full website template. But in this tutorial I will show you how to create a very clean navigation bar using CSS and nothing else (Well HTML too but CSS for the majority!)

Step 1: Prepare your documents!

Before we even begin to creat the navigation bar make sure you have one XHTML document open with the basic structure within it (e.g html, head and body tags) and name it navigation.html. Also open blank CSS Document (You can do this in any text-editor just save the document as navigation.css and it will automatically become a stylesheet)

Coming back to our XHTML document (Making sure you have the basic structure of it placed in add this code between the head tags of your XHTML document:

<link rel="stylesheet" href="navigation.css" type="text/css" />

Because we are planning to add in the CSS parts into a seperate stylesheet document this code will be needed so that the stylesheet document’s code is included into the XHTML.

Step 2: Applying the only XHTML code we need

Hopefully this tutorial will show you, how simple a navigation bar can be made and how you don’t need to be making loads of div’s and placing loads of XHTML code to make one. The only div that we need to actually add into the XHTML is the navigation div. So add this bit of code between the body tags of your XHTML document:

<div id="navigation">
<a href="#link1">Link 1</a>
<a href="#link2">Link 2</a>
<a href="#link3">Link 3</a>
<a href="#link4">Link 4</a>
<a href="#link5">Link 5</a>
</div>

Note: Do not change the div name, otherwise the structure of the CSS we are about to create will not be the same as the div name applied in XHTML. I’d recommend you don’t change it as the div is leading off many divs that are also named the same with anchor attributes in there name. You’ll see what I mean during the CSS part

Step 3: The main navigation div

You can now save your XHTML document and leave it closed now as thats the only XHTML we will need. We shall now start creating the CSS for the navigation. Open up the navigation.css document and add in this first part:

#navigation{
height:50px;
width:100%;
background-image:url(navigation-bg.jpg);
font-family: sans-serif;
background-repeat:repeat;
}

Note: Ignore the image file for now. It will be avaliable for you to download at the end of the tutorial.

What we have here is the main div of the navigation. This div basically sets what the size/height of the navigation bar will be as well as the background. This is really the body of the navigation bar.

Step 4: The important anchor div

We have the main div but we also need to create a div that will control the anchor tag’s placed in our XHTML like so:

<a href="#link1">Link 1</a>
<a href="#link2">Link 2</a>
<a href="#link3">Link 3</a>
<a href="#link4">Link 4</a>
<a href="#link5">Link 5</a>

Referring back to one of my tutorials on defining XHTML tags in CSS, you’ll notice that the anchor tag is one of the examples. This tutorial will be using some of that knowledge, so if you want to go over to the other tutorial and check that out before pressing on, please do so:

http://blog.jmwhite.co.uk/2008/08/29/common-xhtml-tags-defined-in-css/

So now that we have the main div, we will now create the main anchor div in our CSS, add this into the CSS document below the main navigation div:

#navigation a{
padding:15px;
float:left;
color:#999999;
text-decoration:none;
border-right:1px solid #333333;
}

A couple of things to point out here. Notice how the div name still includes the main div name but then has a additional character at the end of it? This is infact the anchor tag being defined in CSS, and that would be how you define it.

Another key point is the fact of the float attribute is suddenly being defined in the anchor div. This attribute is very important and without it the navigation links will fall apart and never work. It’s important as it’s being used to position the links, and positioning is very important. At the moment the links are going to be positioned from left to right, however you could also change it to:

float:right;

To make all the navigation links go from right to left. But for this tutorial we’ll be keeping it left.

Step 5: Defining more anchor attributes

We have now essentially finished the main parts of the CSS, we now have the main navigation div and the main anchor div in the CSS. However to make this navigation bar interesting we’ll be defining two more anchor tags in the CSS, so we give the navigation bar a good feel to it.

Under the main anchor div in our CSS place this code below it:

#navigation a:hover{
background-color:#000000;
color:#FFFFFF;
padding:15px;
}

This additional anchor div will give us some functionality over our navigation bar and allow it to become interactive. This div has now made the navigation bar so when someone’s mouse hovers over a link the background colour of the link will change. In this case the colour is black. Also what makes this neat is that the colour of the text has been set differently to the colour of what links would be when someone’s mouse wasn’t hovering over them. So we have a darker colour when the links aren’t being hovered over and when they are the links become a lighter colour. It’s a neat effect that looks good!

Finally you may or may not want to set this final anchor div depending on what you think, I’ll show you what it is and you can choose if you want it or not. Basically we are going to be setting a different colour for the links that have been clicked on already. When a user clicks on a link it will recongise that it has been visited and a new colour of text will over-write any other text colour defined in our CSS. Place this final bit of code below our a:hover div:

#navigation a:visited{
color:#1158AF;
padding:15px;
}

This code will now change any already visited link to a different colour. The colour given will not change unless a person clears his/her’s browsers cache.

A final note regarding all of the anchor div tags, notice how the padding attribute in the CSS has been defined in each div, this is needed for the navigation links to align and work properly. Do not set them different to each other otherwise the navigation bar will be messed up.

And as promised here is the background image of the base of the navigation bar:

nav-bg

(Right click and save this image, and make sure you update the location of the image in the CSS if you place it somewhere differently)

Step 6: Seeing your navigation bar in action:

The moment you’ve all been waiting for! Let’s see the navigation bar in action:

Navigation bar normal state:
nav

Navigation bar link (Hover):
nav-hover

Navigation bar links (Visited):
nav-visited

And there we have a it a clean navigation bar, using mainly CSS to create.

Centering this navigation

I’ve been receiving a couple of comments and emails from people wanting to center this navigation. To do this you simply have to add in padding-left to the main #navigation div in the css. Something like this:

#navigation{
height:50px;
width:65%;
padding-left:35%;
background-image:url(navigation-bg.jpg);
font-family: sans-serif;
background-repeat:repeat;
}

If you want to center the navigation you need to remember that the padding-left will be added width onto 100% so if you left the width at 100% and set a padding left of 35% the width is going to be 135%. To solve the you share the 100% between the padding and the width, like shown in the example code above with a 65%-35%.

Note: The padding left is set in a percentage instead of pixels as percentage will allow the navigation to center correctly and scale on different screen resolutions, without affecting the alignment. Don’t use pixels. It won’t work!

Share This:

  • Pingback: CSS Tutorial: Creating a website navigation bar with CSS - Blue Box Sols()

  • Viggy

    THNX MAN i really needed it to make my website(forum) from scratch + rep if this had 1 LOL

  • No problem, glad it helps you!

  • wildhorseracelover

    Hi James,

    Went back and did the tutorial and code all over (2nd time) Love the way it looks. The only thing I altered was the color of visited links.

    The first time I did the nav bar using tutorial all pages linked properly. This time it doesn’t. I even made new html pages. Any idea what I did wrong?

  • Hey,

    Sounds like a possible broken anchor tag somewhere in your code, if you’d like, you can send me the html you’ve coded for me to check?

  • wildhorseracelover

    sent email via contact info. TY for all help

  • Zac

    Good stuff. Ive been a lousy photoshop and slice web guy for a very long time and need to learn CSS. You’re right, this actually is 100 times easier.

  • Well for creating simple things like navigation bars etc. I would say just directly coding it is best. I mean with CSS you can layout and define how the navigation displays and then (if you want) create a gradient image or use a standard hexidecimal colour as the background. Of course for full website layouts you should design in photoshop then turn it into code.

    Glad you found it easy to follow!

  • Hi James,

    Your tutorial looks excellent but as I’m a novice at css nav bars I was wondering how I would go about creating a horizontal nav bar where the buttons will vary in width, the height remains constant though.
    Would really appreciate your help.
    Thanks in advance.

    Pete

  • Hi Pete,

    Thanks for your comment,

    Creating different size buttons is possible, I’ve created an example page for you:

    http://blog.jmwhite.co.uk/wp-content/tutorials/navigation-bar-css/vary-button-length.html

    Go ahead and view the source code to obtain the code if thats what you we’re after 🙂

  • Rob Stathem

    James, Awesome tutorial! You’ve saved me hours of code-writing by providing this example. I’ve always styled my nav with CSS using the #nav, #nav ul, #nav li, #nav li a:hover, and all that extra garbage!!

    This is MUCH more simplistic and time saving! By the way, these are some of the best tutorials on the web.

    Thanks,
    Rob

  • Thanks again for your kind words 🙂

    While this tutorial shows you how to create a navigation bar with just one div. The way you mentioned, isn’t garbage. You are simply using lists to form your navigation, which is XHTML compliant.

    My view on using lists in navigation bars is, only use them if you are creating a multi level navigation bar, you know like my navigation is.

    And I don’t know about best tutorials on the web, but im glad you like them 🙂

  • hey im stuggling with the nav bar…wondered if u can help me?

  • hey james need to ask couple of questions on web desging…n CSS, HTML hola back to me..(email me ASAP)

  • Sure what do you want help on :)?

  • Pingback: Creating a website navigation bar with CSS - Tutorial Collection()

  • Andie

    Hi James,
    Thanks for the tutorial I found it nice and easy. I was wondering though how you code the menu so I can see what is my current page i’m in?
    Thanks kindly,
    Andie.

  • Hey Andie,

    Do you mean so the navigation bar tab (Thats selected) is a different colour to the others which represents the current page or area a person is currently on?

  • SarahLisette

    James!
    cool site!
    I have problems with the navigation bar!
    (Im a beginner)
    I have a blog (blogger)
    but where do I put those codes?
    I know that it is in the “edit html”
    but where?
    help!

  • Hey there Sarah,

    Basically all you do is you put the html code of the navigation bar into a html page this code:

    <div id="navigation">
    <a href="#link1" rel="nofollow">Link 1</a>
    <a href="#link2" rel="nofollow">Link 2</a>
    <a href="#link3" rel="nofollow">Link 3</a>
    <a href="#link4" rel="nofollow">Link 4</a>
    <a href="#link5" rel="nofollow">Link 5</a>
    </div>

    And then for the CSS you can either add it to the head section of your webpage by using:

    <style type="text/css">
    #navigation{
    height:50px;
    width:65%;
    padding-left:35%;
    background-image:url(navigation-bg.jpg);
    font-family: sans-serif;
    background-repeat:repeat;
    }
    </style>

    Or you can add that code into a external stylesheet.

    Hope that helps!

  • why is is always a good idea to load .css file at head section? does it speed up the page loading process?

  • Generally using what is called a external stylesheet is proven to be faster and better for page loading times rather than having all of your CSS in your head tags. Now on alot of my tutorials I simply do put all the CSS in the head tags (When I show the full source code) but thats because it’s pointless me telling you to create a seperate stylesheet when you can put all of the CSS into a currently existing external stylesheet that you may have already. Everyone manages there CSS differently, so I leave it up to the reader to decide how they manage there code.

  • I found your blog on google and read a few of your other posts. I just added you to my Google News Reader. Keep up the good work. Look forward to reading more from you in the future.

  • Paul Mathews

    Hi James, you have a fabulous site! Thank you for sharing your considerable knowledge of web programming. A newbie question for you (and please forgive me if this is the dumbest question of all time): Is there a way to build a navigator whereby I can easily reflect the addition of a new web page to a site. For example, let’s say that I have a navigator with just three page links: Page A, Page B, and Page C and these three pages comprise the whole site. This navigator appears on each page in the site. Now I add Page D to the site. Do I have to update the navigators in each of the three existing pages (as well as add the now four page navigator to Page D)? Or is there a way to update all the page navigators centrally? Kind of like CSS does for site-wide styling. Thanks in advance.

  • Ah a good question, and thanks for your kind words. What you are describing is basically being able to change the navigation but have it update on all the pages the navigation bar is on. This is possible, but you have to have a webhost that has PHP installed. PHP if you didn’t know is a server side language and it’s quite powerful but it can help us here. Basically what you can do with this navigation is create a php document say call it navigation.php then you would add all the navigation bar code within the navigation.php document.

    Then on your HTML pages you would add in this line:

    < ?php include("navigation.php"); ?>

    Instead of the entire code. Because you have already added in the full code into the navigation.php all you need to add into your HTML pages is the php include. What that lines does is simple include the whole navigation bar code into your html pages but allows you to control it through one document. So now if in the future you wanted to add more links you would simple update the navigation.php file and it will apply the update to every html page that has the php include on it.

    Hope that helps, if you want more assistance please don’t hesitate to contact me via comments or my email 🙂

  • Paul Mathews

    James, thank you for your speedy reply. I don’t believe that my hosting service has PHP installed. I’m using the Microsoft Office Live Small Business website platform which is really a hosted Sharepoint solution and is quite ideal for a novice like me. This platform does provide for some flexibility to the user to go “off the template range” a bit (custom CSS, custom HTML “modules”) but has some quirks and doesn’t provide the unlimited freedom to do whatever you might want (this lack of total freedom is somewhat offset by the cost of the service: free). OLSB does provide a built in navigator that can automatically cascade page additions/deletions throughout all pages on which it is used and it can also be styled with CSS but I was curious about how to build one of these beasts properly (hence my arrival here at this fabulous blog of yours). In the absence of a PHP solution or a frames solution, it sounds like even the pros would actually have to manually add the extra page link to the navigators throughout the site in the event of a new page addition to a site. I sort of thought this might be the case but I just wanted to check in case I was really missing some sort of “cascading navigator link” technology 🙂 Again, many thanks for your reply, much appreciated.

  • Alright no problem, with the lack of server side support you won’t be able to use any method like the one above, and no there isn’t anything you can do via HTML or CSS. The only of method you could use is frames, but it’s a very messy method and it won’t be that great for the validity of your website. You’ve said thats out of the question as well so I guess it’s hardcore coding for you! But your platform sounds nice and easy for you, it sounds like it perfect for you to be testing out basic HTML and CSS. So good luck and if you have any others questions, ask away!

  • Hey James,

    Thanks for the great tutorial this really helps. I am working on a project right now that involves using an image as a background placeholder and using navigation above that image with CSS. The image is a retro television and the web pages (about 10 of them) would be navigated through using a horizontal menu on the top of the tv. I have a pretty clear idea on the navigation but how would I code the image in the background and make the web pages appear within that area to seem likes it is inside the tv? Would that be within a tag in the CSS or XHTML? And is there anyway to add code so that it would center in screen depending on monitor size? Thanks for your help.

  • How I would make sure my image background is centered is use the wrapper method that some people use. Basically you create a div called wrapper and this the first div in your layout, so essentially everything else will be wrapped within this div. You would then set some CSS like so:

    #wrapper { background:url(Creek.jpg) no-repeat; margin:0px auto; width:900px; height:1000px; }

    and your HTML will follow something like this:

    <div id=”wrapper”>

    ……Rest of divs here. Header, Navigation etc will be within this wrapper div

    </div> <--- This is the end of the wrapper The following CSS will center the background image the margin:0px auto; is what is centering the image. Hope this helps you with your background centering.

  • thanks james.

    Just one more question since I am using a .png as the Tv with transparency in the screen, how would I get the first link to open within the inside of the tv.png? Right now when I click the first link the image is on top of the tv even though I used the wrapper div tag, and it seems to nest on the right rather than being centered within the tv screen…any ideas? Thanks.

  • You would probably want to use some sort of positioning I would say you if you used positioning you would use relative e.g.

    #content { position:relative; }

    and then using the top attribute to position your page e.g.

    #content { position:relative; top:200px; }

    Try using a relative position.

  • alex farguson

    Super-Duper site! I am loving it!! Will come back again – taking you feeds also, Thanks.

  • Very nice tutorial for my kind of new web designer. Thanks for sharing information with us.

  • Excellent tutorial. Like the way it is so easily laid out so even a layman can understand.

  • It was interesting to browse trough 🙂 keep up the good work and thanks for sharing. I will be checking regulary now as the stuff here on your site looks to be very helpful. Good myspace stuff.

  • Stephany

    i’m having problems with setting up a nice navigation bar because i have too many categories. can you help! (my site is the one from the email). i have a test stie and can email it to u if u need it. thanks

  • Great post. I totally agree with you.

  • What do you think of this crap? Pretty good blog.

  • I studied the css tutorial and I really learned a lot. I think my next homepage will be a lot better than my first one.

  • Pingback: home remedies for male enhancement()

  • Pingback: video poker()

  • Pingback: baccarat()

  • Pingback: free blackjack()

  • Pingback: jeu roulette()

  • Pingback: make your dick bigger instantly()

  • Pingback: penis male enlargement pills()

  • Pingback: facebook123()

  • Pingback: Grow Marijuana()

  • Pingback: textile industry news()

  • Pingback: fashion human()

  • Pingback: humidor online kaufen()

  • Pingback: Vectron Kassen Kaufen()

  • Pingback: Inspired By Nature()

  • Pingback: Celebrity Blog()

  • Pingback: Prestashop Templates()

  • Pingback: Canopy Bed Curtains()

  • Pingback: Buy Guaranteed Facebook Fans()

  • Pingback: Get Paid to Play Video Games()

  • Pingback: Affiliate Cash Snipers()

  • Pingback: USB Hub Reviews()

  • Pingback: Tool Sets()

  • Pingback: Audio Car Subwoofers()

  • Pingback: Best 3D Glasses()

  • Pingback: Buy Guaranteed Facebook Fans()

  • Pingback: Buy Guaranteed Facebook Fans()

  • Pingback: Best article spinner()

  • Pingback: Choosing Baby Gender()

  • Pingback: Finish Nailer Reviews()

  • Pingback: Computer Privacy Screen()

  • Pingback: http://www.migente.com/your_page/blog/view_posting.html?pid=1390603&profile_id=6752018&profile_name=ryand75dka&user_id=6752018&username=ryand75dka()

  • Pingback: Elektrische Zahnbuerste()

  • Pingback: Buy Facebook Fans()

  • Pingback: Buy Fans On Facebook()

  • Pingback: Buy Facebook Fan()

  • Pingback: Buy Targeted Fans()

  • Pingback: Buy Fb Fans()

  • Pingback: Best Gaming Laptop()

  • Pingback: online mobile website creator()

  • Pingback: Fivezon3()

  • Pingback: Acnezine Scam()

  • Pingback: go learn web98.()

  • Pingback: OldChangKee()

  • Pingback: Top Backlinks()

  • Pingback: website bouwen()

  • Pingback: website bouwen()

  • Pingback: baby cribs 623()

  • Pingback: Quick Recipes()

  • Pingback: Online Advertising()