CSS Animated Navigation Menu For Your Website.

by muthu 2013-12-03 11:08:34

CSS Animated Navigation Menu For Your Website.
------------------------------------------ DEMO ---------------------------------------
rotate_menu.jpg
------------------------------------------ CSS3 ---------------------------------------
* { padding:0; margin:0; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; }
nav { max-width:900px !important; margin-top:20px; }
nav ul { list-style:none; overflow:hidden; }
nav li a { background:#016db2; border-right:1px solid #fff; color:#fff; display:block; float:left; font:400 13px 'Montserrat Alternates', Arial;
padding:10px; text-align:center; text-decoration:none; text-transform:uppercase; width:160px; -webkit-transition:transform 1s;
-moz-transition:transform 1s; }
nav#rotate li a:hover, .rotate { -moz-animation:animrotate 2s; -webkit-animation:animrotate 2s; background:#005388; }
@-moz-keyframes animrotate { 100% {background:green;-moz-transformRazz
erspective( 200px ) rotateY( 360deg );} }
@-webkit-keyframes animrotate { 100% {background:green;-webkit-transformRazz
erspective( 200px ) rotateY( 360deg );} }

------------------------------------------ HTML5 ---------------------------------------
html.jpg
------------------------------------------ JAVASCRIPT -----------------------------------

<script type="text/javascript">
$(function() {
$("#withjquery li a").hover(function() {
var el = this;
$(this).addClass('rotate');
setTimeout(function() {
$(el).removeClass('rotate');
}, 2000);
});
});
</script>

------------------------------------------ IMAGES ---------------------------------------
photos.pnghome.pngemail.pngcontact.pngabout.png
505
like
0
dislike
0
mail
flag

You must LOGIN to add comments