Stylish Colorful Hover Style Page Navigation Menu For Blog And Website

This Article Was Live On April 14th, 2012 And So Far Have: 0 Comments...
Last Updated on June 21st, 2014

One of the most important gadget in blog is navigation menu. Navigation menu help to you access your blog category pages, and your blog readers can easy to access your category pages. So now we going to show you how to add stylish animated navigation menu to blogger/blogspot. This navigation menu make your blog attractive and stylish blog.

CLICK HERE TO SEE DEMO

Features:
1.) Green Menu Bar With Orange Hover.
2.) Only HTML-CSS.

3.) Simple, Stylish, Easy To Use And Quick Load.

How To Add In Blogspot?
1.) Go To Your www.blogger.com
2.) Open Your Desire Blog.
3.) Go To Layout.
4.) Click “Add A Gadget” Where You Want To Add It.
5.) Now Scroll To “HTML-JAVASCRIPT”
6.) Click “+” Icon To Add It.
7.) Now Copy The Below Code And Paste It To There.
8.) Leave The Title Empty.
9.) Click Save, Now You Are Done.

How To Add In Website?
1.) Just Go To Your HTML File.
2.) Now Copy The Below Code And Paste It Between <body> </body>.
3.) Save It, Now You Are Done.

<style>
#menu { width : 100%; height : 50px; background:#6abc45}
#menu ul { margin : 0; padding : 0; list-style-type : none; }
#menu li { float : left; }
#menu li a { background : #6abc45; display : block; width : 108px; height : 32px; text-decoration : none; color : #fff; text-align : center; padding-top : 10px; font-size : 95%; font-family : Arial, Helvetica, sans-serif; font-weight : bold; border-right : 2px solid #fff; }
#menu li a:hover { background : #ff8800; }
</style>
<div id="menu">
<ul>
<li><a href="##########" >What's New</a></li>
<li><a href="##########" >Apps</a></li>
<li><a href="##########" >Games</a></li>
<li><a href="##########" >Best Apps</a></li>
<li><a href="##########" >Reviews</a></li>
<li><a href="##########" >My WP7A</a></li>
</ul>
</div>