Stylish Hover Page Navigation Menu For Blog & Website

This Article Was Live On April 11th, 2012 And So Far Have: 4 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.

Stylish Hover Page Navigation Menu For Blog & Website

CLICK HERE TO SEE DEMO

Features:
1.) Simple And Very Easy To Install.
2.) Menu With Hover And Awesome Look.
3.) Easy To Add Links And Use.
4.) No J-Query File.
5.) Speed Loading Time.

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>
#exenav-left{float:left; display:inline; width:100%; padding-left:2px; padding-top:5px}
#exenav{clear:both; margin:0 auto}
#exenav ul{position:relative; overflow:hidden; padding:0; margin:0; font-family:Arial,Helvetica,sans-serif; font-weight:bold; font-size:12px}
#exenav li{cursor:pointer; float:left; margin:0 1px 0 0; padding:0 1px 0 0; height:40px; display:inline;}
#exenav ul li a, #exenav ul li a:visited{text-decoration:none;border:0px solid #000000; margin:0 1px 0 0; float:left; padding:8px 9px; color:#fff; font-weight:bold; font-size:12px;margin-top:-2px; background:#333333; border-radius:4px 4px; -moz-border-radius:4px 4px 0 0; -khtml-border-radius:4px 4px 0 0; -webkit-border-radius:4px 4px 0 0; border-radius:4px 4px 0 0}
#exenav ul li a:hover{border:2px solid #111; background:#3399FF top left repeat-x; border-radius:8px 8px; -moz-border-radius:8px 8px 8px 8px; -khtml-border-radius:8px 8px 8px 8px; -webkit-border-radius:8px 8px 8px 8px; border-radius:8px 8px 8px 8px}
#exenav ul li a.current, #exenav ul li a.current:visited,
a:hover {text-decoration:none;} a img {border-width:0;}
#hb{height:40px;margin-bottom:10px; margin-top:50px; background:#333333; border-radius:8px 8px; -moz-border-radius:8px 8px 8px 8px; -khtml-border-radius:8px 8px 8px 8px; -webkit-border-radius:8px 8px 8px 8px; border-radius:8px 8px 8px 8px}
#exenav-element{width:100%; margin-top:-24px; padding:0}
</style>
<div id='hb'>
<div id='exenav-element'>
<div id='exenav-left'>
<div id='exenav'>
<ul>
<li><a href='########## '>HOME</a></li>
<li><a href='##########'>Portfolio</a></li>
<li><a href='##########'>News</a></li>
<li><a href='##########'>Blog</a></li>
<li><a href='########## '>About</a></li>
<li><a href='##########'>Contact</a></li>
</ul>
</div>
</div>
</div>
</div>