Add Accordion menu to blogger

There are various types of menus (horizontal navigation menu, Dropdown menu, Floating dropdown menu etc) are available to use in blogger blogs but in this post we will discuss an interesting  type of menu known as accordion menu. It is a compact menu which is capable of storing large amount of links in it. General form of accordion menu is based on a click to dropdown menu.In this post we will talk about adding this wonderful  accordion menu to your blogger blogs. This menu is created with the help of  CSS and JQUERY. It is very easy to integrate this menu into your blogger blog.

Adding accordion menu to blogger

1. Open your blogger dashboard.
2. Select your blog.
3. Select Layout option.
4. Click Add a gadget option in the layout screen.
5. A list of the widgets will appear on the screen.
6. Select HTML/JavaScript widget from the list.
7. In the HTML/JavaScript widget paste the following code and save the widget.
8. Open your blog to see the new accordion menu in action.

Code for accordion menu

Do not edit red lines

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" >$(document).ready(function(){
    $('li.title a').click(function(e){
        var dropDown = $(this).parent().next();
        $('.downlistie').not(dropDown).slideUp('slow');
        dropDown.slideToggle('slow');
        e.preventDefault();
    })
});</script>
<style>
ul.container{
    width:275px;
    padding:5px;
}
li.accoi-menu{
list-style:none;
    padding:1px;
    width:100%;}

li.title
{
border-radius:5px;
background:#333333;
list-style:none;
padding:5px;
}
li.title a{
color:#ffffff;
    display:block;
 padding:5px;
    font:14px georgia, verdana;
    overflow:hidden;
        position:relative;
    width:100%;
     text-decoration:none;
}
.downlistie{
list-style:none;
    display:none;
    padding-top:5px;
    width:100%;
}
.downlistie li{ 
   list-style:none;
border-left:1px solid #dcdcdc;
border-right:1px solid #dcdcdc;
border-bottom:1px solid #dcdcdc;
border-radius:5px; 
    margin:5px ;
    padding:4px 10px;     
}

.downlistie li:hover {
background:orange;
}
.downlistie li a{
{
font:14px georgia, verdana;
text-decoration:none;
color:#333333;
}
.downlistie li a:hover {
text-decoration:none;
color:#333333;
}
</style>
<ul class="container">
          <li class="accoi-menu">
              <ul>
                <li class="title"><a href="#" >Blogger</a></li>             
                <li class="downlistie">
                    <ul>
    <li><a  href="#" >Templates</a></li>
    <li><a  href="#">Widgets</a></li>
    <li><a href="#">Guides</a></li>
                    </ul></li></ul></li>

   
    <li class="accoi-menu">
         
              <ul>
                <li class="title"><a href="#" >Wordpress</a></li>

                <li class="downlistie">
                    <ul>
    <li><a href="#" >Themes</a></li>
    <li><a href="#">Plugins</a></li>
    <li><a href="#">Guides</a></li>                 
                 </ul></li></ul></li>   

 <li class="accoi-menu">
              <ul>
                <li class="title"><a href="#" >Freebies</a></li>
                <li class="downlistie">
                    <ul>
    <li><a href="#" >Blogger templates</a></li>
    <li><a href="#">Wordpress Themes</a></li>
    <li><a href="#">Plugins</a></li>
    <li><a href="#">Scripts</a></li>
         </ul></li></ul></li>

 <li class="accoi-menu">
              <ul>
                <li class="title"><a href="#" >Services</a></li>
                <li class="downlistie">
                    <ul>
    <li><a href="#" >Website Design</a></li>
    <li><a href="#">Blogger</a></li>
    <li><a href="#">Wordpress</a></li>
    <li><a href="#">Custom Templates</a></li>                   
                 </ul></li></ul></li>


 <li class="accoi-menu">
          <ul>
                <li class="title"><a href="#" >About us</a></li>
                  <li class="downlistie">
                    <ul>
    <li><a href="#" >About us</a></li>
    <li><a href="#">Contact us</a></li>
     <li><a href="#">Disclaimer</a></li>
    <li><a href="#">Privacy policy</a></li>
              </ul></li></ul></li>

    </ul>