CSS Vertical "Navigation" Menus For Blogger & Websites ~ Help Blog Tricks and Tips

Just Two days ago, I shared a collection of horizontal CSS menus for blogs and websites with you. Today, I would like to share CSS vertical menus collection with you. As you might know, CSS menus look great in a website. There are many benefits of using menus in a blog or website; the first benefit of using a CSS menu is: it attracts the visitors to click on the links inside the menu and the second benefit is: the menus are faster in loading, they don't take much time to load in all browsers, Because with css you make the menus more readable for the browser. The css codes are just called in HTML page by a class or an ID selector. So, within just one word you can call them to be appeared on your blog. We will keep sharing CSS menus with you because there are thousands of stylish menus are there with different looks. We will also share a collection of drop down menus with you in our coming posts.

How to add CSS vertical menus to blog or website?

The procedure of adding any css menu to your blogger blog or website is quite simple and can be done within few steps. The menus we are sharing today are created with CSS and HTML. You can copy the entire code from the text box below in the list. And then go to your Blogger dashboard >> Layout >> Add a Gadget and paste the code inside that. Save the widget and view your blog to see the new added menu.

Remember:

These menus are vertical menus, therefore, they are mostly used in sidebar of your blog. Make sure you add them in sidebar for better result. The codes are with example pictures can be found below. Customization will be taught below the menu codes.

CSS Vertical Menu # 1:

CSS Vertical Menu # 2:

#menu2 {
 width: 200px;
 margin: 10px;
}
 
#menu2 li a {
 height: 32px;
   voice-family: "\"}\""; 
   voice-family: inherit;
   height: 24px;
 text-decoration: none;
} 
 
#menu2 li a:link, #menu2 li a:visited {
 color: #FFF;
 display: block;
 background:  url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKogXArw0wgiGzSVQGEttOJw7wW3eHzHnzz7AK100hcas4KD1W2NmBxtNiSYQk1fjiV0aF7RJnrFPviMZ-_t-gxkLtkokmmP6TxAMbSV48iKwy314XifOfbGOsT6S0PJE9opzPqDQ6fqs3/s1600/menu-2.gif');
 padding: 8px 0 0 10px;
}
 
#menu2 li a:hover {
 color: #FFF;
 background:  url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKogXArw0wgiGzSVQGEttOJw7wW3eHzHnzz7AK100hcas4KD1W2NmBxtNiSYQk1fjiV0aF7RJnrFPviMZ-_t-gxkLtkokmmP6TxAMbSV48iKwy314XifOfbGOsT6S0PJE9opzPqDQ6fqs3/s1600/menu-2.gif') 0 -32px;
 padding: 8px 0 0 10px;
}
#menu2 ul {
 list-style: none;
 margin: 0;
 padding: 0;
}
<div id="menu2">
  <ul>
<li><a href="#1" title="Link 1">Link 1</a></li>
<li><a href="#2" title="Link 2">Link 2</a></li>
<li><a href="#3" title="Link 3">Link 3</a></li>
<li><a href="#4" title="Link 4">Link 4</a></li>
<li><a href="#5" title="Link 5">Link 5</a></li>
</ul>
</div>

CSS Vertical Menu # 3:

CSS Vertical Menu # 4:

#menu4 ul {
 list-style: none;
 margin: 0;
 padding: 0;
}
</style>
<div id="menu4">
  <ul>
<li><a href="#1">Home</a></li>
<li><a href="#2">About</a></li>
<li><a href="#3">Services</a></li>
<li><a href="#4">Portfolio</a></li>
<li><a href="#5">Store</a></li>
<li><a href="#6">Download Menu</a></li>
</ul>
</div>

Customization:

After adding the code into an HTML/JavaScript in blogger you can customize the menu by yourself; for changing the links and anchor texts to your own just find below piece of code in the menu:

<ul><li><a href="#">About</a></li></ul>

All the links are inside the ul tag, so replace each (#) sign with your link and the text i.e About, Home, Services etc with your own anchor text. Save the widget and check the result by viewing your blog. All the CSS properties and values can also be customized according to your needs.

Help Blog Tricks and Tips

Saturday, 27 October 2012