Building a Navigation Bar
The navigation of a web page is made up of a list of links that move us from web page to web page. The navigation can also move us from sections of a page to other sections of a page. The links can move us out of the web site altogether. Sometimes tricky to get them to do what you want, but with careful set up, you can make them look and function nicely. There is an infinite number of ways to style a navigation bar.
Unordered lists are very simple lists and not very pretty as they are when used as a navigation list. As they are, the list moves from top to bottom. For a horizontal navigation, we want the list to move from left to right. To do this, we need to add some CSS code to our navigation lists to make them look and function better. Here is a proper way to set up navigation with an unordered list:
<nav>
<ul>
<li><a href="#">link</a></li>
<li><a href="#">link</a></li>
<li><a href="#">link</a></li>
<li><a href="#">link</a></li>
</ul>
</nav>
The above is a simple navigation with 4 links. The <a href=”#”> represents a link. The “#” is a placeholder for the link’s URL.
Below is the CSS structure to a horizontal navigation bar.
nav - Distinguishes the navigation area. You can change background
colors, padding, etc.
nav ul - Distinguishes the entire list area. You can set the margin,
position, list-style for the navigation.
nav ul li - Distinguishes the list item area. You can set the display
for the list. For a horizontal navigation, the display is set to “inline-block”.
nav a - Sets the style for the links within the navigation. There are several
“states” that links can be in.
- a:link - a normal link that hasn’t been visited
- a:visited - a link that a visitor has clicked on already
- a:hover - when a visitor hovers the mouse over the link
- a:active - a link the moment it is clicked by the visitor
When writing the CSS code for links, the order is important. The line of code takes precedence over the style rules prior to it. So the order above, (link, visited, hover and active) is how they should be listed in the CSS file.
For more advanced horizontal navigation, here is how to add a dropdown to the navigation bar.
- nav ul ul - Sets up the list for the first tier dropdown.
- nav ul ul li - Distinguishes the list items for the first tier dropdown.
- nav ul ul ul li - Distinguishes the second tier dropdown.
Here is the CSS code for a horizontal navigation bar:
nav { background-color:blue; }
nav ul {
list-style:none;
margin:0;
padding:0;
position:relative;
}
nav ul li {
display:inline-block;
font-family: sans-serif; /* to change the font of the nav bar */
}
nav a {
display:block;
padding:0 10px;
color:#fff; /* font color */
line-height:50px; /* this controls the height of the nav bar */
text-decoration:none; /* takes away the underline */
text-transform:uppercase;
}
nav a:hover {
background-color:#999; /* background color when cursor hovers over item */
color:#000; /* color of font on hover */
}
/* Hide the Dropdowns by Default */
nav ul ul {
display: none;
position: absolute;
top: 50px; /* the height of the main nav */
}
nav ul ul a {
}
/* Display the Dropdowns on Hover */
nav ul li:hover > ul {
display:inherit;
}
/* First Tier Dropdown */
nav ul ul li {
float:none;
display:list-item;
position: relative;
background-color:blue;
}
/* Second, Third and more Tiers */
nav ul ul ul li {
position: relative;
top:-60px;
left:220px;
}
Here is what the navigation bar would look like: (or click 'navigation bar sample' for a live view of it):
Here are some modifications that we can do to change up the navigation bar: