Skip to main content

Awesome Vertical Navigation Menu Bar with Hover Effects

animated-vertical-menu-barThis is a fully customizable animated vertical menu navigation bar. It has a simple yet stylish design whcih makes it attractive and distinct. It is built purely on html & css. No javascript or jquery is used, which makes it fast.
As i said, this vertical menu bar is fully customizable from the top to bottom. It comes with beautiful and elegant animated hover effect.

Actually i found this amazing widget on exeideas.com. I do leave full credits with them. Thanks.
animated-vertical-menu-bar-large-thumb
SEE YOURSELF A DEMO ON HOW IT WORKS

Adding Vertical Menu Bar to your blog

  • Go to Blogger Dashboard > Layout and choose Add a Gadget
  • No choose HTML/JavaScript Widget form the list
  • Paste the below code into the widget and save the widget.
<style type='text/css'>
#bloggslab_double_menu {width:225px;overflow:hidden;margin:0 auto;}
#bloggslab_double_menu ul {list-style-type:none;text-align:center;margin:0;padding:0;}
#bloggslab_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;}
#bloggslab_double_menu ul li .bloggslab_double_menu_before_hover {position:relative;width:225px;float:left;display:inline;transition:all 0.3s ease;color:#000;background:#66bb44;}
#bloggslab_double_menu ul li .bloggslab_double_menu_after_hover {position:relative;width:225px;float:left;display:inline;left:225px;transition:all 0.3s ease;color:#ffffff;background:#161916;}
#bloggslab_double_menu ul li:hover .bloggslab_double_menu_before_hover{left:-225px;}
#bloggslab_double_menu ul li:hover .bloggslab_double_menu_after_hover{left:-225px;}
</style>
<nav id="bloggslab_double_menu">
<ul>
<a href="#" title=""><li><span class="bloggslab_double_menu_before_hover">Home</span><span class="bloggslab_double_menu_after_hover">Back to Home</span></li></a>
<a href="#" title=""><li><span class="bloggslab_double_menu_before_hover">About</span><span class="bloggslab_double_menu_after_hover">More about me</span></li></a>
<a href="#" title=""><li><span class="bloggslab_double_menu_before_hover">Work</span><span class="bloggslab_double_menu_after_hover">What we do</span></li></a>
<a href="#" title=""><li><span class="bloggslab_double_menu_before_hover">Services</span><span class="bloggslab_double_menu_after_hover">What we offer</span></li></a>
<a href="#" title=""><li><span class="bloggslab_double_menu_before_hover">Contact</span><span class="bloggslab_double_menu_after_hover">Mail us</span></li></a>
</ul>
</nav>

Now it is your part to customize the widget for you. Replace # with the menu links, replace red highlighted code with menu name and yellow highlighted text with text to be shown on hover.
Labels:

Comments

Post a Comment

Popular posts from this blog

Getting to know Blogger's Post Editor - Beginner's Guide

Blogger provides us with a simple and clean post editor, which can be used by anyone with ease. It is simple and equally efficient at the same time. Comparing with WordPress post editor, one will miss a lot of buttons. But using Blogger's post editor will prove you that those missing buttons were useless. Blogger'a post editor has not too many format options, but has everything one needs. I'm quite sure that even a beginner won't find the editor confusing. But what if someone (a starter) needs to know what exactly each buttons stands for before beginning to use it. This post is for them and only for them.(i know no one else will stop to read this post)
Post a Comment
Read more

Automatic Read More With Thumbnails for Blogger

Blogger gives us an option to add jump break to posts. It enables us to display a a short summary of the post on the homepage of our blog with a link to the full post. Most of us add jump break to our posts, because displaying a short summary instead of the full post on the main page has many advantages. The main reason is that it increases page views and the visitors can easily get a selection of your posts.
Post a Comment
Read more

Uploading a Photo to Blogger Posts - Beginner's Guide

Ok! I know this is simple. This post is just to help the beginners and as a part of the "beginner guide from BloggsLab. Every post in a blog should have a photo in it (recommended!). Inserting a photo to your blog post is easy as said. Blogger's post editor gives is simple and even simple is the upload menu. So, evenit is simple, some might find it tricky (don't believe me). So below in this post you can read on uploading an image through blogger post editor. Read on...
Post a Comment
Read more