Simple And Awesome Vertical Navigation Menu For Blogger

Today i  have designed a Vertical Nav menu using Dream weaver. You can fully customize this menu and can add colors and fonts of your preference too. The new thing about this menu is that it also contains a  animated effect. So now you organize your pages even more beautifully. I have made the installation even more easier. This menu is not only for blogger. You can add this menu on your WordPress blog or even your Website. If you would like to see our other menus, you can see them from Drop Down Menu Category. I suggest you to see its Demo first. Then follow the steps below  to add this vertical menu bar on your blog.

Live Preview

Add Vertical Menu to Blogger Blog

1. Go to your blogger dashboard>> Layout.
2. and click on add a gadget.
3. scroll down and find html/JavaScript
4. when finally found click on plus icons at the right top corner.
5. and paste the following html and css code in content area.

<style>
#v-menu {
    margin: 0;
    padding: 0;
    font-family: Verdana, Helvetica, Arial, sans-serif;
}
#v-menu {
    width: 275px;
}
#v-menu ul {
    list-style: none;
    text-indent: 0px;
}
#v-menu li {
    margin-top: 0px;
    border-bottom: 1px solid #414141;
}
#v-menu a {
    font-family:Verdana, Geneva, sans-serif;
    font-size: 15px;
    font-weight:bold;
    font-variant: inherit;
    text-transform:uppercase;
    padding: 0px;
    color:#CCC;
    display: block;
    padding: 13px 50px;
    height: 26px;
    line-height: 26px;
    text-decoration: none;
    background:#333 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjnzYWhcMc3TistGCshVvxarpWdnnZ1KCFFCRr6nJTfsZxK3QqUzqry5xfOJnbjnXIayqiSVY5zHhhRJ9_qx0AVC2v0_0T6A7upPVSGmTwdT_IyFxzmndCpYPm99wFdkF6FF3kAXHCE1KlW/s1600/menu-bg.png) no-repeat;
    text-shadow: 1px 1px 1px #111;
    -webkit-transition: all 900ms cubic-bezier(0.47, 0, 0.745, 0.715);
    -moz-transition: all 900ms cubic-bezier(0.47, 0, 0.745, 0.715);
    -o-transition: all 900ms cubic-bezier(0.47, 0, 0.745, 0.715);
    -ms-transition: all 900ms cubic-bezier(0.47, 0, 0.745, 0.715);
    transition: all 600ms cubic-bezier(0.47, 0, 0.745, 0.715);
}
#v-menu a:hover {
    background: #5e5e5e url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEheZntwOEpBUJi4oWlpx_p1GSA7Qs3nhLR6R1htTcHBN2TK0PzsYb19LcW3DH77jvAl-EJKIO3AT5dvuBmOQNPJal1GWqALPqtNeEDi6Bb1F8RMZF5XQuAjw_C0-w1ksHHALTXBfvEy2z7s/s1600/hover-bg.png) no-repeat;
    font-size: 14px;
    padding: 13px 60px;
    -webkit-transition: all 900ms cubic-bezier(0.47, 0, 0.745, 0.715);
    -moz-transition: all 900ms cubic-bezier(0.47, 0, 0.745, 0.715);
    -o-transition: all 900ms cubic-bezier(0.47, 0, 0.745, 0.715);
    -ms-transition: all 900ms cubic-bezier(0.47, 0, 0.745, 0.715);
    transition: all 600ms cubic-bezier(0.47, 0, 0.745, 0.715);
   
}
#v-menu a:visited {
    background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEheZntwOEpBUJi4oWlpx_p1GSA7Qs3nhLR6R1htTcHBN2TK0PzsYb19LcW3DH77jvAl-EJKIO3AT5dvuBmOQNPJal1GWqALPqtNeEDi6Bb1F8RMZF5XQuAjw_C0-w1ksHHALTXBfvEy2z7s/s1600/hover-bg.png) no-repeat;   
}
#v-menu a:active {
    background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEheZntwOEpBUJi4oWlpx_p1GSA7Qs3nhLR6R1htTcHBN2TK0PzsYb19LcW3DH77jvAl-EJKIO3AT5dvuBmOQNPJal1GWqALPqtNeEDi6Bb1F8RMZF5XQuAjw_C0-w1ksHHALTXBfvEy2z7s/s1600/hover-bg.png) no-repeat;   
}
</style>
<div id='v-menu'>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Widgets</a></li>
<li><a href="#">SEO</a></li>
<li><a href="#">Adsense</a></li>
<li><a href="#">Templates</a></li>
<li><a href="#">Applications</a></li>
</ul>
</div>

To change links title simply replaced the text with your page titles and replace the hash sign (#) with respective links. Click save and Done! :) For any further help please feel free to post your queries in the comment box below.