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.
Table of Contents
Features:
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.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.
OR
1.) Go To Your www.blogger.com
2.) Open Your Desire “Blog“.
3.) Go To “Template“.
4.) Click “Edit HTML“.
5.) Now Click Within Code Box.
6.) Press [CTRL+F] To Search </head> Code.
7.) Now Copy The Below Code And Paste It Anywhere After </head> 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 “<body> </body>“.
3.) “Save” It, Now You Are Done.
<style type='text/css'>
/*-----------------------------------------------
Developer: EXEIdeas
Source: www.exeideas.com
Created Date: Friday, Mar 07, 2014
License: 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;}
</style>
<nav id="exe_double_menu">
<ul>
<a href="##########" title=""><li><span class="exe_double_menu_before_hover">Home</span><span class="exe_double_menu_after_hover">Go To Home</span></li></a>
<a href="##########" title=""><li><span class="exe_double_menu_before_hover">About</span><span class="exe_double_menu_after_hover">Know About Me</span></li></a>
<a href="##########" title=""><li><span class="exe_double_menu_before_hover">Work</span><span class="exe_double_menu_after_hover">See My Work</span></li></a>
<a href="##########" title=""><li><span class="exe_double_menu_before_hover">Services</span><span class="exe_double_menu_after_hover">Will Provide You</span></li></a>
<a href="##########" title=""><li><span class="exe_double_menu_before_hover">Contact</span><span class="exe_double_menu_after_hover">Ask Me Anything</span></li></a>
</ul>
</nav>
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.
bro i will give u one blogger template can u customize for me …
You Can Contact Us Via Contact Form And Describe There What You Want To Customize…
This comment has been removed by the author.
Your Template Is Updated And Attached To The Email Reply. Check Your Inbox…