CSS3 Animated Navigation Menu
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.
The CSS
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101
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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21
<body>
<header>
<nav>
<a href="#">HOME</a>
<a href="#">ABOUT</a>
<a href="#">WORK</a>
<a href="#">CONTACT</a>
<a href="#">BLOG</a>
</nav>
</header>
</body>Related Posts
About Pritesh Gupta
Pingback: Stack of Papers Using CSS3 (With Ribbons and Animation) | PriteshGupta.com
Pingback: CSS3 Tabs with CSS3 Navigation Menu | PriteshGupta.com