When I wrote about the Unobstructive image gallery listing using CSS, many people asked me to post some tutorial on this blog. So that will be helpful for others. So I decided to create some tutorials on this blog. This is the first step for that.
Here I am trying to make simple navigation, which uses the html tag unordered list (ul li). It would be nice if we are using unordered lists for navigation menus. We can easily manage the navigation though DOM and it may help a little bit on SEO (Search Engine Optimisation).
Before creating this navigation, I am expecting that you may have some simple idea about HTML and CSS.
First, we have to create one simple html like the following on your favorite html or text editor. I am using intype editor for creating the document and I personally like to code it by hand. I am not using any other user interface software for creating the html elements.
So the html code will be like the following
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
| <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<link rel="stylesheet" href="style.css" type="text/css" />
<title>Create simple navigation using CSS and XHTML</title>
</head>
<body>
<ul class="nav">
<li><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Contact Us</a></li>
<li><a href="#">Site map</a></li>
</ul>
</body>
</html> |
So, our html is ready!
Next, we need to create the CSS.
Since we are not creating any other pages, I am only covering the styles required for the current page. Before that, we need to add the style sheet path to the document like this inside the head tag.
<link rel="stylesheet" href="style.css" type="text/css" />
Now I am creating the style sheet required for the page
I wrote the following code on the style sheet style.css file
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
| body{
margin:0;
padding:0;
font-family:verdana, arial;
font-size:12px;
}
ul.nav{
margin:0;
padding:0;
list-style:none;
}
ul.nav li a{
text-decoration:none;
} |
Now the vertical navigation is ready. You can add color for the anchor tag as you wishes like this
ul.nav li a{
text-decoration:none;
color:red;
}If you want to add some color on the mouse over, you simply need to add the color for the element
ul.nav li a:hover{
color:green;
}So the mouse over is also ready. You need to add proper padding, margin to the ul li tags, and then it will look nice.
Now I am changing this to horizontal navigation. For that we need to float the li selector. So it will looks like this
ul.nav li{
float:left;
padding-right:15px;
}
Padding-right used for the space required after the each menu. So the basic menu is ready.
Download sample file Less than 1 KB.
This is the very basic navigation style that can be creating with XHTML CSS. We can enrich the menu by adding background colors, background images or roll over effects. That all things I will explain another time.
Hope this tutorial will be interesting to you. If you have any doubt, suggestions or questions please post comment.
Loading ...