Using an unordered list is a simple and easy to style method of creating a navigation bar. Now with CSS3 and round corners created by the browser, it’s even easier to make a nice and clean nav. I introduced CSS3′s border-radius in a previous post, located here.
Check out the example I created, and then keep reading to find out how to create the above nav with nothing more than some CSS.
View Demo
First create your unordered list in your XHTML.
<li><a href=”#” class=”current”>Home</a></li>
<li><a href=”#”>About</a></li>
<li><a href=”#”>Services</a></li>
<li><a href=”#”>Contact</a></li>
</ul>
The first thing to do with your CSS is to make your unordered list display on the same line, and with no bullet points.
li {display:inline}
The next step is to style the links. We’ll add some padding around the links to space them out, and to give the background color the width and height we want. On the hover state of the links I made the border appear as you roll over the link.
You’ll see I made an “active” state for the current page you are on. I set the cursor for the active state to be the “default” cursor. This is so when you roll over the link of the current page you are on the pointer cursor will turn into the arrow, giving the illusion that it isn’t a link (even though it really is).
a:hover, a:active {text-decoration:none; color:#ccc; border:#333 1px solid; padding:5px 15px; -webkit-border-radius:10px; -moz-border-radius:10px }
a.current {-webkit-border-radius:10px; -moz-border-radius:10px; background:#333; color:#FFF; border:#333 1px solid; cursor:default}
So there it is, with this basic foundation and your imagination you can make a variety of looks for your navigation. Enjoy!
