I have received a few requests on how I do my CSS navigation using lists, CSS, and CSS3 so, I have decided to do a tutorial on it. Please if anyone sees a better way of doing it, let me know, and if you like it, comment and share with your friends!
The basic html
Setup an unordered list with an id for the<ul>. This will help us style the nav bar, as the ul id can act just like a <div id="navbar"> The only difference is we can use less HTML and CSS for a cleaner style.
The CSS
First we need to style the <ul id="nav">
ul#nav {
background: #0CF;
height: 30px;
width: 800px;
}
Now that we have the navbar styled, we can work with the list items now. We need to remove the bullet, and display the text inline to do this, we will use the float:left method.
ul#nav li {
list-style-type: none;
float: left;
}
Our navbar is starting to come together now, as you should have a blue navigation bar 800px long and 30px tall with text inside of it. Now what we need to do is to get those links spaced out and style to look and act like a normal navigation bar. To do this, we will display the links in a block and add margins and padding to properly space each link.
Also, we are going to setup the CSS3 to add a transitioning effect to the links when hovered over.
ul#nav li a {
color: #fff;
text-decoration: none;
float: left;
display: block;
margin: 0 2px;
padding: 5px 7px;
background: #0CF;
/* -- Begin Transition -- */
transition: color .5s ease-in;
-moz-transition: color .5s ease-in;
-o-transition: color .5s ease-in;
-webkit-transition: color .5s ease-in;
}
Finally, we need to add the hover effect. To do this is pretty simple. We are just going to change the background color, and the text color. The above CSS3 is already done, and the transition effect will work just fine now with the new values we are about to set.
ul#nav li a:hover {
color: #0CF;
background-color:#fff;
}
Thanks for checking out this tutorial, Please be sure to tweet this if you like it, and comment on what you think.
