Animated Spotlight CSS Navigation Menu For Blogger And Website
If you are asking how it works, First you implant this and see yourself how awesome it is...! Menu remains simple until 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...??? We Have largest Collection of Stylish Menu Bar Check It
Whats In This Widget ?
1.) Simple And Easy To Install.2.) Nice Animation Effect And Awesome Look.
3.) Easy To Add Links And Use.
4.) Without J-Query.
5.) Quick To Load.
6.) Works With IE9, FF3.5+, Safari 3.1+, Google Chrome, and Opera 11.6+ Browsers.
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.
<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 */
-webkit-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.exespotlightmenu li:hover a{
color: white;
background: #a71b15; /* background color of spotlight */
-webkit-border-radius: 50%; /* large radius to create circular borders */
-moz-border-radius: 50%;
border-radius: 50%;
}
.exespotlightmenu li a exespan{
position:relative;
top:35%; /* move text down so it appears centered within menu item */
}
</style>
<div class="exespotlightmenu">
<ul>
<li><a href="http://s2free.blogspot.com"><exespan>Home</exespan></a></li>
<li><a href="http://s2free.blogspot.ca"><exespan>About</exespan></a></li>
<li><a href="http://s2free.blogspot.mx"><exespan>Portfolio</exespan></a></li>
<li><a href="http://s2free.blogspot.in"><exespan>Privacy</exespan></a></li>
<li><a href="http://s2free.blogspot.gr"><exespan>Contact Us</exespan></a></li>
</ul>
</div>
.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 */
-webkit-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.exespotlightmenu li:hover a{
color: white;
background: #a71b15; /* background color of spotlight */
-webkit-border-radius: 50%; /* large radius to create circular borders */
-moz-border-radius: 50%;
border-radius: 50%;
}
.exespotlightmenu li a exespan{
position:relative;
top:35%; /* move text down so it appears centered within menu item */
}
</style>
<div class="exespotlightmenu">
<ul>
<li><a href="http://s2free.blogspot.com"><exespan>Home</exespan></a></li>
<li><a href="http://s2free.blogspot.ca"><exespan>About</exespan></a></li>
<li><a href="http://s2free.blogspot.mx"><exespan>Portfolio</exespan></a></li>
<li><a href="http://s2free.blogspot.in"><exespan>Privacy</exespan></a></li>
<li><a href="http://s2free.blogspot.gr"><exespan>Contact Us</exespan></a></li>
</ul>
</div>
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 Above Code And Paste It Between <body> </body>.
3.) Save It, Now You Are Done.
2.) Now Copy The Above Code And Paste It Between <body> </body>.
3.) Save It, Now You Are Done.
Customization:
1.) Change All Red Text With Your Links Name.
2.) Change All Blue Hash With Your Links.
3.) Save And Done.
2.) Change All Blue Hash With Your Links.
3.) Save And Done.
If Your This Post Your Comments & Share With Others.....
:o
ReplyDelete