How To Make Vertical Navigations Menu With CSS

How To Make Vertical Navigations Menu With CSS | http://tipsandtricksfor.blogspot.com/2011/01/how-to-make-vertical-navigations-menu.html

 The purpose of made this menu is to facilitate the visitors to navigate our blog. Usually, some people fill it with "Home", "About Me", "Disclaimer", "Services", etc. But, if you want to make difference, it's OK. Well, before I give the steps, you must backup your template first, because we will make some changes!

1. Go to Design --> Edit HTML
2. For HTML code, you can paste under :
    => If you have right sidebar, you have to find this code : <div id='sidebar-wrapper'> or <div id='sidebar-wrapper-right'>
    => But, if you have left sidebar, you can find this code : <div id='sidebar-wrapper-left'>
3. For CSS code you can paste above ]]></b:skin>
4. After that, before I give the CSS code and HTML code, I will teach you how to edit the links and the titles.

<li><a rel="nofollow" href="Title 1" >Link 1</a></li>
<li><a rel="nofollow" href="Title 2" >Link 2</a></li>
<li><a rel="nofollow" href="Title 3" >Link 3</a></li>
<li><a rel="nofollow" href="Title 4" >Link 4</a></li>
<li><a rel="nofollow" href="Title 5" >Link 5</a></li>

=> Change with word that you want to display
=> Change with links that you want to open

example :

<li><a rel="nofollow" href="Full Blog Tricks" >http://tipsandtricksfor.blogspot.com/</a></li>

Now, I will give you 10 choice (CSS Style)

CSS Code:
#menu8 ul { list-style: none; margin: 0; padding: 0; } #menu8 img { border: none; } #menu8 { width: 200px; margin: 10px; border-style: solid; border-color: #656556; border-size: 1px; border-width: 1px; } #menu8 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; } #menu8 li a:link, #menu8 li a:visited { color: #656556 ; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiaLu-OmPMnJEk7UtLh7u5CpeSQLuy7xmny1FyrOzs2Vs_aZRj4gwc6AgvFivbBEQuqwTl8bAQWH_WbWYRZlWXktkbJ9ud69JOJh6hYMlAfSaZIRuZE435muOGLO7zzDkVAslFv6o6PL14/s800/menu8.gif) ; padding: 8px 0 0 20px; } #menu8 li a:hover { color: #474739; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiaLu-OmPMnJEk7UtLh7u5CpeSQLuy7xmny1FyrOzs2Vs_aZRj4gwc6AgvFivbBEQuqwTl8bAQWH_WbWYRZlWXktkbJ9ud69JOJh6hYMlAfSaZIRuZE435muOGLO7zzDkVAslFv6o6PL14/s800/menu8.gif) 0 -32px; padding: 8px 0 0 20px; }
HTML Code:
<div id="menu8"><ul><li><a rel="nofollow" href="#1">Link 1</a></li> <li><a rel="nofollow" href="#2">Link 2</a></li> <li><a rel="nofollow" href="#3">Link 3</a></li> <li><a rel="nofollow" href="#4">Link 4</a></li> <li><a rel="nofollow" href="#5">Link5</a></li> </ul></div>

CSS Code:
#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: #888; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZYhfkjElmOBxbqTELHPGBmHV8WXF_GEzUxwHJFmc8ILk0Q3ESivfTO9zQEZFo0mRO1hDdM6yJTkZ76rB323gYM09RuGDbMydRijsrVED0Wwg9uI4YW0-e-IRhf1n4ddOfz38iygAgRpI/s800/menu3.gif); padding: 8px 0 0 30px; } #menu3 li a:hover, #menu3 li #current, #menu3 li a:active { color: #283A50; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZYhfkjElmOBxbqTELHPGBmHV8WXF_GEzUxwHJFmc8ILk0Q3ESivfTO9zQEZFo0mRO1hDdM6yJTkZ76rB323gYM09RuGDbMydRijsrVED0Wwg9uI4YW0-e-IRhf1n4ddOfz38iygAgRpI/s800/menu3.gif) 0 -32px; padding: 8px 0 0 30px; }
HTML Code:
<div id="menu3"><ul><li><a rel="nofollow" href="#1">Link 1</a></li> <li><a rel="nofollow" href="#2">Link 2</a></li> <li><a rel="nofollow" href="#3">Link 3</a></li> <li><a rel="nofollow" href="#4">Link 4</a></li> <li><a rel="nofollow" href="#5">Link5</a></li> </ul></div>

CSS Code:
#menu4 ul { list-style: none; margin: 0; padding: 0; } #menu4 img { border: none; } #menu4 { width: 200px; margin: 10px; border-style: solid solid none solid; border-color: #000; border-size: 1px; border-width: 1px; } #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: #CCC; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxIuOlVlWC1nCHgqoRk8OTftdqviLXgx5L0LoIFaIaGhA_NUW2A90cAWZhDBg7qAvC09M9YyDXhqlv5WDWIaqVx5ccmARxnbyksRGJbK2RMxY2OAiDyn_RtdAf5v5-dZfvgVpNyB1bPQs/s800/menu4.gif); padding: 8px 0 0 10px; } #menu4 li a:hover { color: #FFF; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxIuOlVlWC1nCHgqoRk8OTftdqviLXgx5L0LoIFaIaGhA_NUW2A90cAWZhDBg7qAvC09M9YyDXhqlv5WDWIaqVx5ccmARxnbyksRGJbK2RMxY2OAiDyn_RtdAf5v5-dZfvgVpNyB1bPQs/s800/menu4.gif) 0 -32px; padding: 8px 0 0 10px; }
HTML Code:
<div id="menu4"><ul><li><a rel="nofollow" href="#1">Link 1</a></li> <li><a rel="nofollow" href="#2">Link 2</a></li> <li><a rel="nofollow" href="#3">Link 3</a></li> <li><a rel="nofollow" href="#4">Link 4</a></li> <li><a rel="nofollow" href="#5">Link5</a></li> </ul></div>

CSS Code:
#menu14 ul { list-style: none; margin: 0; padding: 0; } #menu14 img { border: none; } #menu14 { width: 200px; margin: 10px; } #menu14 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; } #menu14 li a:link, #menu14 li a:visited { color: #fff; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_pPg8J-1x933UB_DOxYlNeO1zZd7jKlNj-JRFlBZj5jYY1Z5FDNikHstO35IPGWONQzdLGi8TCMCoY5RfLvXGP48arxiyAiGDLdfkQqqyA8JyITuv2VofcMkECnKApVBIZNvSIEPmwnk/s800/menu14.gif) 0 -32px; padding: 8px 0 0 10px; } #menu14 li a:hover { color: #333; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_pPg8J-1x933UB_DOxYlNeO1zZd7jKlNj-JRFlBZj5jYY1Z5FDNikHstO35IPGWONQzdLGi8TCMCoY5RfLvXGP48arxiyAiGDLdfkQqqyA8JyITuv2VofcMkECnKApVBIZNvSIEPmwnk/s800/menu14.gif); padding: 8px 0 0 10px; }
HTML Code:
<div id="menu14"><ul><li><a rel="nofollow" href="#1">Link 1</a></li> <li><a rel="nofollow" href="#2">Link 2</a></li> <li><a rel="nofollow" href="#3">Link 3</a></li> <li><a rel="nofollow" href="#4">Link 4</a></li> <li><a rel="nofollow" href="#5">Link5</a></li> </ul></div>

CSS Code:
#menu6 ul { list-style: none; margin: 0; padding: 0; } #menu6 img { border: none; } #menu6 { width: 200px; margin: 10px; } #menu6 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; } #menu6 li a:link, #menu6 li a:visited { color: #8D9179; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlWKS1wsEozxheOzqa9P12PP990DhSu4mpcoZ5G90OMg4IINlrXZzu8F4URBuNpCjrPR_DjfWY5nxNyb18Ry92shZFe9Ptg4_xkYIlRPonPxd7Y-dpepKE1a0jlRi2CMxPz-NnWh9PlMA/s800/menu6.gif); padding: 8px 0 0 10px; } #menu6 li a:hover, #menu6 li #current, #menu6 li a:active { color: #6C7250; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlWKS1wsEozxheOzqa9P12PP990DhSu4mpcoZ5G90OMg4IINlrXZzu8F4URBuNpCjrPR_DjfWY5nxNyb18Ry92shZFe9Ptg4_xkYIlRPonPxd7Y-dpepKE1a0jlRi2CMxPz-NnWh9PlMA/s800/menu6.gif) 0 -32px; padding: 8px 0 0 10px; }
HTML Code:
<div id="menu6"><ul><li><a rel="nofollow" href="#1">Link 1</a></li> <li><a rel="nofollow" href="#2">Link 2</a></li> <li><a rel="nofollow" href="#3">Link 3</a></li> <li><a rel="nofollow" href="#4">Link 4</a></li> <li><a rel="nofollow" href="#5">Link5</a></li> </ul></div>

CSS Code:
#menu9 ul { list-style: none; margin: 0; padding: 0; } #menu9 img { border: none; } #menu9 { width: 200px; margin-top: 10px; } #menu9 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; } #menu9 li a:link, #menu9 li a:visited { color: #E5E8D4; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsaygKRQvUbGiXzUxo2V44sksKXSjjqXre1dAxZ7i3h0BN8EQ4c4cZ8Rah953jo-pbNzva25B3ea_23owDRCq3KA4C7YTwytluVayhvRiPvApm9oAMhAynPGuQfAUELT-DHplsGd80RJM/s800/menu9.gif); padding: 8px 0 0 10px; } #menu9 li a:hover, #menu9 li #current { color: #725033; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsaygKRQvUbGiXzUxo2V44sksKXSjjqXre1dAxZ7i3h0BN8EQ4c4cZ8Rah953jo-pbNzva25B3ea_23owDRCq3KA4C7YTwytluVayhvRiPvApm9oAMhAynPGuQfAUELT-DHplsGd80RJM/s800/menu9.gif) 0 -32px; padding: 8px 0 0 10px; } #menu9 li a:active { color: #fff; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsaygKRQvUbGiXzUxo2V44sksKXSjjqXre1dAxZ7i3h0BN8EQ4c4cZ8Rah953jo-pbNzva25B3ea_23owDRCq3KA4C7YTwytluVayhvRiPvApm9oAMhAynPGuQfAUELT-DHplsGd80RJM/s800/menu9.gif) 0 -64px; padding: 8px 0 0 10px; }
HTMl Code:
<div id="menu9"><ul><li><a rel="nofollow" href="#1">Link 1</a></li> <li><a rel="nofollow" href="#2">Link 2</a></li> <li><a rel="nofollow" href="#3">Link 3</a></li> <li><a rel="nofollow" href="#4">Link 4</a></li> <li><a rel="nofollow" href="#5">Link5</a></li> </ul></div>

CSS Code:
#menu12 ul { list-style: none; margin: 0; padding: 0; } #menu12 img { border: none; } #menu12 { width: 200px; margin: 10px; } #menu12 li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 22px; text-decoration: none; } #menu12 li a:link, #menu12 li a:visited { color: #666; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipTvQYaJDFEL7fpUslSFnR64ZDRYkTtKp3ve5RrgyEs1pX3Qq0heeuHFCE-tW0twxB1azi-zmDQ0nVwGFDRTksZ9B_FT4MNS5wKryOlVV_IcQtwxTdJzrgGBQserjwLW0Ou0YJUHNWj74/s800/menu12.gif); padding: 10px 0 0 35px; } #menu12 li a:hover { color: #000; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipTvQYaJDFEL7fpUslSFnR64ZDRYkTtKp3ve5RrgyEs1pX3Qq0heeuHFCE-tW0twxB1azi-zmDQ0nVwGFDRTksZ9B_FT4MNS5wKryOlVV_IcQtwxTdJzrgGBQserjwLW0Ou0YJUHNWj74/s800/menu12.gif) 0 -32px; padding: 10px 0 0 35px; }
HTML Code:
<div id="menu12"><ul><li><a rel="nofollow" href="#1">Link 1</a></li> <li><a rel="nofollow" href="#2">Link 2</a></li> <li><a rel="nofollow" href="#3">Link 3</a></li> <li><a rel="nofollow" href="#4">Link 4</a></li> <li><a rel="nofollow" href="#5">Link5</a></li> </ul></div>

CSS Code:
#menu13 ul { list-style: none; margin: 0; padding: 0; } #menu13 img { border: none; } #menu13 { width: 200px; margin: 10px; } #menu13 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; } #menu13 li a:link, #menu13 li a:visited { color: #C7377D; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgaJFntQ2eI3hUjoIoyDj0nlUg96Nxzmi-FOypk9A7m8xdosj5TzRJdg1Xfsc2LhUoDEkjsuC3NUPJOhFSb0frfRbIWJSAQBvPQfWXAhCc_fnRONActpckikPDFA1SmjE-or1SjPqF0lFI/s800/menu13.gif); padding: 8px 0 0 10px; } #menu13 li a:hover { color: #C7377D; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgaJFntQ2eI3hUjoIoyDj0nlUg96Nxzmi-FOypk9A7m8xdosj5TzRJdg1Xfsc2LhUoDEkjsuC3NUPJOhFSb0frfRbIWJSAQBvPQfWXAhCc_fnRONActpckikPDFA1SmjE-or1SjPqF0lFI/s800/menu13.gif) 0 -32px; padding: 8px 0 0 10px; }
HTML Code:
<div id="menu13"><ul><li><a rel="nofollow" href="#1">Link 1</a></li> <li><a rel="nofollow" href="#2">Link 2</a></li> <li><a rel="nofollow" href="#3">Link 3</a></li> <li><a rel="nofollow" href="#4">Link 4</a></li> <li><a rel="nofollow" href="#5">Link5</a></li> </ul></div>

CSS Code:
#menu4 ul { list-style: none; margin: 0; padding: 0; } #menu4 img { border: none; } #menu4 { width: 200px; border-style: solid solid none solid; border-color: #D76100; border-size: 1px; border-width: 1px; 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: #9E3C02; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRo0GQBJvaer-Sn00lDNYo4rmUm-4IL2t7KVVHrNpIMwVFHscrMlSzNeApQ_JfsT_VfxhxJ1N8z0OlaOLRx8sDiJ9PB4xZ_rpo1pwWQd7YfKhPWsij1yHW8Rhzzkjqe2lE9UaUJ2S9ZjM/s800/menu4.gif); padding: 8px 0 0 30px; } #menu4 li a:hover, #menu4 li #current { color: #fff; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRo0GQBJvaer-Sn00lDNYo4rmUm-4IL2t7KVVHrNpIMwVFHscrMlSzNeApQ_JfsT_VfxhxJ1N8z0OlaOLRx8sDiJ9PB4xZ_rpo1pwWQd7YfKhPWsij1yHW8Rhzzkjqe2lE9UaUJ2S9ZjM/s800/menu4.gif) 0 -32px; padding: 8px 0 0 30px; } #menu4 li a:active { color: #fff; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRo0GQBJvaer-Sn00lDNYo4rmUm-4IL2t7KVVHrNpIMwVFHscrMlSzNeApQ_JfsT_VfxhxJ1N8z0OlaOLRx8sDiJ9PB4xZ_rpo1pwWQd7YfKhPWsij1yHW8Rhzzkjqe2lE9UaUJ2S9ZjM/s800/menu4.gif) 0 -64px; padding: 8px 0 0 30px; }
HTML Code:
<div id="menu4"><ul><li><a rel="nofollow" href="#1">Link 1</a></li> <li><a rel="nofollow" href="#2">Link 2</a></li> <li><a rel="nofollow" href="#3">Link 3</a></li> <li><a rel="nofollow" href="#4">Link 4</a></li> <li><a rel="nofollow" href="#5">Link5</a></li> </ul></div>

CSS Code:
#menu6 ul { list-style: none; margin: 0; padding: 0; } #menu6 img { border: none; } #menu6 { width: 200px; margin: 10px; } #menu6 li a { font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; } #menu6 li a:link, #menu6 li a:visited { color: #FFF; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0xB3U4RIjyazZmmQNmkv3NpFYzG8pPyC1FeZIGfvjIsshJqajPRdLij_AS3LVHJGoig33LZ5sWL0F6eu43AudJ6YGU01uYH80asDbvl9akG9ScQVQj28KH7zuoG_AUycC69koy4CLhlA/s800/menu6.gif); padding: 8px 0 0 20px; } #menu6 li a:hover { color: #FFF; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0xB3U4RIjyazZmmQNmkv3NpFYzG8pPyC1FeZIGfvjIsshJqajPRdLij_AS3LVHJGoig33LZ5sWL0F6eu43AudJ6YGU01uYH80asDbvl9akG9ScQVQj28KH7zuoG_AUycC69koy4CLhlA/s800/menu6.gif) 0 -32px; padding: 8px 0 0 20px; }
HTML Code:
<div id="menu6"><ul><li><a rel="nofollow" href="#1">Link 1</a></li> <li><a rel="nofollow" href="#2">Link 2</a></li> <li><a rel="nofollow" href="#3">Link 3</a></li> <li><a rel="nofollow" href="#4">Link 4</a></li> <li><a rel="nofollow" href="#5">Link5</a></li> </ul></div>

5. Then, if you've finished, you can save now!

Loading Related Posts