Navigation menus play a crucial role in web design and a good navigation menu is definitely a plus to the design. Lately I was playing around with CSS3 for a navigation menu and I learnt how to create an animated navigation menu by only using CSS3(No Images, No JavaScript). Using CSS3 in place of jQuery/JavaScript for animations has obvious advantages like faster load time, lesser heavier website, etc. In this article I am sharing the code of a navigation menu made using CSS3. It renders perfectly on Chrome, Firefox, Safari and Opera. And without the easing effects on Internet Explorer and non CSS3 compatible browsers.
Live Demo // Download
The CSS
body {
font-family: 'Lucida Sans Unicode', 'Lucida Grande', sans-serif;
background: #545454;
margin: 0;
background: -webkit-gradient(linear, left top, right bottom, from(#545454), color-stop(.5, #7e7e7e), to(#545454)) fixed;
background: -webkit-linear-gradient(45deg, #545454, #7e7e7e .5, #545454);
background: -moz-linear-gradient(45deg, #545454, #7e7e7e .5, #545454);
background: -o-linear-gradient(45deg, #545454, #7e7e7e .5, #545454);
border-top: 7px solid #52a8e8;
text-shadow: 0 0 3px rgba(0, 0, 0, 1);
letter-spacing: 2px;
font-size: 20px;
}
a {
text-decoration: none;
color: #fff;
}
header {
width: 850px;
margin-left: auto;
margin-right: auto;
}
header nav a {
position: relative;
float: left;
width: 150px;
text-align: center;
padding-top: 23px;
padding-bottom: 30px;
margin-right: 20px;
-webkit-border-bottom-right-radius: 5px;
-webkit-border-bottom-left-radius: 5px;
-moz-border-radius-bottomright: 5px;
-moz-border-radius-bottomleft: 5px;
border-bottom-right-radius: 5px;
border-bottom-left-radius: 5px;
-webkit-transition: all .5s ease-out;
-moz-transition: all .5s ease-out;
-o-transition: all .5s ease-out;
background: #52a8e8;
background: -webkit-gradient(linear, left top, left bottom, color-stop(.2, #52a8e8), color-stop(1, #4984ce));
background: -moz-linear-gradient(center top, #52a8e8 20%, #4984ce 100%);
background: -o-linear-gradient(#52a8e8, #4984ce);
}
header nav a:hover {
padding-top: 53px;
padding-bottom: 60px;
-webkit-transition: all .5s ease-out;
-moz-transition: all .5s ease-out;
-o-transition: all .5s ease-out;
}
The HTML
<header> <nav> [HOME][1] [ABOUT][1] [WORK][1] [CONTACT][1] [BLOG][1] </nav> </header>