2013 February 24 Archive - EXEIdeas

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.#Demo {padding: 5px;border: 1px solid #ff0000; -moz-border-radius:6px; -webkit-border-radius:6px; background:#F8F8F8; box-shadow: 3px 3px 3px #D44B2C; width:200px; }#Demo{margin-bottom:5px;} #Demo a{color:#D44B2C;background:#F8F8F8;padding:8px 14px;display:inline-block;font-size:12px;line-height:12px;text-decoration:none;text-transform:uppercase;-moz-border-radius:5px;-khtml-border-radius:5px;-webkit-border-radius:5px;border-radius:5px}#Demo a:hover{color:#fff;text-shadow:0px 1px 0px #000;background:#D44B2C;text-decoration:none}CLICK HERE TO SEE DEMOFeatures: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.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 .3.) Save It, Now You Are Done. #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;} Home About Us Contact Us Tutorial Information Utilites Download New Feedback Customization:1.) Change Red Text With Your Link Name.2.) Change Blue Hash With Your Links.3.) Save And Enjoy.