Elegant Jquery Vertical Menu Accordion for Blogger

Vertical menu has very important function in order to help the users to find content that are relevant. For some other users, they more like to navigate the content using vertical menu than use horizontal menu. Making the vertical menu that more interesting can be the most preferred and make a comfort the user to navigate the content that they want. In some case I personally prefer the vertical menu the label cloud that looks less structured and make boring, does it not?

Creating the vertical menu accordion using jquery make the vertical menu looks so elegant and interesting for the users appropriately. You can look in details about this to the vertical menu in this blog. But i must say any something less here to make vertical menu like this is about the links and menu item is made manually, not like the labels in blog that created automatically according to the label that you have in the post content.

We going to begin the process of creating the elegant jquery vertical accordion menu immediately :

1. Go to the blogger dashboard, click on Template>Edit HTML. On the script code of your template, press Ctrl+F and type code like this ]]></b:skin>, we are going to insert the css style script for vertical menu accordion at last of the template skin. Look at the picture and css style script below!

CSS Style Script Code for Elegant Vertical Menu Accordion :

.art-menublock 
{
   width: auto;
   margin-top: 2px;
   margin-left: 7px;
   margin-bottom:7px;
   border: 1px solid #343434;
}
.menu {
 width: auto;
 height: auto;
 background: #292929;
 background: -webkit-linear-gradient(top, #292929, #343434);
 background: -moz-linear-gradient(top, #292929, #343434);
 background: -ms-linear-gradient(top, #292929, #343434);
 background: -o-linear-gradient(top, #292929, #343434);
 background: linear-gradient(top, #292929, #343434);
}
.menu > li > a {
 filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#848484', EndColorStr='#5b5b5b');
 border-top: 1px solid #4D4D4D;
 border-bottom: 1px solid #1A1A1A;
 background: #292929;
 background: -webkit-linear-gradient(top, #292929, #343434);
 background: -moz-linear-gradient(top, #292929, #343434);
 background: -ms-linear-gradient(top, #292929, #343434);
 background: -o-linear-gradient(top, #292929, #343434);
 background: linear-gradient(top, #292929, #343434);
 width: 100%;
 height: 2.75em;
 line-height: 2.75em;
 text-indent: 2.75em;
 display: block;
 position: relative;
 font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
 font-weight: 600;
 color: #fff;
 text-shadow: 0px 1px 0px rgba(0,0,0,.5);
    text-decoration: none;
}
.menu ul li a {
 background: #fff;
 border-bottom: 1px solid #efeff0;
 width: 100%;
 height: 2.75em;
 line-height: 2.75em;
 text-indent: 2.75em;
 display: block;
 position: relative;
 font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
 font-size: 0.923em;
 font-weight: 400;
 color: #878d95;
}
.menu ul li:last-child a {
 border-bottom: 1px solid #fff;
}
.menu > li > a:hover, .menu > li > a.active {
 border-top: 1px solid #5B2D2D;
 border-bottom: 1px solid #2D1414;
 background: #381919;
 background: -webkit-linear-gradient(top, #381919, #421C1C);
 background: -moz-linear-gradient(top, #381919, #421C1C);
 background: -ms-linear-gradient(top, #381919, #421C1C);
 background: -o-linear-gradient(top, #381919, #421C1C);
 background: linear-gradient(top, #381919, #421C1C);
}
.menu > li > a.active {
 border-bottom: 1px solid #331212;
}
.menu > li > a:before {
 font-size: 36px;
 height: 1em;
   width: 1em;
 position: absolute;
   left: 0;
 top: 50%;
 margin: -.5em auto; 
}
.item1 > a:before {
 background-position: 0 0;
}
.item2 > a:before {
 background-position: -38px 0;
}
.item3 > a:before {
 background-position: 0 -38px;
}
.item4 > a:before {
 background-position: -38px -38px;
}
.item5 > a:before {
 background-position: -76px 0;
}
.menu > li > a span {
 font-size: 0.857em; 
 display: inline-block;
 position: absolute;
 right: 1em;
 top: 50%; 
 background: #48515c;
 line-height: 1em;
 height: 1em;
 padding: .4em .6em;
 margin: -.8em 0 0 0; 
 color: #fff;
 text-indent: 0;
 text-align: center;
 border-radius: 5px;
 -webkit-box-shadow: inset 0px 1px 3px 0px rgba(0, 0, 0, .26), 0px 1px 0px 0px rgba(255, 255, 255, .15);
 -moz-box-shadow: inset 0px 1px 3px 0px rgba(0, 0, 0, .26), 0px 1px 0px 0px rgba(255, 255, 255, .15);
 box-shadow: inset 0px 1px 3px 0px rgba(0, 0, 0, .26), 0px 1px 0px 0px rgba(255, 255, 255, .15);
 text-shadow: 0px 1px 0px rgba(0,0,0,.5);
 font-weight: 500;
}
.menu > li > a:hover span, .menu > li a.active span {
background: #9C7B3E;
}
.menu > li > ul li a:before{
 content: url('http://agratitudesign-template.googlecode.com/svn/branches/vmenusubitemicon.png');
 font-size: 8px;
 color: #bcbcbf;
 position: absolute;
 width: 1em;
 height: 1em;
 top: 0;
 left: -2.7em;
}
.menu > li > ul li:hover a,
.menu > li > ul li:hover a span,
.menu > li > ul li:hover a:before {
 color: #32373D;
}
.menu ul > li > a span {
 font-size: 0.857em; 
 display: inline-block;
 position: absolute;
 right: 1em;
 top: 50%; /
 background: #fff;
 border: 1px solid #d0d0d3;
 line-height: 1em;
 height: 1em;
 padding: .4em .7em;
 margin: -.9em 0 0 0; 
 color: #878d95;
 text-indent: 0;
 text-align: center;
 border-radius: 5px;
 text-shadow: 0px 0px 0px rgba(255,255,255,.01));
}

2. Your template must use Jquery Library, that is jquery.min.js,  press Ctrl+F and just type “min.js”  just make sure your template already has jquery.min.js. If you already found it just put the jquery script code for vertical menu accordion below it. However if you not found it, try to find the last head of the template, Ctrl+F again and type </head> then put the jquery script code included jquery.min.js. just before </head>.  Look at the picture and script code below!

Jquery script code for vertical menu accordion:

<script src='http://agratitudesign.googlecode.com/svn/trunk/jquery-1.7.min.js' type='text/javascript'/>

<script type="text/javascript">
 $(function() { 
     var menu_ul = $('.menu > li > ul'),
            menu_a  = $('.menu > li > a');     
     menu_ul.hide(); 
     menu_a.click(function(e) {
         e.preventDefault();
         if(!$(this).hasClass('active')) {
             menu_a.removeClass('active');
             menu_ul.filter(':visible').slideUp('normal');
             $(this).addClass('active').next().stop(true,true).slideDown('normal');
         } else {
             $(this).removeClass('active');
             $(this).next().stop(true,true).slideUp('normal');
         }
     }); 
 });
</script>

3. The last is going to insert the html script code through the html/javascript gadget on your blog. On the main menu of your dashboard click on Layout and add a gadget on the layout sidebar. On the basic gadget select html/javascript gadget and put the html script code for vertical menu accordion here! 

The html script code vertical menu accordion :

<div class='art-menublock '>
 <ul class='menu'>
  <li class='item1'><a href='http://agratitudesign.blogspot.com/'>Home </a>
   <ul>
    <li class='subitem1'><a href='http://agratitudesign.blogspot.com/'>Main Page <span>90</span></a></li>   
   </ul>
  </li>
  <li class='item2'><a href='http://agratitudesign.blogspot.com/search/label/Graphic%20Design?max-results=6'>Graphic Design <span>13</span></a>
   <ul>
    <li class='subitem1'><a href='http://agratitudesign.blogspot.com/search/label/Basic?max-results=6'>Basic <span>2</span></a></li>
    <li class='subitem2'><a href='http://agratitudesign.blogspot.com/search/label/Photoshop?max-results=6'>Adobe Photoshop <span>6</span></a></li>
    <li class='subitem3'><a href='http://agratitudesign.blogspot.com/search/label/Corel%20Draw?max-results=6'>Corel Draw <span>1</span></a></li>
   </ul>
  </li>
  <li class='item3'><a href='http://agratitudesign.blogspot.com/search/label/Web%20Design?max-results=6'>Web Design <span>43</span></a>
   <ul>
    <li class='subitem1'><a href='http://agratitudesign.blogspot.com/search/label/General?max-results=6'>General <span>4</span></a></li>
    <li class='subitem2'><a href='http://agratitudesign.blogspot.com/search/label/Joomla?max-results=6'>Joomla <span>12</span></a></li>
    <li class='subitem3'><a href='http://agratitudesign.blogspot.com/search/label/Blog%20Note?max-results=6'>Blog Note <span>19</span></a></li>
    <li class='subitem3'><a href='http://agratitudesign.blogspot.com/search/label/Fix%20Problem?max-results=6'>Fix Problem <span>8</span></a></li>
   </ul>
  </li>
  <li class='item4'><a href='http://agratitudesign.blogspot.com/search/label/Experience?max-results=6'>Experience <span>18</span></a>
   <ul>
    <li class='subitem1'><a href='http://agratitudesign.blogspot.com/search/label/Computer?max-results=6'>Computer <span>6</span></a></li>
    <li class='subitem2'><a href='http://agratitudesign.blogspot.com/search/label/Printer?max-results=6'>Printer <span>3</span></a></li>
    <li class='subitem3'><a href='http://agratitudesign.blogspot.com/search/label/Network?max-results=6'>Network <span>9</span></a></li>
   </ul>
  </li>
  <li class='item5'><a href='http://agratitudesign.blogspot.com/search/label/Balinese?max-results=6'>Balinese Culture <span>12</span></a>
   <ul>
    <li class='subitem1'><a href='http://agratitudesign.blogspot.com/search/label/Balinese%20Temple?max-results=6'>Balinese Temples <span>4</span></a></li>
    <li class='subitem2'><a href='http://agratitudesign.blogspot.com/search/label/Balinese%20Moment?max-results=6'>Balinese Moment <span>5</span></a></li>
    <li class='subitem3'><a href='http://agratitudesign.blogspot.com/search/label/Bali%20Exciting?max-results=6'>Bali Exciting <span>3</span></a></li>
   </ul>
  </li>
  <li class='item6'><a href=''>About Us <span>2</span></a>
   <ul>
    <li class='subitem1'><a href='http://agratitudesign.blogspot.com/2013/05/agratitudesign.html'>About Us <span>1</span></a></li>
    <li class='subitem1'><a href='http://agratitudesign.blogspot.com/2013/05/contact-form-agratitudesign.html'>Contact Us <span>1</span></a></li>
   </ul>
  </li>
  <li class='item6'><a href='http://agratitudesign.blogspot.com/2013/04/blog-post.html'>Sitemap </a>
   <ul>
    <li class='subitem1'><a href='http://agratitudesign.blogspot.com/2013/05/agratitudesign.html'>Sitemap <span>1</span></a></li> 
   </ul>
  </li>
 </ul>
</div>

Attention: here you must change the links and menu and submenu items of the html script code, it depends on your blog requirement of the vertical menu that you need.

vertical menu accordion may inherited the sidebar css style of your template,  in some other template the vertical menu may displayed a little bit different depending on how much you give the style of your sidebar, I think you need to adjust the css style on your sidebar. For more clearly, you can see on the article video! Good Luck!