HTML
<body id="about">
<div id="header">
<ul id="nav">
<li><a href="#">Home</a></li>
<li><a href="#">Tutorials</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Newsletter</a></li>
<li><a href="#">Contact</a></li>
</ul><!-- nav -->
</div><!-- header -->
</body>
CSS
#header {
min-width: 800px;
height: 150px;
}
#nav {
width: 100%;
background-color: #333;
font-family:"Century Gothic", "HelveticaNeueLT Pro 45 Lt", sans-serif;
float: left;
}
#nav li {
list-style: none;
float: left;
width: 120px;
height: 30px;
line-height: 30px;
text-align: center;
}
#nav li a {
color: white;
text-decoration: none;
display: block;
}
#nav li a:hover {
background-color: #066;
}
#home .home a, #home .home a:hover,
#tutorials .tutorials a, #tutorials .tutorials a:hover,
#about .about a, #about .about a:hover,
#contact .contact a, #contact .contact a:hover,
#news .news a, #news .news a:hover
{
background-color: #FFF;
color: #000;
cursor: default;
}
Explanation
HTML
A simple unordered list is almost always the best way to create your navigation area. It is semantic and easy to style.
<body id="about">
The purpose of adding an ID to the Body tag is so I can style the Active page differently using the body ID and class of the link (see CSS). Many people add a class like “selected” to the list item, instead of my method. However, I prefer my method, because it allows me to use the exact same HTML code for the UL/LI section on every page. I usually have a header.php file for every website and I include it on all my pages. Then if I need to modify the navigation, I only have to modify it in one place.
The DIV with an ID of “header” is not strictly necessary, but I usually have some styling on this DIV and want it for other reasons, so I am keeping it in my snippet.
CSS
#header {
min-width: 800px;
height: 150px;
}
I like to use a min-width to make sure if the browser window is small, the navigation won’t collapse and run to 2 lines.
#nav {
width: 100%;
background-color: #333;
font-family:"Century Gothic", "HelveticaNeueLT Pro 45 Lt", sans-serif;
float: left;
}
The float:left is to prevent the #nav area from collapsing. When children are floated, the parent can collapse, and floating the parent is one of several fixes that you can use.
#nav li {
list-style: none;
float: left;
width: 120px;
height: 30px;
line-height: 30px;
text-align: center;
}
list-style: none removes the bullets. float: left brings all the LI items onto one line, making it Horizontal navigation. Specifying the width is optional, and only needed if you want your navigation sections to all be the same size. Alternatively, you could add left/right padding. Making the height and line-height the same centers your text vertically.
#nav li a {
color: white;
text-decoration: none;
display: block;
}
display: block allows the user to click anywhere on the full width and height of the LI item (in this case, 120px by 30px), instead of having to click on the actual word of the link. You should also style the link so it doesn’t use the default blue color for links and you can remove the underline if you want.
#nav li a:hover {
background-color: #066;
}
You can change any number of properties that you want in the a:hover state. Here, I am just changing the background-color.
#home .home a, #home .home a:hover,
#tutorials .tutorials a, #tutorials .tutorials a:hover,
#about .about a, #about .about a:hover,
#contact .contact a, #contact .contact a:hover,
#news .news a, #news .news a:hover
{
background-color: #FFF;
color: #000;
cursor: default;
}
This is where that ID on the body tag comes in handy. This allows me to style the current page with one css statement, and one UL/LI list. Besides just changing the background-color and text color, I like to make the cursor: default, so it is clear to users that nothing will change if you click on that link. It will show the arrow, instead of the hand, like on the other links.
In my next post I will be showing how to build on this navigation and add Drop-Down menus using CSS only and no Javascript.
Thanks,
I can’t count how many of these I looked at and studied, this is the most straight forward and most of all logical !!! It is also able to be built upon, which I like. I give it an A++++, thanks again!
All the best,
Dan H.