5 Vertical Navigation Menus for Blogger

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)

[css]

#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(http://2.bp.blogspot.com/-u4NSRD8PPQw/UI5C7V8k15I/AAAAAAAAAF8/o61j9g8qC80/s1600/abcd.png); padding: 8px 0 0 20px; }
#menu1 li a:hover { color: #FFF; background: url(http://2.bp.blogspot.com/-u4NSRD8PPQw/UI5C7V8k15I/AAAAAAAAAF8/o61j9g8qC80/s1600/abcd.png) 0 -32px; padding: 8px 0 0 20px; }

[/css]

 

[html]

<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>

[/html]

Menu 2 (Pencilicon)

[css]
#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(http://2.bp.blogspot.com/-sX9_YEV5h20/UI5Je35xOpI/AAAAAAAAAGM/xK7YMAPMTIM/s1600/Untitled-2.png); padding: 8px 0 0 30px; }
#menu2 li a:hover, #menu2 li #current, #menu2 li a:active { color: #283A50; background: url(http://2.bp.blogspot.com/-sX9_YEV5h20/UI5Je35xOpI/AAAAAAAAAGM/xK7YMAPMTIM/s1600/Untitled-2.png) 0 -32px; padding: 8px 0 0 30px; }
[/css]

 

[html]

<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>

[/html]

Menu 3 (Bluetube)

[css]
#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(http://4.bp.blogspot.com/-fh-H0uZbifo/UI5P6-9KT7I/AAAAAAAAAGk/QtLggKGmk7Q/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(http://4.bp.blogspot.com/-fh-H0uZbifo/UI5P6-9KT7I/AAAAAAAAAGk/QtLggKGmk7Q/s1600/codefaplab-omkar-bhagat-codefap-menu3.png) 0 -32px; padding: 8px 0 0 50px; }
[/css]

 

[html]

<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>

[/html]

Menu 4 (BlueArrow)

[css]
#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(http://4.bp.blogspot.com/-Z8pN1B3V3E4/UI5ZMIFvBWI/AAAAAAAAAG0/yr80FMukKv0/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(http://4.bp.blogspot.com/-Z8pN1B3V3E4/UI5ZMIFvBWI/AAAAAAAAAG0/yr80FMukKv0/s1600/codefap-lab-grey-blue-arrow-omkar-bhagat-menu.png) 0 -32px; padding: 8px 0 0 20px; }
[/css]

 

[html]
<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>
[/html]

Menu 5 (GreyMark)

[css]
#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(http://2.bp.blogspot.com/-HWowaTN3gfA/UI5nSWnAQsI/AAAAAAAAAHs/WZ-LN5g8Z9o/s1600/Untitled-6.png); padding: 8px 0 0 25px; }
#menu5 li a:hover, #menu5 li #current, #menu5 li a:active { color: #000; background: url(http://2.bp.blogspot.com/-HWowaTN3gfA/UI5nSWnAQsI/AAAAAAAAAHs/WZ-LN5g8Z9o/s1600/Untitled-6.png) 0 -32px; padding: 8px 0 0 25px; }
[/css]

 

[html]
<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>
[/html]

How to add Vertical Menu to the Blogger Blog ?

Check out the video given below to understand how to add a vertical menu to the blogger blog.

If you have any doubts or questions, feel free to comment below. I will try and help you out.

1 Comment

Leave a Reply