5 macam menu vertikal untuk blogspot cantik

In this post i am going to share 5 beautiful vertical css menu created by me. And also i am going to explain how to add these menus to your Blogger blog.

First lets see the CSS/HTML codes for each Vertical Navigation Menu along with an Image Preview of the menu.  Every menu listed below contains:

1. Image Preview
2. CSS Code
3. HTML Code

---

Menu 1 (Greenie)

#menu1 ul { list-style: none; margin: 0; padding: 0; }
#menu1 img { border: none; }
#menu1 { width: 200px; margin: 10px; }
#menu1 li a { font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; }
#menu1 li a:link, #menu1 li a:visited { color: #FFF; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDM4ho0ByiggwPI3ww8JpfvvPPx6TIRQVcU3aTjR1RCrNRWYWZIXMVBgNWAmu_EgUkYMNKI4gWozF6GR_8SJ87ROBy7GrEe89ML1wpaiiARWX0sy8JxR_a2JTzfSMtwD1B_Co5uVmXdcJg/s1600/abcd.png); padding: 8px 0 0 20px; }
#menu1 li a:hover { color: #FFF; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDM4ho0ByiggwPI3ww8JpfvvPPx6TIRQVcU3aTjR1RCrNRWYWZIXMVBgNWAmu_EgUkYMNKI4gWozF6GR_8SJ87ROBy7GrEe89ML1wpaiiARWX0sy8JxR_a2JTzfSMtwD1B_Co5uVmXdcJg/s1600/abcd.png) 0 -32px; padding: 8px 0 0 20px; }

<div id='menu1'> <ul>
<li><a href='#1'>Link 1</a></li>
<li><a href='#2'>Link 2</a></li>
<li><a href='#3'>Link 3</a></li>
<li><a href='#4'>Link 4</a></li>
<li><a href='#5'>Link 5</a></li>
</ul> </div>

Menu 2 (Pencilicon)

#menu2 ul { list-style: none; margin: 0; padding: 0; }
#menu2 img { border: none; }
#menu2 { width: 200px; border: 1px solid #ccc; margin: 10px; }
#menu2 li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; }
#menu2 li a:link, #menu2 li a:visited { color: #888; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPuTI2wiSSKMofv4xq3fyde3RBUjL0MmM3BTFDqVt5jlVA2zs9Gn0_-V-w2Nc5mG6TYM_g7zlCp24MRwnTYSWLKX6SuDcIKCtKWNrxC_pvLQ24Tdg2aaEJ7_TOTRN1cbI8hRSaM-7sE07d/s1600/Untitled-2.png); padding: 8px 0 0 30px; }
#menu2 li a:hover, #menu2 li #current, #menu2 li a:active { color: #283A50; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPuTI2wiSSKMofv4xq3fyde3RBUjL0MmM3BTFDqVt5jlVA2zs9Gn0_-V-w2Nc5mG6TYM_g7zlCp24MRwnTYSWLKX6SuDcIKCtKWNrxC_pvLQ24Tdg2aaEJ7_TOTRN1cbI8hRSaM-7sE07d/s1600/Untitled-2.png) 0 -32px; padding: 8px 0 0 30px; }

<div id='menu2'> <ul>
<li><a href='#1'>Link 1</a></li>
<li><a href='#2'>Link 2</a></li>
<li><a href='#3'>Link 3</a></li>
<li><a href='#4'>Link 4</a></li>
<li><a href='#5'>Link 5</a></li>
</ul> </div>

Menu 3 (Bluetube)

#menu3 ul { list-style: none; margin: 0; padding: 0; }
#menu3 img { border: none; }
#menu3 { width: 200px; border: 1px solid #ccc; margin: 10px; }
#menu3 li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; }
#menu3 li a:link, #menu3 li a:visited { color: #fff; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3H7yX_ISdyzf5stPGv399bixKpvVrYo3qWbGYH8wrnNYZ_MKBDRsmIT1_uiB6jOnBW7jZYbX5oySOP2g9Q2lwMoO5wiPJt-ytxXJ0vvK3EJBCIQloiIFs0iqR8w2EXIoQuRJ1clgfwC3L/s1600/codefaplab-omkar-bhagat-codefap-menu3.png); padding: 8px 0 0 50px; }
#menu3 li a:hover, #menu3 li #current, #menu3 li a:active { color: #000; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3H7yX_ISdyzf5stPGv399bixKpvVrYo3qWbGYH8wrnNYZ_MKBDRsmIT1_uiB6jOnBW7jZYbX5oySOP2g9Q2lwMoO5wiPJt-ytxXJ0vvK3EJBCIQloiIFs0iqR8w2EXIoQuRJ1clgfwC3L/s1600/codefaplab-omkar-bhagat-codefap-menu3.png) 0 -32px; padding: 8px 0 0 50px; }

<div id='menu3'> <ul>
<li><a href='#1'>Link 1</a></li>
<li><a href='#2'>Link 2</a></li>
<li><a href='#3'>Link 3</a></li>
<li><a href='#4'>Link 4</a></li>
<li><a href='#5'>Link 5</a></li>
</ul> </div>

Menu 4 (BlueArrow)

#menu4 ul { list-style: none; margin: 0; padding: 0; }
#menu4 img { border: none; }
#menu4 { width: 200px; border: 0px solid #ccc; margin: 10px; }
#menu4 li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; }
#menu4 li a:link, #menu4 li a:visited { color: #333333; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmw9EgoPYU5d5hSZx-9qLcHr32mIdTbaGIoQGbaccKJws5TUiCRcOyf6Cpn1cAcxHOJBk-G_Y1Ex2oABgdxf9FvM9nLoYLHpZ5-ynFR1fURHSN8_L1hOpXsNVQ7xYB4_AW-VqOWRiq-dyR/s1600/codefap-lab-grey-blue-arrow-omkar-bhagat-menu.png); padding: 8px 0 0 20px; }
#menu4 li a:hover, #menu4 li #current, #menu4 li a:active { color: #000; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmw9EgoPYU5d5hSZx-9qLcHr32mIdTbaGIoQGbaccKJws5TUiCRcOyf6Cpn1cAcxHOJBk-G_Y1Ex2oABgdxf9FvM9nLoYLHpZ5-ynFR1fURHSN8_L1hOpXsNVQ7xYB4_AW-VqOWRiq-dyR/s1600/codefap-lab-grey-blue-arrow-omkar-bhagat-menu.png) 0 -32px; padding: 8px 0 0 20px; }

<div id='menu4'> <ul>
<li><a href='#1'>Link 1</a></li>
<li><a href='#2'>Link 2</a></li>
<li><a href='#3'>Link 3</a></li>
<li><a href='#4'>Link 4</a></li>
<li><a href='#5'>Link 5</a></li>
</ul> </div>

Menu 5 (GreyMark)

#menu5 ul { list-style: none; margin: 0; padding: 0; }
#menu5 img { border: none; }
#menu5 { width: 200px; border: 0px solid #ccc; margin: 10px; }
#menu5 li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; }
#menu5 li a:link, #menu5 li a:visited { color: #333333; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCzrI4gCF7B7N5tXBd4liVl2ZjoLX470gIjrLifjnvVq67oHhBG_IdlA_tUJLadRKA2_8LBCm1Gd56Hr02qV8mkaIlVRGiXN4C4iP0mDOiu5z17vkfDGDDdeNOADnIGKIatBrbpmECAgDR/s1600/Untitled-6.png); padding: 8px 0 0 25px; }
#menu5 li a:hover, #menu5 li #current, #menu5 li a:active { color: #000; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCzrI4gCF7B7N5tXBd4liVl2ZjoLX470gIjrLifjnvVq67oHhBG_IdlA_tUJLadRKA2_8LBCm1Gd56Hr02qV8mkaIlVRGiXN4C4iP0mDOiu5z17vkfDGDDdeNOADnIGKIatBrbpmECAgDR/s1600/Untitled-6.png) 0 -32px; padding: 8px 0 0 25px; }

<div id='menu5'> <ul>
<li><a href='#1'>Link 1</a></li>
<li><a href='#2'>Link 2</a></li>
<li><a href='#3'>Link 3</a></li>
<li><a href='#4'>Link 4</a></li>
<li><a href='#5'>Link 5</a></li>
</ul> </div>