Accordion Menu using JQuery
Earlier i had introduced about JQuery and about how to build a Cascading Menu using JQuery.Here we will create an Accordion menu using JQuery.An accordion provides you with multiple panes,but displaying only one at once. The Menu’s visibility is toggled when the mouse is moved over it.
See Demo
Again we are using the minified version of the JQuery Script file in this example.
Here is the source code for the accordion menu
<html>
<head>
<title>Accordion Menu Using jQuery</title>
<script src=”jquery-1.3.2.min.js” type=”text/javascript” /></script>
<script type=”text/javascript”>
$(document).ready(function()
{
$(”#accordionpane p.menu_head”).mouseover(function()
{
$(this).css({backgroundImage:”url(UpArrow.jpg)”}).next(”div.menu_body”).slideDown(500)siblings(”div.menu_body”).slideUp(”slow”);
$(this).siblings().css({backgroundImage:”url(DownArrow.jpg)”});
});
});
</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;
color:#FFFFFF;
font-weight:bold;
background: #000000 url(DownArrow.jpg) center right no-repeat;
}
.menu_body {
display:none;
}
.menu_body a{
display:block;
color:#000000;
background-color:#CCCCCC;
padding-left:10px;
font-weight:bold;
text-decoration:none;
}
.menu_body a:hover{
color: #333333;
text-decoration:underline;
}
</style>
</head>
<body>
<div style=”float:left; margin-left:20px;”>
<div id=”accordionpane”>
<p>Car and Bike Corner</p>
<div>
<a href=”#”>Cars</a>
<a href=”#”>Bikes</a>
<a href=”#”>Gearless</a>
</div>
<p>Tech Corner</p>
<div>
<a href=”#”>ASP.NET</a>
<a href=”#”>PHP</a>
<a href=”#”>JavaScript</a>
</div>
<p>The Game</p>
<div>
<a href=”#”>Cricket</a>
<a href=”#”>Formula1</a>
<a href=”#”>MotoGp</a>
</div>
</div>
</div>
</body>
</html>
All we do here is toggle the images,that is, the downarrow and uparrow images.When the menu_head is clicked,the image is changed and also the sibling items in the menu list are shown in a sliding manner.
Related posts:
Leave your response!