Nice slide-up navigation with css3

The coolest navigations are done with JQuery.
Animation is everything these days. But JQuery isn't one of my best sides so I had to come up with an alternative.
I wanted my navigation buttons to slide up but I couldn't find any scripts to do so.
After trying over 10 ways to do this I finally found a cool way with css3.

view demo

Wireframe - Html
First of all, I don't really like creating navigation with an unordered list. That's why I decided to create my navigation with a table. And a table would also be easier with the animation and positioning the navigation.

Code:


<table width="900"height="40" style="margin-bottom: -2px;">
       <tr>
            <td width="50"></td>
           <td width="60" valign="bottom">
               <a href="#">
                <div class="navhome">
                Home
                </div>
                </a>
            </td>
           <td width="60" valign="bottom">
               <a href="#">
                <div class="navforum">
                Forum
                </div>
                </a>
            </td>
            <td width="75" valign="bottom">
               <a href="#">
                <div class="navtut">
                Tutorials
                </div>
                </a>
            </td>
            <td width="60" valign="bottom">
            <a href="#">
               <div class="navabout">
                About
                </div>
                </a>
            </td>
            <td width="70" valign="bottom">
               <a href="#">
                <div class="navcontact">
                Contact
                </div>
                </a>
            </td>
            <td>
            </td>
        </div>
        </tr>
    </table>
</div>

<div id="content">
The content of the page goes here

</div>   



---

Styling and animating - Css
To make the navigation work, you will need to create a div class + hover for every single button.
Also you will need to take care our navigation will stick to our content.

Code:


.navhome{
    background-image: url('http://i959.photobucket.com/albums/ae78/LilJur/iDesign%20General/BGdark.png');
    overflow:hidden;/*--This will take care the text will be BEHIND the content--*/
    width:60px;
    height:17px;
    color: #888986;
    font-size:19px;
    padding-left: 5px;
    border-left: 1px solid #000000;
    border-top: 1px solid #000000;
    -webkit-transition: all 0.5s ease; /*--Animation in Chrome and Safari--*/
    -o-transition: all 0.5s ease;/*--Animation in Opera--*/
    -moz-transition: all 0.5s ease;/*--Animation in Firefox--*/
}
 
.navhome:hover{
    height: 27px;/*--Make it bigger then the regular button, so it will "slide up"--*/
    color: #a8ff00;
}

#content {
    background-image: url('http://i959.photobucket.com/albums/ae78/LilJur/iDesign%20General/BGMid.png');
    width: 900px;
    padding: 20px;
    outline: 1px solid #000000;
    border: 1px solid #404040;
}


That's the basic css.
Now, let's add some buttons.

Code:


.navhome{
    background-image: url('http://i959.photobucket.com/albums/ae78/LilJur/iDesign%20General/BGdark.png');
    overflow:hidden;
    width:60px;
    height:17px;
    color: #888986;
    font-size:19px;
    padding-left: 5px;
    border-left: 1px solid #000000;
    border-top: 1px solid #000000;
    -webkit-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
}
 
.navhome:hover{
    height: 27px;
    color: #a8ff00;
}

.navforum{
    background-image: url('http://i959.photobucket.com/albums/ae78/LilJur/iDesign%20General/BGdark.png');
    overflow:hidden;
    width: 60px;
    height:17px;
    padding-left: 5px;
    margin-left: -4px; /*--Because we are using tables, there will be space between the buttons. This will remove that space--*/
    color: #888986;
    font-size:19px;
    border-top: 1px solid #000000;
    -webkit-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
}

.navforum:hover{
    height: 27px;
    color: #a8ff00;
}
 
 
.navtut{
  background-image: url('http://i959.photobucket.com/albums/ae78/LilJur/iDesign%20General/BGdark.png');
  overflow:hidden;
    width: 75px;
    height:17px;
    padding-left: 5px;
    margin-left: -4px;
    color: #888986;
    font-size:19px;
    border-top: 1px solid #000000;
    -webkit-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
}

.navtut:hover{
    height: 27px;
    color: #a8ff00;
}

.navabout{
    background-image: url('http://i959.photobucket.com/albums/ae78/LilJur/iDesign%20General/BGdark.png');
    overflow:hidden;
    width: 60px;
    height:17px;
    padding-left: 5px;
    margin-left: -4px;
    color: #888986;
    font-size:19px;
    border-top: 1px solid #000000;
    -webkit-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
}

.navabout:hover{
    height: 27px;
    color: #a8ff00;
}

#content {
    background-image: url('http://i959.photobucket.com/albums/ae78/LilJur/iDesign%20General/BGMid.png');
    width: 900px;
    padding: 20px;
    outline: 1px solid #000000;
    border: 1px solid #404040;
}


---

Conclusion
A nice and simple way to create a cool animated navigation bar for your website.
If you have any questions, suggestions or whatever you bounce into, feel free to contact me. Or just post it in the blog

View demo