2014 March 07 Archive - EXEIdeas – Let's Your Mind Rock

As you have seen many stylish horizontal menu bar that we also have shared but this time we are with a vertical menu bar for websites or blogs with animation effect on hover. This menu bar is purely made by HTML-CSS without any JavaScript or jquery. This menu bar work awesome in all major browsers and can be edited fully according to your desire or your theme style.This menu bar actually contain two text on a single link. One is a short link name and other is a link description that will be visible on the menu place on hover that look more awesome in animation. Here is our preface so now check out our live DEMO in the below link and check out the other features list then garb the code and add it in your blog or website.#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.) Awesome And Stylish Design.2.) Pure HTML And CSS.3.) No JavaScript Or JQuery.4.) Quick To Load And Easy To Install.5.) SEO Supported UL LI Coded.6.) Vertical Design Menu Bar.7.) Unlimited Link Can Be Added.8.) Fully Customizable.9.) Short And Easy Coded.10.)Animate On Hover.11.) Will Show Link Desc On Hover On The Same Place.12.) Change The Second Text On Hover In Animation.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.OR1.) Go To Your www.blogger.com2.) Open Your Desire “Blog“.3.) Go To “Template“.4.) Click “Edit HTML“.5.) Now Click Within Code Box.6.) Press [CTRL+F] To Search Code.7.) Now Copy The Below Code And Paste It Anywhere After Code Where You Want It.8.) Click “Save Template” And 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. /*-----------------------------------------------Developer: EXEIdeasSource: www.exeideas.comCreated Date: Friday, Mar 07, 2014License: Copyright, EXEIdeas. All Rights Reserved. This Menu bar is licensed under DMCA and CreativeCommon3.0. If anyone found to copy or clone it will be under DMCA legal notice. You are free to use it with creator HTML comment.----------------------------------------------- */#exe_double_menu {width:225px;overflow:hidden;margin:0 auto;}#exe_double_menu ul {list-style-type:none;text-align:center;margin:0;padding:0;}#exe_double_menu ul li {margin:0;padding:0;line-height:40px;width:450px;height:40px;font-size:1em;text-transform:uppercase;letter-spacing:1px;font-weight:200;}#exe_double_menu ul li .exe_double_menu_before_hover {position:relative;width:225px;float:left;display:inline;transition:all 0.3s ease;color:#000;background:#66bb44;}#exe_double_menu ul li .exe_double_menu_after_hover {position:relative;width:225px;float:left;display:inline;left:225px;transition:all 0.3s ease;color:#ffffff;background:#161916;}#exe_double_menu ul li:hover .exe_double_menu_before_hover{left:-225px;}#exe_double_menu ul li:hover .exe_double_menu_after_hover{left:-225px;} Home Go To Home About Know About Me Work See My Work Services Will Provide You Contact Ask Me Anything Customization:1.) Change All Blue Hashes With Your Desired Links.2.) Change All Red Text With Your Main Link Name.3.) Change All Pink Text With Your Link Desc Or Other Text.Last Words:As you know that what we have we share so this is what we have now. If you like it then share it and use it, If you still have any quires then feel free to ask me in comments or contact form. Don’t forget to leave your feedback in comments.