Accordion Menu Dengan Jquery

Tutorial jquery kali ini membahas tentang pembuatan menu accordion, biasanya menu accordion ini ditemukan pada aplikasi-aplikasi desktop misal vb,vb.net,delphi dll. Ternyata membuat menu layaknya desktop sangatlah mudah dilakukan dengan batuan jquery.
Ok mari kita accordion menu dengan jquery

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Accordion Menu Using jQuery</title>
<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 
    $("#firstpane p.menu_head").click(function()
    {
        $(this).css({backgroundImage:"url(down.png)"}).next("div.menu_body").slideToggle(300).siblings("div.menu_body").slideUp("slow");
           $(this).siblings().css({backgroundImage:"url(left.png)"});
    });
    //slides the element with class "menu_body" when mouse is over the paragraph
    $("#secondpane p.menu_head").mouseover(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>
<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>
</head>
<body>
<div style="float:left" > <!--This is the first division of left-->
  <p><strong>Klik Saya Dong</strong></p>
  <div id="firstpane" class="menu_list"> <!--Code for menu starts here-->
        <p class="menu_head">Menu 1</p>
        <div class="menu_body">
        <a href="http://iframe.web.id">Sub menu 1</a>
         <a href="http://anakberbakti.blogspot.com">Sub menu 2</a>
         <a href="http://anakberbakti.blogspot.com">Sub Menu 3</a>    
        </div>
        <p class="menu_head">Menu 1</p>
        <div class="menu_body">
            <a href="http://iframe.web.id">Sub menu-1</a>
         <a href="http://iframe.web.id">Sub menu-2</a>
         <a href="http://iframe.web.id">Sub menu-3</a>    
        </div>
        <p class="menu_head">Menu 3</p>
        <div class="menu_body">
          <a href="http://anakberbakti.blogspot.com">Sub menu-1</a>
         <a href="http://anakberbakti.blogspot.com">Sub menu-2</a>
         <a href="http://anakberbakti.blogspot.com">Sub menu-3</a>            
       </div>
  </div>
</div>
</body>
</html>

Demo bisa dilihat di http://ipscann.iframe.web.id/accor/index.html
Source code silakan download disini

sumber:

Anak berbakti

May 24, 2010

Accordion Menu Dengan Jquery

1 comment: