Here We Have Simple But Stylish Pure HTML-CSS-Kit Cool Color Hover With Curve Corner Links Page Navigation Bar Having jQuery Effect Without JAVASCRIPT/jQuery File Or Code. We are comeback with another simple Navigation menu made up of CSS3 with additional effects using CSS3 Transition property. CSS Transitions make, powerful effect without the use of JavaScript for many common effects. Sometimes you want to add an additional navigational bar on to your website or blog, but many template and themes only support one menu. In my case the SEO hatch blog has a vertical menu which we use for our post categories, but I wanted to add a small additional menu for consulting inquiries without cluttering the main menu. This menu perfectly work only on some browser such as Chrome, Firefox, and Safari. Here we using simple CSS only.
Table of Contents
Features:
1.) Color Background With Color Hover.
2.) Slow Motion Hover In And Out.
3.) Curve Corner Links.
4.) J-Query Effect Without JAVASCRIPT File.
5.) Easy To Install And Quick To 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>#exenavmenu {float: left;font: bold 13px Arial, Helvetica, Sans-serif;-webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 25px;overflow: hidden;}#exenavmenu ul {margin:0;padding:0;list-style:none;}#exenavmenu ul li {float:left;}#exenavmenu ul li a {float: left;color:#000;padding: 10px 15px;text-decoration:none;background:#ff9d36; -webkit-transition: all 1s linear;-webkit-box-shadow: 1px 1px 1px rgba(0,0,0,0.4);-moz-box-shadow: 1px 1px 1px rgba(0,0,0,0.4);box-shadow: 1px px 1px rgba(0,0,0,0.4);}#exenavmenu ul li a:hover {color: #fff; -webkit-transition: all 1s linear;background:#220077; -webkit-transition: all 1s linear;}</style><div id="exenavmenu"><ul><li><a href="##########">Home</a></li>
<li><a href="########## ">About Us</a></li>
<li><a href="########## ">Contact Us</a></li>
<li><a href="########## ">Tutorial</a></li>
<li><a href="########## ">Information</a></li>
<li><a href="########## ">Utilites</a></li>
<li><a href="########## ">Download New</a></li>
<li><a href="########## ">Feedback</a></li></ul></div>
Customization:
1.) Change Red Text With Your Link Name.
2.) Change Blue Hash With Your Links.
3.) Save And Enjoy.
If anyone is looking for a cool top navigation component with drop-down menu, I found a nice one. It is responsive design, uses HTML5 and CSS3 and is black and grey gradient. Here is the link for you to check it out.
http://templatz.co/navigation.php
Nice Nav Bar…
Stylish navigation bar….
Thanks for sharing !!
You Are Welcome…
Please help me i want to change my background color to fully black
But,……
Error is coming and not a single theme is applying…..
Main colour theme
Not applicable for this template.
Please Help………..
Can I See Your Blog? Please Leave Your Blog URL To Have A Vew On That.
Sure Blog url is :
::Game Persia::
Edit Your Blog Template, Find The Below Code…
background: #000000 url(http://themes.googleusercontent.com/image?id=19aLMMHI-WXcxsojpERe8MlodYlS7yd1qQU1wcTStU21I3bbY7bmlrvVCWE474_XXwWjd) no-repeat scroll top center /* Credit: fpm (http://www.istockphoto.com/googleimages.php?id=2849344&platform=blogger) */;
Change It With
background-color: #000000;
u are master of blogger……
The King……
Thnaks For Visiting…