30 Vertical Menu

We head forward to a beautiful collection of some of the best looking vertical navigation menus that will put to anyone’s blog or website! I have made them compatible with Blogger. I hope this collection will be of interest to most of you simply because these navigation menu tabs can easily be installed, customized and multiplied! I hope it will be of great help to new designers :>

Prior to doing anything, if you are using a Template made through Blogger Template Designer, then you should consider doing these changes in the template, otherwise the menu might not be displayed correctly: From your Blogger Dashboard, go to Template (make a backup < see the screenshot)

How To Add A Vertical Navigation CSS Menu To Blogger?

Well the process is as simply as it can be. Simply follow these steps carefully,

1. Go To Blogger > Layout > Edit HTML

All Navigation Menus below uses two pieces of codes. One is The CSS code which is responsible for the look and feel of the menus and the second is the HTML code which is responsible for positioning the menus. So lets know where to add each code!

    2.   Paste the CSS code for your selected Menu just above ]]></b:skin>     3.   For the HTML code there can be two positions either your right sidebar or left sidebar. Depends how many columns you have.

• If you have a right sidebar then paste the HTML code just below <div id='sidebar-wrapper'>  or this <div id='sidebar-wrapper-right'>
• If you have a left sidebar then paste the HTML code just below <div id='sidebar-wrapper-left'>

Note :- Since most templates use different coding therefore if you could not find the above codes then don’t worry simply share your blog URL in the comment box and I will view your template coding and will tell you instantly which code to search for!

    5.    Finally save your template and see a beautiful Navigation Menu hanging on your sidebar :D

Editing The Links In The Navigation Menu

To change the Tab Menu Links and Titles, simply edit this bolded part of the HTML code,

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

Replace #1, #2, #3 etc with your Page Links/URL and replace Link1, Link2, Link3 etc with your Page Titles. If you wish to add or delete a tab then simply add or delete this line from the HTML code,

<li><a href="#" >Link</a></li>

For Live Demo of Navigation Menus Simply use our HTML Editor and Copy and Paste the CSS and HTML code at right areas and then start playing with the code :>>
See Demos With our SkgTricks HTML Editor!

Navigation Menu #1

  

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/AVvXsEhJzRk_m_gM4dgDEzeGkqHg5u0UDFjgVt2XTPoKanBb1I64B_83r-yokOTFdm0yDE0mMJ3b9nqyTJElprf1edgmOPYt5fjCDQY9AjIAmCkVGw0LUgKXBUgW-MJLnRxPnuqnJwsEt8hIUbs/s800/menu6.gif); padding: 8px 0 0 20px; } #menu6 li a:hover { color: #FFF; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJzRk_m_gM4dgDEzeGkqHg5u0UDFjgVt2XTPoKanBb1I64B_83r-yokOTFdm0yDE0mMJ3b9nqyTJElprf1edgmOPYt5fjCDQY9AjIAmCkVGw0LUgKXBUgW-MJLnRxPnuqnJwsEt8hIUbs/s800/menu6.gif) 0 -32px; padding: 8px 0 0 20px; }

HTML CODE:

<div id="menu6"> <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">Link5</a></li> </ul> </div>

Navigation Menu #2

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/AVvXsEiFPPN-608N1EDBTWt73rydmxcPHECo8Z_J0b0yGR7WPtBOiv-7zg3y8vGWa3N91jmHpJkCspWOihag6XNbTVZ5VAewh0DkSC8JgTdv_w1dFxq3iRunXNpnuiQ4221ZyRxawH5OBEo_wAg/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/AVvXsEiFPPN-608N1EDBTWt73rydmxcPHECo8Z_J0b0yGR7WPtBOiv-7zg3y8vGWa3N91jmHpJkCspWOihag6XNbTVZ5VAewh0DkSC8JgTdv_w1dFxq3iRunXNpnuiQ4221ZyRxawH5OBEo_wAg/s800/menu3.gif) 0 -32px; padding: 8px 0 0 30px; } HTML Code:
<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">Link5</a></li> </ul> </div>

Navigation Menu #3

CSS Code: 
#menu9 ul { list-style: none; margin: 0; padding: 0; } #menu9 img { border: none; } #menu9 { width: 200px; margin: 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: #FFF; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZfTnB0gWF4_z_BPG2wv8bj1j5iNrvt2ccyD_kMFNs2nmuZgd8DReZOPufS7rzdFbWkbjCOgVc8XdjnoyPHCcLyRhSnhg1Laai3url43xsn8wa-28fvfiRZCZL6MjYQyi-8cFjjgIxBCQ/s800/menu9.gif); padding: 8px 0 0 35px; } #menu9 li a:hover { color: #FFF; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZfTnB0gWF4_z_BPG2wv8bj1j5iNrvt2ccyD_kMFNs2nmuZgd8DReZOPufS7rzdFbWkbjCOgVc8XdjnoyPHCcLyRhSnhg1Laai3url43xsn8wa-28fvfiRZCZL6MjYQyi-8cFjjgIxBCQ/s800/menu9.gif) 0 -32px; padding: 8px 0 0 35px; } HTML Code:
<div id="menu9"> <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">Link5</a></li> </ul> </div>

Navigation Menu #4

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/AVvXsEh_Pc5OAukRaukyDaIHyAxR41t0S-R7-iNQqy18mY7qWjxSUmPS8sznutpe4KBQa0tUonUlxxSvoeThJPK4lVMEJql_8pAOdyZ4fJEfJgO4OPX3rty3dFMHXfBZZVpW1MubUHLTGVtCRYg/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/AVvXsEh_Pc5OAukRaukyDaIHyAxR41t0S-R7-iNQqy18mY7qWjxSUmPS8sznutpe4KBQa0tUonUlxxSvoeThJPK4lVMEJql_8pAOdyZ4fJEfJgO4OPX3rty3dFMHXfBZZVpW1MubUHLTGVtCRYg/s800/menu6.gif) 0 -32px; padding: 8px 0 0 10px; } HTML Code: 
<div id="menu6"> <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">Link5</a></li> </ul> </div>

Navigation Menu #5

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/AVvXsEhk1cmyDDZySzEvYISJdtHXsARE9LW11PYjVTqkbf2fWK-nvq4pqcj3kQeIRvtB77O0F0njS0jyya5Mv0mgWtCoAqfglwt2OdM7E6IcCxCcCIGNDffdmt0uuNN27rbo6cRqquWQT68KtYc/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/AVvXsEhk1cmyDDZySzEvYISJdtHXsARE9LW11PYjVTqkbf2fWK-nvq4pqcj3kQeIRvtB77O0F0njS0jyya5Mv0mgWtCoAqfglwt2OdM7E6IcCxCcCIGNDffdmt0uuNN27rbo6cRqquWQT68KtYc/s800/menu14.gif); padding: 8px 0 0 10px; } HTML Code: 
<div id="menu14"> <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">Link5</a></li> </ul> </div>

Navigation Menu #6

CSS Code: 
#menu7 ul { list-style: none; margin: 0; padding: 0; } #menu7 img { border: none; } #menu7 { width: 200px; margin: 10px; } #menu7 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; } #menu7 li a:link, #menu7 li a:visited { color: #FFF; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWPeLr0vM7YCxwd_65XcEhnKH82DA9X6-Bngj287y5qq_aerooNsXLnnAkdd0rOOJBDgNajoJhqCYAHc-XF2tLJ8hx-uYYOFWD6HcLd5GUUC1vWvzZU6NJEreQu3ZOzk_6jXh9rLppyW4/s800/menu7.gif); padding: 8px 0 0 30px; } #menu7 li a:hover { color: #FFF; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWPeLr0vM7YCxwd_65XcEhnKH82DA9X6-Bngj287y5qq_aerooNsXLnnAkdd0rOOJBDgNajoJhqCYAHc-XF2tLJ8hx-uYYOFWD6HcLd5GUUC1vWvzZU6NJEreQu3ZOzk_6jXh9rLppyW4/s800/menu7.gif) 0 -32px; padding: 8px 0 0 30px; } HTML Code: 
<div id="menu7"> <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">Link5</a></li> </ul> </div>

Navigation Menu #7

CSS Code: 
#menu2 ul { list-style: none; margin: 0; padding: 0; } #menu2 img { border: none; } #menu2 { width: 200px; border-style: solid solid none solid; border-color: #677D92; border-size: 1px; border-width: 1px; 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: #fff; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhaSXhKLYkX58MQGbY_dKIcxZV1pTotl8UVYpbbgK-1ZvDs4nQzHpvaQzozxyWVwatWvaiJPGkus108lytFW36AVfhG_pCy2_8vq9AHljyaqi4Y3JIfT9YdX1dyjKSrvtSwtcKcGNA_yTI/s800/menu2.gif); padding: 8px 0 0 10px; } #menu2 li a:hover, #menu2 li #current { color: #283A50; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhaSXhKLYkX58MQGbY_dKIcxZV1pTotl8UVYpbbgK-1ZvDs4nQzHpvaQzozxyWVwatWvaiJPGkus108lytFW36AVfhG_pCy2_8vq9AHljyaqi4Y3JIfT9YdX1dyjKSrvtSwtcKcGNA_yTI/s800/menu2.gif) 0 -32px; padding: 8px 0 0 10px; } #menu2 li a:active { color: #283A50; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhaSXhKLYkX58MQGbY_dKIcxZV1pTotl8UVYpbbgK-1ZvDs4nQzHpvaQzozxyWVwatWvaiJPGkus108lytFW36AVfhG_pCy2_8vq9AHljyaqi4Y3JIfT9YdX1dyjKSrvtSwtcKcGNA_yTI/s800/menu2.gif) 0 -64px; padding: 8px 0 0 10px; } HTML Code: 
<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">Link5</a></li> </ul> </div>

Navigation Menu #8

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/AVvXsEgcNuhO2B30dChkpFapsgKVKV3MyExduZ7JXGrTOKCEgov3AJ47hXcnq2cmnvtftddeoVFw5U02tCS-fOFKIHdaNBRXXJlP6Kn_pNtT7mIi4qJEG0v7Yu0UCotPG3lcO_h7Yq138eXTUHs/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/AVvXsEgcNuhO2B30dChkpFapsgKVKV3MyExduZ7JXGrTOKCEgov3AJ47hXcnq2cmnvtftddeoVFw5U02tCS-fOFKIHdaNBRXXJlP6Kn_pNtT7mIi4qJEG0v7Yu0UCotPG3lcO_h7Yq138eXTUHs/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/AVvXsEgcNuhO2B30dChkpFapsgKVKV3MyExduZ7JXGrTOKCEgov3AJ47hXcnq2cmnvtftddeoVFw5U02tCS-fOFKIHdaNBRXXJlP6Kn_pNtT7mIi4qJEG0v7Yu0UCotPG3lcO_h7Yq138eXTUHs/s800/menu9.gif) 0 -64px; padding: 8px 0 0 10px; } HTML Code: 
<div id="menu9"> <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">Link5</a></li> </ul> </div>

Navigation Menu #9

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/AVvXsEhuzXOGJnR_r0a9Cm13P4aXp6tZhRNDMycz1PcdGburDiGj0svolIhCDBkDUbQ1AOKBNmUfjNQxRkiuWgJJ2Lq3JzpWVk1IQBcfa_imM9cpt7XwFfNSWW1bvvpjTUJ9ovXNaG2Pq7gt18Q/s800/menu12.gif); padding: 10px 0 0 35px; } #menu12 li a:hover { color: #000; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuzXOGJnR_r0a9Cm13P4aXp6tZhRNDMycz1PcdGburDiGj0svolIhCDBkDUbQ1AOKBNmUfjNQxRkiuWgJJ2Lq3JzpWVk1IQBcfa_imM9cpt7XwFfNSWW1bvvpjTUJ9ovXNaG2Pq7gt18Q/s800/menu12.gif) 0 -32px; padding: 10px 0 0 35px; } HTML Code:
<div id="menu12"> <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">Link5</a></li> </ul> </div>

Navigation Menu #10

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/AVvXsEhh8evqWcdAKv-AAm9m5NUbg5cqMLRUvRWX8C79-Gu_apo-Baywck_Guwgc5py_mjrb8DI7FjzEPe04NBuWFjBgVFtSAXeMGVroqYmDEmn0VXNVXFosKMfVES059Pp8r5DhnVTtHwrqNfE/s800/menu13.gif); padding: 8px 0 0 10px; } #menu13 li a:hover { color: #C7377D; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhh8evqWcdAKv-AAm9m5NUbg5cqMLRUvRWX8C79-Gu_apo-Baywck_Guwgc5py_mjrb8DI7FjzEPe04NBuWFjBgVFtSAXeMGVroqYmDEmn0VXNVXFosKMfVES059Pp8r5DhnVTtHwrqNfE/s800/menu13.gif) 0 -32px; padding: 8px 0 0 10px; } HTML Code:
<div id="menu13"> <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">Link5</a></li> </ul> </div>

Navigation Menu #11

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/AVvXsEgwZ8cCLkdVvwxR-i2iEGg8Hsf9wOGr9byoezgk4qDXTeP5zD8iYUl43ujGwpKN6zsSFI85usM_VDFdBVg9jo5KYQ4JbtkqKKruKJ_KGz8Om7Y2dqc8zRVLl42Nr835pjMVVyEod-DF3I0/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/AVvXsEgwZ8cCLkdVvwxR-i2iEGg8Hsf9wOGr9byoezgk4qDXTeP5zD8iYUl43ujGwpKN6zsSFI85usM_VDFdBVg9jo5KYQ4JbtkqKKruKJ_KGz8Om7Y2dqc8zRVLl42Nr835pjMVVyEod-DF3I0/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/AVvXsEgwZ8cCLkdVvwxR-i2iEGg8Hsf9wOGr9byoezgk4qDXTeP5zD8iYUl43ujGwpKN6zsSFI85usM_VDFdBVg9jo5KYQ4JbtkqKKruKJ_KGz8Om7Y2dqc8zRVLl42Nr835pjMVVyEod-DF3I0/s800/menu4.gif) 0 -64px; padding: 8px 0 0 30px; } HTML Code:
<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">Link5</a></li> </ul> </div>

Navigation Menu #12

CSS Code: #navlist { color: white; background: #17a; border-bottom: 0.2em solid #17a; border-right: 0.2em solid #17a; padding: 0 1px; margin-left: 0; width: 12em; font: normal 10px Verdana, sans-serif; } #navlist li { list-style: none; margin: 0; font-size: 1em; } #navlist a { display: block; text-decoration: none; margin-bottom: 0.5em; margin-top: 0.5em; color: white; background: #39c; border-width: 1px; border-style: solid; border-color: #5bd #035 #068 #6cf; border-left: 1em solid #fc0; padding: 0.25em 0.5em 0.4em 0.75em; } #navlist a#current { border-color: #5bd #035 #068 #f30; } #navlist a { width: 99%; /* only necessary for Internet Explorer */ } #navlist a { voice-family: "\"}\""; voice-family: inherit; width: 9.6em; /* Tantek-hack should only used if Internet-Explorer 6 is in standards-compliant mode */ } #navcontainer>#navlist a { width: auto; /* only necessary if you use the hacks above for the Internet Explorer */ } #navlist a:hover, #navlist a#current:hover { background: #28b; border-color: #069 #6cf #5bd #fc0; padding: 0.4em 0.35em 0.25em 0.9em; } #navlist a:active, #navlist a#current:active { background: #17a; border-color: #069 #6cf #5bd white; padding: 0.4em 0.35em 0.25em 0.9em; } HTML Code: <div id="navcontainer"> <ul id="navlist"> <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">Link5</a></li> </ul> </div>

Navigation Menu #13

CSS Code: #menu8 ul { list-style: none; margin: 0; padding: 0; } #menu8 img { border: none; } #menu8 { width: 200px; margin-top: 10px; } #menu8 li a { text-decoration: none; height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; } #menu8 li a:link, #menu8 li a:visited { color: #777; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkHFye1w7yahIXvqaXVixbgTNxnqX_LeNMZ8rPzmTovb4sv4Z_uUPAnwESdEloMkVPYvRxqDxZ05BsBBUe2dh-fnQQgxPS8nMDwugVQzMCrp4Pln4cbohbGau4586SPRIyjK-cyd7qZKY/s800/menu8.gif); padding: 8px 0 0 20px; } #menu8 li a:hover, #menu8 li #current { color: #257EB7; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkHFye1w7yahIXvqaXVixbgTNxnqX_LeNMZ8rPzmTovb4sv4Z_uUPAnwESdEloMkVPYvRxqDxZ05BsBBUe2dh-fnQQgxPS8nMDwugVQzMCrp4Pln4cbohbGau4586SPRIyjK-cyd7qZKY/s800/menu8.gif) 0 -32px; padding: 8px 0 0 25px; } #menu8 li a:active { color: #fff; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkHFye1w7yahIXvqaXVixbgTNxnqX_LeNMZ8rPzmTovb4sv4Z_uUPAnwESdEloMkVPYvRxqDxZ05BsBBUe2dh-fnQQgxPS8nMDwugVQzMCrp4Pln4cbohbGau4586SPRIyjK-cyd7qZKY/s800/menu8.gif) 0 -64px; padding: 8px 0 0 25px; } HTML Code: <div id="menu8"> <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">Link5</a></li> </ul> </div>

Navigation Menu #14

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/AVvXsEgDLDWQyHWQh6TSuDggZdjhc3wz6GINIggTdPA7q5u9QqPF41hGGqiI7vr3OEtxLWsrhvsYUrIQiUDNM-hfa3DnQ9nuxrZYN2RTKBrh7VoNNplhIHeCXGJd8-_UhhcDcxJ2rb-KFE7kwxA/s800/menu8.gif) ; padding: 8px 0 0 20px; } #menu8 li a:hover { color: #474739; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDLDWQyHWQh6TSuDggZdjhc3wz6GINIggTdPA7q5u9QqPF41hGGqiI7vr3OEtxLWsrhvsYUrIQiUDNM-hfa3DnQ9nuxrZYN2RTKBrh7VoNNplhIHeCXGJd8-_UhhcDcxJ2rb-KFE7kwxA/s800/menu8.gif) 0 -32px; padding: 8px 0 0 20px; } HTML Code: <div id="menu8"> <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">Link5</a></li> </ul> </div>

Navigation Menu #15

CSS Code: #menu9 body { font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; } #menu1 ul { list-style: none; margin: 0; padding: 0; } #menu1 img { border: none; } #menu1 { width: 200px; margin: 10px; border-style: solid solid none solid; border-color: #3D261D; border-size: 1px; border-width: 1px; } #menu1 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; } #menu1 li a:link, #menu1 li a:visited { color: #E4D6CD; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbi51mIIHQ5wry1pPMGMYmx2T4nPCW0sAITwROsYiVoA5zlpuaPP1iUM-JX1a5Or2sT8__eL5K55E-nSE6Ntu-2a_Xld1U0U4bGD2GgwWspfERxGCz4bzgZFNMeVmAPEIsB8mzZ_yZiA4/s800/menu1.gif); padding: 8px 0 0 10px; } #menu1 li a:hover { color: #FFF; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbi51mIIHQ5wry1pPMGMYmx2T4nPCW0sAITwROsYiVoA5zlpuaPP1iUM-JX1a5Or2sT8__eL5K55E-nSE6Ntu-2a_Xld1U0U4bGD2GgwWspfERxGCz4bzgZFNMeVmAPEIsB8mzZ_yZiA4/s800/menu1.gif) 0 -32px; padding: 8px 0 0 10px; } HTML Code: <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">Link5</a></li> </ul> </div>

Navigation Menu #16

CSS Code: #navcontainer { background: #f0e7d7; width: 30%; margin: 0 auto; padding: 1em 0; font-family: georgia, serif; font-size: 13px; text-align: center; text-transform: lowercase; } ul#navlist { text-align: left; list-style: none; padding: 0; margin: 0 auto; width: 70%; } ul#navlist li { display: block; margin: 0; padding: 0; } ul#navlist li a { display: block; width: 100%; padding: 0.5em 0 0.5em 2em; border-width: 1px; border-color: #ffe #aaab9c #ccc #fff; border-style: solid; color: #777; text-decoration: none; background: #f7f2ea; } #navcontainer>ul#navlist li a { width: auto; } ul#navlist li#active a { background: #f0e7d7; color: #800000; } ul#navlist li a:hover, ul#navlist li#active a:hover { color: #800000; background: transparent; border-color: #aaab9c #fff #fff #ccc; } HTML Code: <div id="navcontainer"> <ul id="navlist"> <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">Link5</a></li> </ul> </div>

Navigation Menu #17

CSS Code: #menu3 ul { list-style: none; margin: 0; padding: 0; } #menu3 img { border: none; } #menu3 { width: 200px; margin: 10px; border-style: solid solid none solid; border-color: #BCD2E6; border-size: 1px; border-width: 1px; } #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: #8BADCF; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQAiqYeY6vXIF8OTYU1yguZeEc4d5VPPVWRVUHJT10eXlCAoYF2R5WqmyQVIaRbzhqqKrgZCCL2cW2nNkC42bSMDD6wVagBpG71sFcxsyOKcMw32h49ToYHIoVDFk3sPgVtTkrkslcA9g/s800/menu3.gif); padding: 8px 0 0 10px; } #menu3 li a:hover { color: #627EB7; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQAiqYeY6vXIF8OTYU1yguZeEc4d5VPPVWRVUHJT10eXlCAoYF2R5WqmyQVIaRbzhqqKrgZCCL2cW2nNkC42bSMDD6wVagBpG71sFcxsyOKcMw32h49ToYHIoVDFk3sPgVtTkrkslcA9g/s800/menu3.gif) 0 -32px; padding: 8px 0 0 10px; } HTML Code: <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">Link5</a></li> </ul> </div>

Navigation Menu #18

CSS Code: #menu11 ul { list-style: none; margin: 0; padding: 0; } #menu11 img { border: none; } #menu11 { width: 200px; margin: 10px; border-style: solid solid none solid; border-color: #889944; border-size: 1px; border-width: 1px; } #menu11 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; } #menu11 li a:link, #menu11 li a:visited { color: #889944; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhygqLFwdvoTg4XorFSFeiBu7pp596EsGDeOscjV3XWnx8hYSdl9H1ZcTaPc-YsTpL3AcOeAHJkfCXY0WGGVf3PdWBSfnvR1uyJJ7QELM6T-r5iMu_FoejucqycU6zCxkA67y2Et_69W74/s400/menu11.gif); padding: 8px 0 0 25px; } #menu11 li a:hover { color: #889944; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhygqLFwdvoTg4XorFSFeiBu7pp596EsGDeOscjV3XWnx8hYSdl9H1ZcTaPc-YsTpL3AcOeAHJkfCXY0WGGVf3PdWBSfnvR1uyJJ7QELM6T-r5iMu_FoejucqycU6zCxkA67y2Et_69W74/s400/menu11.gif) 0 -32px; padding: 8px 0 0 27px; } HTML Code: <div id="menu11"> <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">Link5</a></li> </ul> </div>

Navigation Menu #19

CSS Code: #button { width: 12em; border-right: 1px solid #000; padding: 0 0 1em 0; margin-bottom: 1em; font-family: Tahoma, Arial, sans-serif; /*'Trebuchet MS', 'Lucida Grande', Verdana, Arial, sans-serif;*/ font-size : 10px; background-color: #90bade; color: #333; } #button ul { list-style: none; margin: 0; padding: 0; border: none; } #button li { border-bottom: 1px solid #90bade; margin: 0; list-style: none; list-style-image: none; } #button li a { display: block; padding: 5px 5px 5px 0.5em; border-left: 10px solid #1958b7; border-right: 10px solid #508fc4; background-color: #2175bc; color: #fff; text-decoration: none; width: 100%; } html>body #button li a { width: auto; } #button li a:hover { border-left: 10px solid #1c64d1; border-right: 10px solid #5ba3e0; background-color: #2586d7; color: #fff; } #button li #active { border-left: 10px solid #1c64d1; border-right: 10px solid #5ba3e0; background-color: #2586d7; color: #fff; } HTML Code: <div id="button"> <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">Link5</a></li> </ul> </div>

Navigation Menu #20

CSS Code: #menu ul { list-style: none; margin: 0; padding: 0; } #menu img { border: none; } #menu { width: 200px; border-style: solid solid none solid; border-color: #94AA74; border-size: 1px; border-width: 1px; margin: 10px; } #menu 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; } #menu li a:link, #menu li a:visited { color: #5E7830; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiflQo_SEJreawkO7Z9aj3WTcZQ76jvHaINjE_7mr0aSfiR7ebpY413zHjvIWWFUQbt7nXidAy0A3U5cmg8F5UVjnWzY-PWdTXkeY0xic9NQbwt26ODiTRAXVZuTujAryNLDhmNo0rgm1U/s800/menu1.gif); padding: 8px 0 0 10px; } #menu li a:hover, #menu li #current { color: #26370A; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiflQo_SEJreawkO7Z9aj3WTcZQ76jvHaINjE_7mr0aSfiR7ebpY413zHjvIWWFUQbt7nXidAy0A3U5cmg8F5UVjnWzY-PWdTXkeY0xic9NQbwt26ODiTRAXVZuTujAryNLDhmNo0rgm1U/s800/menu1.gif) 0 -32px; padding: 8px 0 0 10px; } #menu li a:active { color: #26370A; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiflQo_SEJreawkO7Z9aj3WTcZQ76jvHaINjE_7mr0aSfiR7ebpY413zHjvIWWFUQbt7nXidAy0A3U5cmg8F5UVjnWzY-PWdTXkeY0xic9NQbwt26ODiTRAXVZuTujAryNLDhmNo0rgm1U/s800/menu1.gif) 0 -64px; padding: 8px 0 0 10px; } HTML Code: <div id="menu"> <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">Link5</a></li> </ul> </div>

Navigation Menu #21

CSS Code: #menu2 ul { list-style: none; margin: 0; padding: 0; } #menu2 img { border: none; } #menu2 { width: 200px; margin: 10px; border-style: solid solid none solid; border-color: #D8D5D1; border-size: 1px; border-width: 1px; } #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: #3688BA; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgb4IrH6p6-wSch_1xpkdj_XXApTZ-w9fFWIb9nsabYOd4AQpk_a8-BBYnkkxY6K2mA4bqWGJJm1SFbdKNjnac623-PGAasZvA4NL6zbgAJH_THzsqll-DTZ6pEU9jRUMwna4tBEGxOBto/s800/menu2.gif); padding: 8px 0 0 30px; } #menu2 li a:hover { color: #3688BA; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgb4IrH6p6-wSch_1xpkdj_XXApTZ-w9fFWIb9nsabYOd4AQpk_a8-BBYnkkxY6K2mA4bqWGJJm1SFbdKNjnac623-PGAasZvA4NL6zbgAJH_THzsqll-DTZ6pEU9jRUMwna4tBEGxOBto/s800/menu2.gif) 0 -32px; padding: 8px 0 0 32px; } HTML Code: <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">Link5</a></li> </ul> </div>

Navigation Menu #22

CSS Code: #menu5 ul { list-style: none; margin: 0; padding: 0; } #menu5 img { border: none; } #menu5 { width: 200px; border-style: none solid none solid; border-color: #D0D0D0; border-width: 1px; 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: #777; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCk7vtH-o4Khn1CGqIHb3Cb5e4-NoHbFw60kLrrPiWalkKjwHydXei81Kt7zRwCxfi0uXONeynV2cg7iGSvG7zJRDQKtGO_xadtL-xHKAwIoPvcRS8Iw28dGn7jWQbA8Sv1mn7zj1U0RI/s800/menu5.gif); padding: 8px 25px 0 10px; text-align: right; } #menu5 li a:hover, #menu5 li #current { color: #fff; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCk7vtH-o4Khn1CGqIHb3Cb5e4-NoHbFw60kLrrPiWalkKjwHydXei81Kt7zRwCxfi0uXONeynV2cg7iGSvG7zJRDQKtGO_xadtL-xHKAwIoPvcRS8Iw28dGn7jWQbA8Sv1mn7zj1U0RI/s800/menu5.gif) 0 -32px; padding: 8px 25px 0 10px; text-align: right; } #menu5 li a:active { color: #fff; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCk7vtH-o4Khn1CGqIHb3Cb5e4-NoHbFw60kLrrPiWalkKjwHydXei81Kt7zRwCxfi0uXONeynV2cg7iGSvG7zJRDQKtGO_xadtL-xHKAwIoPvcRS8Iw28dGn7jWQbA8Sv1mn7zj1U0RI/s800/menu5.gif) 0 -64px; padding: 8px 25px 0 10px; text-align: right; } HTML Code: <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">Link5</a></li> </ul> </div>

Navigation Menu #23

CSS Code: #menu5 ul { list-style: none; margin: 0; padding: 0; } #menu5 img { border: none; } #menu5 { width: 200px; 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: #FFF; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgR82e33617zvK_jl58SLT3JL9VdoNe5j-FtyRoeHwYgZ-RL5nxys054BCAxRGRZTiuWV0doe2lkX4tT_aBnY3PAYnxgd5vRdrGjMUeyQ-jFOKSRF1vEeF-RygaEL0ejsrWV33-D0NGjN4/s800/menu5.gif); padding: 8px 0 0 10px; } #menu5 li a:hover { color: #FFF; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgR82e33617zvK_jl58SLT3JL9VdoNe5j-FtyRoeHwYgZ-RL5nxys054BCAxRGRZTiuWV0doe2lkX4tT_aBnY3PAYnxgd5vRdrGjMUeyQ-jFOKSRF1vEeF-RygaEL0ejsrWV33-D0NGjN4/s800/menu5.gif) 0 -32px; padding: 8px 0 0 10px; } HTML Code: <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">Link5</a></li> </ul> </div>

Navigation Menu #24

  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/AVvXsEjVlJ-q4NcyQMbHCiCvvVWVrIIPUd9JgjSOP5zV0pLewgAycRQOJKgAECZmkpkILxiXLYKPOxclkw-4BPvJ1A-8pzEuNYpPLlXszYdnxDWA3KO5IBW4SHEQqLrYxlDyYarFKUSBL2X49-M/s800/menu4.gif); padding: 8px 0 0 10px; } #menu4 li a:hover { color: #FFF; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVlJ-q4NcyQMbHCiCvvVWVrIIPUd9JgjSOP5zV0pLewgAycRQOJKgAECZmkpkILxiXLYKPOxclkw-4BPvJ1A-8pzEuNYpPLlXszYdnxDWA3KO5IBW4SHEQqLrYxlDyYarFKUSBL2X49-M/s800/menu4.gif) 0 -32px; padding: 8px 0 0 10px; } HTML Code: <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">Link5</a></li> </ul> </div>

Navigation Menu #25

CSS Code: #menu10 ul { list-style: none; margin: 0; padding: 0; } #menu10 img { border: none; } #menu10 { width: 200px; margin: 10px; } #menu10 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; } #menu10 li a:link, #menu10 li a:visited { color: #4D4D4D; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbva8ecF-xHDhyphenhyphenmVmWD2mLEhJoxhTbO2hSrRmdCI_hm8uHalLI_w5Uwk0EKun5T99vSr0uku8zz8viVCBlMXJHsDka994FcH8peFGxWI3Tp0nbdNe18zfyWxUn_RrDHHLxjVgFXcZlb3k/s800/menu10.gif); padding: 8px 0 0 10px; } #menu10 li a:hover { color: #FF9834; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbva8ecF-xHDhyphenhyphenmVmWD2mLEhJoxhTbO2hSrRmdCI_hm8uHalLI_w5Uwk0EKun5T99vSr0uku8zz8viVCBlMXJHsDka994FcH8peFGxWI3Tp0nbdNe18zfyWxUn_RrDHHLxjVgFXcZlb3k/s800/menu10.gif) 0 -32px; padding: 8px 0 0 10px; } HTML Code: <div id="menu10"> <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">Link5</a></li> </ul> </div> That’s All! Hope you have enjoyed the post. Feel free to ask any question related to these navigation menus. I am happy I fulfilled my promise of publishing this post :>

Continue Reading...

Add New Beautiful Blue Vertical Menu to Blogger

Posts RSS

The following drop down menu is made with the CSS, this is the Blue Vertical beautiful and Stylist menu for Blogger. You can also use this vertical menu in any Html Page of that your wish.

Prior to doing anything, if you are using a Template made through Blogger Template Designer, then you should consider doing these changes in the template, otherwise the menu might not be displayed correctly:

From your Blogger's Dashboard, go to Template (make a backup < see the screenshot) > Edit HTML:

How to add the Blue Vertical Menu to Blogger Blogs :-

Follow my below simple steps to add it your blogger Blog :-

• Login to Blogger  >> Click on drop down menu >>then select "Template".
• Now you will see  "EDIT HTML" Button ,Click on it >>  and then click Proceed button .
• Now find this tag    ]]></b:skin> by using CTRL + F 

• Paste below code Just above ]]></b:skin> tag  and Save the Template.

ul#SkgtricksMENU,ul#SkgtricksMENU ul{
margin:0;list-style:none;padding:0;background-color:#424542;border-width:2px;border-style:solid;border-color:#FFF;-moz-border-radius:7px;-webkit-border-radius:7px;border-radius:7px;}
ul#SkgtricksMENU ul{
display:none;position:absolute;top:0;-moz-box-shadow:3.5px 3.5px 5px #000000;-webkit-box-shadow:3.5px 3.5px 5px #000000;box-shadow:3.5px 3.5px 5px #000000;border-radius:7px;-moz-border-radius:7px;-webkit-border-radius:7px;padding:0 0px 0px;}
ul#SkgtricksMENU li:hover>*{
display:block;}
ul#SkgtricksMENU li{
position:relative;display:block;white-space:nowrap;font-size:0;}
ul#SkgtricksMENU li:hover{
z-index:1;}
ul#SkgtricksMENU{
font-size:0;z-index:999;position:relative;display:block;float:right;padding:0 0px 0px;}
ul#SkgtricksMENU>li{
margin:3px 0 0;}
ul#SkgtricksMENU a:active, ul#SkgtricksMENU a:focus{
outline-style:none;}
ul#SkgtricksMENU a{
display:block;vertical-align:middle;text-align:center;;text-decoration:none;font:14px Trebuchet MS;color:#FFF;cursor:pointer;padding:10px;background-color:#424542;background-image:none;background-repeat:repeat;border-width:1px 0 0 0;border-style:solid;border-color:#424542;border-radius:4px;-moz-border-radius:4px;-webkit-border-radius:4px;}
ul#SkgtricksMENU ul li{
float:none;margin:3px 0 0;}
ul#SkgtricksMENU ul a{
text-align:center;;border-radius:4px;-moz-border-radius:4px;-webkit-border-radius:4px;-moz-transition:all 0.5s;-webkit-transition:all 0.5s;-o-transition:all 0.5s;color:#FFF;text-decoration:none;}
ul#SkgtricksMENU li:hover>a,ul#SkgtricksMENU li a.pressed{
background-color:#00aaff;border-color:#424542;border-style:solid;color:#000;background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAABkCAYAAABHLFpgAAAAAXNSR0IArs4c6QAAAAZiS0dEAAAAAAAA+UO7fwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9oJGA8fEDx90S8AAABXSURBVBjTxY1BDoAgDASHRV/vhwHRemtSAsabl8l0t2kxs0NAF3AKqAJKtLLKasyaj82PdgGXgFuACZCA7Ngc+8S2uDfYAEXkybehTT6mFd7bDyDav3gA6ogaOZY0Sc8AAAAASUVORK5CYII=");text-decoration:none;}
ul#SkgtricksMENU span{
display:block;overflow:visible;background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA+gAAAAFCAYAAADWkcYlAAAAAXNSR0IArs4c6QAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9wBFwsaEPhJNTwAAABfSURBVHja7dqxDQAxDAMxOfvv7G9iIAt80pAjqDtA1d3ZOkmqqgIAAAD8qneQT4evM86TiHMAAAC4YMJ8Qn2JcwAAAHgf6esI8zYNAAAA3HPe3OfiLtIBAADgUZwnyQeivhwKKt7BhQAAAABJRU5ErkJggg==");background-position:left center;background-repeat:no-repeat;}
ul#SkgtricksMENU ul li:hover>a,ul#SkgtricksMENU ul li a.pressed{
color:#000;text-decoration:none;}
ul#SkgtricksMENU li.topfirst>a{
border-width:0;}
ul#SkgtricksMENU li.subfirst>a{
border-width:0;}

MENU CODE

Now we can  use below code to add menu any where we want. you can add it as HTML WIDGET in blogger layout,But i will  Recommend You to Replace this menu code in your Blogger Template with already existing one., or add below code before or after already existing one menu code.

Login to Blogger  >> Click on drop down >> Now select "Layout"
Now you will see "Add a Gadget" button click any of them

• A new window will open .Scroll some down until you see " HTML/JavaScript" Button.
• Click on " HTML/JavaScript" Button ,leave the Title blank and Put the below code in Content and then after click on save button.

<ul id="SkgTricksMENU" class="topmenu">
<li class="topfirst"><a href="http://www.Skgtricks.com/>SkgTricks Menu</a></li>
<li class="topmenu"><a href="http://www.Skgtricks.com/>SkgTricks Menu</a></li>
<ul>
<li class="subfirst"><a href="http://www.Skgtricks.com/>SkgTricks Menu</a></li>
<li><a href="http://www.Skgtricks.com/>SkgTricks Menu</a></li>
<li><a href="http://www.Skgtricks.com/>SkgTricks Menu</a></li>
</ul></li>
<li class="topmenu"><a href="http://www.Skgtricks.com/>SkgTricks Menu</a></li>

Customization

- replace the text in blue and Green with your links and titles.
- if you need more tabs, then add a line like this just above 


Now all done if have any question or Problem according to this Menu then Comment below

Continue Reading...