samedi 5 mai 2012

CSS Animated Navigation Menu

CSS Navigation Menu
In the previous i posted a navigation menu with CSS and jQuery, I hope reader's will like that menu. This navigation menu is not completely different from previous, but some changes are there, previous menu is rounded button and this navigation menu in rectangle shape, because one of our reader commented on previous post, "how to make it in rectangle shape from rounded shape". Now i removed border-radius from this menu and created in rectangle shape. Then mouseover the menu, it will increase the padding and after mousedown from the menu, it will come back with normal. making stylish and animated.
If your are blogspt user, then click Add to Blogger button to add the menu very eaily to blogger.

HTML

Here the basic HTML code for this menu
<ul id="menu-css"> <li><a href="http://c-lien.blogspot.com/?Iw==">Home</a></li> <li><a href="http://c-lien.blogspot.com/?Iw==">About</a></li> <li><a href="http://c-lien.blogspot.com/?Iw==">Portfolio</a></li> <li><a href="http://c-lien.blogspot.com/?Iw==">Contact</a></li> <li><a href="http://c-lien.blogspot.com/?Iw==">Advertise</a></li> <li><a href="http://c-lien.blogspot.com/?Iw==">Write For Us</a></li></ul>

CSS

Now the CSS code for filling color, animation and style to the navigation menu.
#menu-css li {display: inline;list-style: none;float: left;margin: 0px 0 8px;}#menu-css li a {/* Animation (Chrome and Mozile) */-webkit-transition-duration: 0.20s;-webkit-transition-timing-function: ease-out;-moz-transition-duration: 0.20s;-moz-transition-timing-function: ease-out;color: #fff;background: #000;display: inline-block;padding: 7px 15px;outline: none;text-decoration: none;font-size: 15px;font-weight: bold;font-family: 'Cabin Condensed', sans-serif;}#menu-css li a:hover {/* Animation on mouse over the menu */background: #0680f2;padding: 7px 26px;}#menu-css li a:active {background: #f06868;}

Javascript

Here the Javascript code for showing font (Cabin Condensed).
<script type="text/javascript">  WebFontConfig = {    google: { families: [ 'Cabin+Condensed::latin' ] }  };  (function() {    var wf = document.createElement('script');    wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +      '://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';    wf.type = 'text/javascript';    wf.async = 'true';    var s = document.getElementsByTagName('script')[0];    s.parentNode.insertBefore(wf, s);  })(); </script>
That's it. If you have any question about this menu, then just drop your comment below.  

Aucun commentaire:

Enregistrer un commentaire