Announcement:

  Hello, We Are Now Designing Blogger Awesome Template. Check Out At Netzspot.Blogspot.

Monday, January 28, 2013

Animated Stylish CSS Navigation Menu For Blog And Website

This Article Was Live On: Monday, January 28, 2013 And Till Now Have10 comments.
Animated Stylish CSS Navigation Menu For Blog And Website

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...

Features:

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.
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 */
-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="##########"><exespan>Home</exespan></a></li>
<li><a href="##########"><exespan>About</exespan></a></li>
<li><a href="##########"><exespan>Portfolio</exespan></a></li>
<li><a href="##########"><exespan>Privacy</exespan></a></li>
<li><a href="##########"><exespan>Contact Us</exespan></a></li>
</ul>
</div>

Customization:

1.) Change All Red Text With Your Links Name.
2.) Change All Blue Hash With Your Links.
3.) Save And Done.

You Like It, Please Share This Article Using...




Don't Forget To Read This Also...



10 comments :

  1. i looking for a navigation that can set different color on each menu, i would like it look like this website http://eunited.com.my/

    can write this navigation tutorial for us?

    ReplyDelete
  2. well great design i have few questions?

    1-can i change the colors?
    2-can i alter the size of it?
    3-in my template i have that kind of menu, how can i replace it with yours.

    ReplyDelete
    Replies
    1. Thnaks For Liking, Yes, You Can Change Color, Can Change Size And Leave Your Blog Link To Have A View For Your Third Question.

      Delete
  3. here it is http://mybsoftwares.blogspot.com/

    ReplyDelete
    Replies
    1. You Have To Edit Your Template XML File...

      Delete
  4. how can i add a short search box at the end of this navigation bar this will make it more awesome and productive. Is it possible if yes than please suggest me i need your suggestions.

    ReplyDelete
    Replies
    1. Yes, You Can Add QValue Search In It But It Require Some Extra Coding. So We Share Here A Simple Menu Bar, If You Want Then We Will Change Your Desire Too...

      Delete

Speak Your Mind:



Please Read The Rules Before Commenting:-

1.) Your feedback is always appreciated. We will try to reply to your queries as soon as time allows.
2.) Make sure to click the "Notify me" link below the comment to be notified of follow up comments and replies.
3.) Please "Do Not Spam".
4.) Please "Do Not Add Links" to the body of your comment as they will not be published. If the quires contain link then never add HTML tag to it.
5.) Only "English" comments shall be approved and answered.
6.) If you have a problem check first the comments, maybe you will find the solution there.
7.) Your comments must contain 100+ characters to remain accepted.
8.) Never Use Keywords In The Name Section Otherwise Your Comment Will Be Deleted.
9.) All comment will be deleted if it will not fulfil the requirements.