jQuery Vertical Sidebar Navigation menu for your Blog or Website – Free package by iTg

So, after hours of work, I finally made this cool, jQuery powered CSS Sidebar navigation menu. Below is a screen shot of the Navigation Menu.

If you are not very much familiar with Web-Designing, then keep on reading to know how to implement this on your web-site/Blog.

Writing and understanding the CSS codes:

So, let us first start with the CSS. We are going to make the Navigation menu, using <ul><li> blocks. I have coded the whole CSS part in a simplified manner. Have a look below:

div.navigation {
    margin: 0 5px 0 0;
    padding: 5px 7px 5px 5px;
    background-color: #e8f3f8;
    float: left;
    width: 210px;
    border-right: 2px solid #30646D;
}

.navigation ul {
    width: 210px;
    position: relative; /*Relative to the containing division */
    z-index: 10; /*We need to adjust the z-index values in order to display the successive lists properly */
    background-color: #d9e2ea;
    border: 1px solid #81a8b8;
    border-bottom: 0px none;
    margin: 0;
    padding: 0;
    list-style: none; /* Removes the dots from the default Bullet styles */
    font-size: 14px;
    color: #3e3f3e;
}

.navigation ul li {
    text-align: right;
    position: relative;
    z-index: 12;
    margin: 0;
    padding: 9px 5px;
    border-bottom: 1px solid #81a8b8;
    width: 200px;
    font-weight: bold;
}

.navigation ul li span.dir {
    background: transparent url(../image/31.gif) no-repeat scroll center right;
    padding-right: 25px;
    cursor: pointer;
    display: block;
}

.navigation ul li:hover {
    background-color: #c2cbce;
    font-size: 15px;
}

.navigation ul li a {
    display: block;
    padding: 0;
    margin: 0 5px;;
    text-decoration: none;
    color: #3e3f3e;
    font-weight: bold;
    background-color: transparent;
    z-index: 15;
}

.navigation ul li ul {
    display: none;
    position: absolute;
    z-index: 15;
    top: -1px;
    left: 210px;
    margin: 0;
    text-align: left;
    width: 210px; /* Set the width of the successive list */
}

.navigation ul li ul li {
    text-align: left;
}

.navigation ul li:hover > ul {
    display: block;
}

So, we are going to use a <div> with class=”navigation” to write the Navigation menu is XHTML code. A detailed discussion on this is given on the next section.

Now, obviously we are going to use an external style-sheet for attaching this CSS file. Just upload the menu.css file under the css folder, to your web-server and note down the URL. Now attach the following link tag on your Web-site/Blog Template… [Obviously before the closing </head> tag]

<link type="text/css" rel="stylesheet" href="./css/menu.css" />

Do replace the href value with the one you have used!

Writing and Understanding the XHTML codes:

So, we have already included the CSS files that will design the Navigation menu. Now we need to write it using XHTML tags. Following are points that WE NEED TO REMEMBER:

• The wrapping <div> of the Navigation menu should have a class=”navigation”. If you wish to change it, then do modify the CSS part also.
• The <ul> under the the div.navigation does not need any class to be defined. But you can do this to override any of the styles you want!
• Do change the background colors and font-colors of the CSS part to blend with your site/theme.
• When you want to add some sub-category to a <li> Then inside it, write another tag… <span class=”dir”>Write Category Name HERE</span>; You can also add another <a>tag if you want. So either write like this:

  <li><span class="dir">Category 1</span>
      <ul>
          <li><a href="...">Sub-Category 1.1</a></li>
          <li><a href="...">Sub-Category 1.2</a></li>
      </ul>
  </li>
  

  or, like this

  <li><span class="dir"><a href="...">Category 1</a></span>
      <ul>
          <li><a href="...">Sub-Category 1.1</a></li>
          <li><a href="...">Sub-Category 1.2</a></li>
      </ul>
  </li>
  

Below is a sample XHTML code, to write the Navigation Menu.

<div class="navigation">
    <ul>
        <li><a href="...">Category 1</a></li>
        <li><span class="dir">Category 2</span>
            <ul>
                <li><a href="...">Sub-Category 2.1</a></li>
                <li><a href="...">Sub-Category 2.2</a></li>
            </ul>
        </li>
        <li><a href="...">Category 3</a></li>
    </ul>
</div>

I hope, this part was simple enough. If you face any problem, feel free to ask me through the comments.

Further Modifying with jQuery:

Now comes the fun part…

• First, we will attach the jQuery framework on the template. You can host it by yourself or also can let google host it for you. If you have any doubt, then read this article.
• Assuming, that you will let google to host the jQuery for you, just add the following script tag before the closing </head> tag.

  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
  

• Now we need to attach the mainmenu.js file into the template. Upload the file to your server, and then add it using the following tag. Make sure that it is written after including the jQuery Framework.

  <script type="text/javascript" src="./javascript/mainmenu.js"></script>
  

Now, you don’t need to do anything. If you have not changed any class of the XHTML tags, then you should now see a smooth dropdown effect on the Navigation menu.

So, that was a quick guide, to implement this on your website or blog. We will soon write a post, describing how to exclusively use this navigation menu on blogger templates. Till then, stay with us and keep enjoying. Do give your feedback on the design of this Navigation menu.

[box type=”info”] This post has been updated with better code representation and working download link. – 17/06/2012[/box]

You are free to use this nav-menu where-ever you want. If you wish, then do support us by giving a back link!