Animated Stylish CSS Navigation Menu For Blog And Website

This Article Was Live On January 28th, 2013And So Far Have: 10 Comments...

This is called CSS Spotlight Menu and idea and code provided by Dynamic Drive. I just update some code and share this in easy step here. Spotlight Menu takes advantage of CSS3’s border-radius property and transitions to add a circular background to its menu items when the mouse rolls over each one. The result is a Flash-like, sleek spotlight menu! The circular background appears in all major browsers, including IE9, while the transition effect works in browsers that support CSS3 transitions, namely, FF3.5+, Safari 3.1+, Google Chrome, and Opera 11.6+.If you are asking how it works, First you implant this and see yourself how awesome it is…! Menu remains simple untill you move your cursor on it. When you make it hover there appear a square box that automatically start rounding its corner and finally it become circle as in the upper screen shoot.Is not Awesome…??? Just do it now…

How To Add In Blogspot?

1.) Go To Your www.blogger.com2.) 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 type="text/css">

.exespotlightmenu{

width: 100%;

overflow:hidden;

}

.exespotlightmenu ul{

margin: 0;

padding: 0;

font: bold 14px Verdana; /* font style and size */

list-style-type: none;

text-align: center; /* "left", "center", or "right" align menu */

}

.exespotlightmenu li{

display: inline-block;

position:relative;

padding: 5px;

margin: 0;

margin-right: 5px; /* right margin between menu items */

}

.exespotlightmenu li a{

display:inline-block;

padding: 5px;

min-width:50px; /* horizontal diameter of spotlight */

height:50px; /* vertical diameter of spotlight */

text-decoration: none;

color: black;

margin: 0 auto;

overflow:hidden;

-moz-transition: all 0.5s ease-in-out; /* CSS3 transition to animate all A properties */

SISTER SITES

OUR NEWSLETTER

Do You Like Our Blog? Then Be With Thousands Of Those Fans That Are Receiving Our Articles Daily IN Their Emails. So Its Time To Get In And Take Our Next Hot And Awesome Article Directly Into Your Inbox Too...!!!