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!:
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:
Creating a glassy non div navigation bar
web designer - david calvert
September 2nd
cool, really easy to set-up and looks great.
James
September 2nd
@web designer - david calvert
Thanks, glad you like it
joie
September 21st
how to center this nav??? tnx
potato
October 1st
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
October 26th
nice work bud
Funanani
January 21st
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
James
January 21st
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
January 31st
very very useful..........
Luís
February 24th
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.
James
February 24th
Hey Luis,
This should help you:
http://www.dynamicdrive.com/style/csslibrary/item/jquery_multi_level_css_menu_horizontal_blue/
Luís
February 24th
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
James
February 24th
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
Luís
February 24th
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