Graphic Motion Video Art, Website, IT Network, Culture

Loading...
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!

Share This Article :
Related Articles

10 comments :

  1. Hi I am every time posting this code in Html edit but in my blog its not working,the code every time shows saving but if I try to find it again in my code,its not there.Can U tell me Y?

    ReplyDelete
    Replies
    1. what kind of code that is in problem, javascript?

      Delete
    2. Sry,Actually it didnt worked Yesterday,but 2dy morning I thoughted to try once again and it worked,the code posted and also saved.Thankyou for this code.But 2dy I faced other Problem.The sentences in my Vertical menu are longer like"Places to visit in Europe"like that.But it shows 2 words in my menu remaining invisible.So I tried to increase the width,My blog looked ugly.So plz suggests me Wt to do? Where to change?

      Delete
    3. does it leave a lot of space, or is already full by font size that used ? I suggest you to change the font size being smaller, especially for CSS class : .menu > li > a, the rest try to change the css script code as a whole

      Delete
  2. Salam kenal bli.

    Saya sudah coba mengikuti langkah-langkah yang bli tulis di atas. Semua jalan dengan baik. Kecuali counter untuk postingan di menu dan submenu. Apakah ada yang kurang atau salah dengan script jquery saya? Mohon bantuanya.

    Matur suksma :)

    ReplyDelete
    Replies
    1. Tidak ada yang salah, sementara memang masih dibuat manual, tidak seperti widget label dari standard blogger. Saya belum menemukan cara untuk membuatnya automatis. Sambil memikirkan solusinya sementara dibuat manual seperti script htmlnya!

      Delete
  3. hello,
    Thank you for this beautiful menu. I have a little problem with, does not close the accordion remains open. I hope you can help me thank you and sorry my English is not perfect

    ReplyDelete
    Replies
    1. In this case there are several possible reasons for this problem
      - naming of css class of the third code (javascript, css, html) that are not connected each other
      - jquery min.js versions doesn't compatible with your template, try to change the version
      - javascript conflict placement on the head

      Delete
  4. Do you have the code without jquery?

    ReplyDelete

Back to Top