CSS Secondary Navigation Menu for Blogger and Websites

An easy and perfect navigation menu isn’t important only for building a good site or blog structure for search engines, but an attractive menu makes your site and blog more beautiful in eyes of your visitors. If the primary navigation on your site or blog doesn't provide enough space for putting all links, then this secondary CSS menu will allow you to put a lot of links in it. You can put this menu in sidebar of your blog or website. Let's learn how to add this menu.

Adding Secondary CSS Menu to Blogger
To add this CSS secondary menu to your Blogger blog, follow below steps:

1. Sign in to Blogger, select your blog and go to its layout
2. Now add a gadget on sidebar as HTML/JavaScript by pasting below code in it

<style>
#column .subnav{display:block; width:230px; padding:25px; background-color:#F9F9F9; margin-bottom:30px;}

#column .subnav ul{
    margin:0;
    padding:0;
    list-style:none;
    }

#column .subnav li{
    margin:0 0 3px 0;
    padding:0;
    }

#column .subnav ul ul, #column .subnav ul ul ul, #column .subnav ul ul ul ul, #column .subnav ul ul ul ul ul{border-top:none; padding-top:0;}

#column .subnav a{
    display:block;
    margin:0;
    padding:5px 10px 5px 20px;
    color:#777777;
    background:url("http://qa.supportivehands.net/files/images/blue.gif") no-repeat 10px center #F9F9F9;
    text-decoration:none;
    border-bottom:1px dotted #666666;
    }

#column .subnav a:hover{color:#059BD8; background-color:#F9F9F9;}

#column .subnav ul ul a, #column .subnav ul ul ul a, #column .subnav ul ul ul ul a, #column .subnav ul ul ul ul ul a{background:url("http://qa.supportivehands.net/files/images/black.gif") no-repeat #F9F9F9;}
#column .subnav ul ul a{padding-left:40px; background-position:30px center;}
#column .subnav ul ul ul a{padding-left:50px; background-position:40px center;}
#column .subnav ul ul ul ul a{padding-left:60px; background-position:50px center;}
#column .subnav ul ul ul ul ul a{padding-left:70px; background-position:60px center;}
</style>
<div id='column'>
      <div class="subnav">
        <ul>
          <li><a href="#">Label1</a></li>
          <li><a href="#">Label2</a>
            <ul>
              <li><a href="#">Label3</a></li>
              <li><a href="#">Label4</a></li>
            </ul>
          </li>
          <li><a href='#'>Label5</a>
            <ul>
              <li><a href="#">Label6</a></li>
              <li><a href="#">Label7</a></li>
                  <li><a href="#">Label7</a></li>
                  <li><a href="#">Label8</a></li>
              </li>
            </ul>
          </li>
          <li><a href="#">Label9</a></li>
        </ul>
      </div>
</div>

3. Edit the links (#) and labels and save your gadget. You are all done!!

Adding Secondary CSS Menu to WordPress
To add this attractive navigation to your WordPress blog, sign in to its dashboard, go to Appearance section and choose Widgets

wordpress-widget-section

Then drag Text widget to sidebar. Paste above provided code in the box and save widget.

How to Add this CSS Menu to Your Static Website
Simply put a div in sidebar region of your webpage with above provided code. This will add this secondary CSS navigation to your website.

Need any help in customizing this navigation? Just leave a comment below. I’ll help you.

Labels: Widgets