Tutorial - Creating an Interactive Nav Bar in CSS

Creating a nav bar in CSS

Every good site has at least one Nav Bar to direct its users to other pages on the site. Navigation bars used to be built from tables in HTML but a more modern approach is to make an interactive bar built purely from CSS.

Building the Base

The first step to making your navigation bar is to construct the base of the bar or the actual links that the user is going to be clicking. Many developers like to add all the links into a single line of text and format them with a series of div tags in between the different elements of the bar. Personally I think using an unordered list to hold each of the elements of your bar is a much more organized way to go about it.

Use the following pattern to create the base of your nav bar.


Enclose the whole bar in a div that you label as "navbar1". Now add the links in each of the list elements in your unordered list. Set the text of each of the Buttons to the text that you want to appear on your bar. After you finish that you have the base complete and it is time to add the styling to complete the bar.

Styling the Bar

The styling is where the bar really comes together. If you were to use the unordered list without the styling you would have a horizontal bar with bullets in front of each of the links.

div#navbar1{
height: 25px;
width: 100%;
border-bottom: solid #000 1px;
border-top: solid #000 2px;
background-color: # 86da70;
}

This first set of code assigns a background color to the bar. It also adds a border above and below the bar and defines the size of the bar.

div#navbar1 ul {
margin: 0px;
padding: 0px;
font-family: Arial, Helvetica, sans-serif;
font-size: small;
line-height: 30px;
color: #FFF;
white-space: nowrap;
}

The most important code in the block above is the white-space: nowrap that will make sure that the bar always remains horizontal even if there isn't enough space.

The rest of the code defines the spacing of the elements, as well as the style of the link text.

}
div#navbar1 li {
list-style-type: none;
display: inline;
}

This block of code is the most important block of all. It gets rid of those pesky bullet points and converts the list from vertical to horizontal all in two lines.

div#navbar1 li a {
text-decoration: none;
color: #FFF;
padding: 7px 10px;
}

Using this block of code you remove the underlines on the links and you determine the spacing horizontally and vertically.

div#navbar1 lia:visited {
color: #CCC;
}

You will have to include this to alter the text of the page that you are currently on. This is important for users to keep track of the page that they are visiting.

div#navbar1 lia:hover {
font-weight: bold;
background-color: #3366FF;
color: #FFF;
}

And finally you set the elements to change color when you hover over top of them giving them a more user friendly experience.

You have now completely assembled a navigation panel purely in CSS. You can adjust the styles to suit your needs, but it is a pretty simple process after you understand it.