Styling Navigation Using Lists – The Basics
Today we’re taking a look at How to Style Lists for use in horizontal navigation. The final product should look something like this demo.
Now navigation is what..? Well most often in web design, navigation is a series or a “List of links” and there for should be treated as such. Styling your navigation in list items gives you a lot more control and really allows you to do some pretty cool things.
If your new to the design and development world, I’d say this is a really good technique to get in the practice of using. You can download the source files.
To start were going to create an HTML file and type the following:
<div id="nav_container"> <ul> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Portfolio</a></li> <li><a href="#">Blog</a></li> <li><a href="#">Contact</a></li> </ul> </div>
What we’ve just created is a DIV with an id of “nav_container” which will contain our navigation. Inside of that DIV we have an unordered list with five list items. Notice the links… This is going to be our navigation. On an attached style sheet, lets set a dark background color with a light gray sans-serif font. To do that lets go to our style sheet and type:
body {
background:#000;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
color:#CCC;
}
Pretty simple. If you preview this in the browser you should see a bulleted list of unstyled links. The first thing we’re going to do is get rid of those bullets. Lets go back to the style sheet and type:
#nav_container ul {
list-style:none;
}
Here we’re selecting the unordered list inside the “nav_container” DIV and setting its list-style property to none. In other words… no bullets. Next we want to display our links in a horizontal fashion and give them a bit of space, so we’ll drill down our selectors even further. Return to the style sheet and type:
#nav_container ul li {
display:inline;
margin:1px;
}
Lets preview this in the browser. You’ll see after giving our “display” property a value of “inline” our navigation is now displayed left to right. In some cases you may to use the float property instead. Now its time to style our links. We’re really going to drill down our selectors this time, all the way to the anchor tag. Lets go back to the style sheet and type:
#nav_container ul li a {
background:#333;
color:#CCC;
text-decoration:none;
padding:3px 7px;
}
Now preview this in the browser and lets talk about what we just did. We set the background color of our links to dark gray, set the font color to a light gray and set our “text-decoration” property to none, dropping the links default underline. Lastly we gave our links some “padding”. 3 pixels for the top and bottom, and 7 pixels for the right and left. The final step is to change the roll over, or hover state of our navigation. Lets make the background white and the font color black. Back in the style sheet type..
#nav_container ul li a:hover {
background:#FFF;
color:#000;
}
Preview in the browser and… Viola! You did it. Now you can take what you’ve learned here and try some things of your own… maybe swap a background image, maybe mess with the borders… who knows. BE CREATIVE The best way to learn is trial and error. Don’t forget to grab the source files here.
