Create a simple accordion menu

I have a post on how to create an accordion for Blogger ,but it’s a little bit difficult to follow steps and understand how it work .
So in this post ,I will show you another way to create Accordion menu ,and I will try so hard to explain how it work . I hope you will find it helpful and you can create your own menus base on this.



 Live Demo


First ,this is the HTML structure of menu :
<div id="first" class="menu_list"> <!--Code for menu starts here-->
        <p class="menu_head">Header-1</p>
        <div class="menu_body">
        <a href="#">Link-1</a>
         <a href="#">Link-2</a>
         <a href="#">Link-3</a>   
        </div>
        <p class="menu_head">Header-2</p>
        <div class="menu_body">
            <a href="#">Link-1</a>
         <a href="#">Link-2</a>
         <a href="#">Link-3</a>   
        </div>
        <p class="menu_head">Header-3</p>
        <div class="menu_body">
          <a href="#">Link-1</a>
         <a href="#">Link-2</a>
         <a href="#">Link-3</a>           
       </div>
  </div>  <!--Code for menu ends here-->

The first div with id=”first” is the element that wrap menu .

<p>  element with class “menu head” mean headers of menu ,or large items ,when we click mouse on these large item ,small items will drop down .

<div> with class “menu_body” is the element that wrap small items in the menu .

<a> elements are small items in menu .

That’s structure of menu .

Now we need to decorate it with a little of CSS
<style type="text/css">
body {
    margin: 10px auto;
    font: 75%/120% Verdana,Arial, Helvetica, sans-serif;
}
.menu_list {   
    width: 150px;
}
.menu_head {
    padding: 5px 10px;
    cursor: pointer;
    position: relative;
    margin:1px;
    font-weight:bold;
    background: #eef4d3 url(â�¦..left.png) center right no-repeat;
}
.menu_body {
    display:none;
}
.menu_body a{
  display:block;
  color:#006699;
  background-color:#EFEFEF;
  padding-left:10px;
  font-weight:bold;
  text-decoration:none;
}
.menu_body a:hover{
  color: #000000;
  text-decoration:underline;
  }
</style>

In the CSS code above :

Body tag will define the font and style for all .

.menu_list define the size for element with class=”menu_list” is 150px width .

.menu_head set style for element with class”menu_head” (large items) in the menu

.menu_body a  and menu_body a:hover set the style for <a> tags which are covered by element with classs”menu_body”

.menu_body { display:none } will hide element with id “menu_body” (the element wrap small items) . We hide it first and will show it when mouse click or mouse over the lare item of menu .

Now ,to make it work ,we need some Jquery code :

<script type="text/javascript" language="javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
    //slides the element with class "menu_body" when paragraph with class "menu_head" is clicked
    $("#first p.menu_head").click(function()
    {
        $(this).css({backgroundImage:"url(down.png)"}).next("div.menu_body").slideDown(500).siblings("div.menu_body").slideUp("slow");
           $(this).siblings().css({backgroundImage:"url(left.png)"});
    });
   
});
</script>

The <script type="text/javascript" language="javascript" src="jquery.js"></script> will implement jquery framework into file . After that,we can use Jquery functions .
In the following script :
$(document).ready(function() :  define a funtion that only work when page loaded fully .

$("#first p.menu_head").click(function() ; define a funtion that only work when a
element with class “menu_head” which is covered by element with id “first” is clicked .
(or we can say ,this line define a function that only work when a large item in menu is clicked )

The following line :
$(this).css({backgroundImage:"url(down.png)"}).next("div.menu_body").slideDown(500).siblings("div.menu_body").slideUp("slow");
           $(this).siblings().css({backgroundImage:"url(left.png)"});
$(this) here mean large item in menu which is clicked (p element with class “menu_head” and covered by element with id”first” ,as we mention above)

. css({backgroundImage:"url(down.png)"}) :  set the background image of large item to “down.png” (or add the down arrow the large item of menu )

.next("div.menu_body") : this line will find the closest div element with class”menu_body” to large item in the menu ( or we can say find the closest element wrap small item in menu ) ,and select it .

.slideDown(500) will drop down small item in menu . This action will happen in 500 milli seconds

.siblings("div.menu_body") : find all other <div> element with class “menu_body” and select them .

.slideUp("slow") : slide up all other <div> element with class “menu_body” which are found in .siblings("div.menu_body") . The speed for sliding up is slow .

$(this).siblings().css({backgroundImage:"url(left.png)"}) : this line will find all other large item in menu (p element with class “menu_head” as we say above ) and set background for them “left.png” (arrow to left ) .

If you want to slide up and down the menu when mouse over instead of click ,just replace
    $("#first p.menu_head").click(function()
With
  $("#first p.menu_head").mouseover(function()

To add this menu to Blogger ,first of all , we need to add the CSS first ,after that ,add HTML structure and the last is Jquery .

That’s all for accordion menu ,I think it’s very simple when we know how it work . Thank to that ,we can make my owns .