there is two examples of accordion menu. First menu’s visibility get’s toggled on clicking on the header, the another menu’s visibility get’s toogled when mouse is moved over it.
Read The Full Tutorial.
There is two examples of accordion menu. First menu’s visibility get’s toggled on clicking on the header, the another menu’s visibility get’s toogled when mouse is moved over it.
In this html code each blocks of menu contain of the header with class “menu_head”
<div id="firstpane" class="menu_list">
<p class="menu_head">Header-1</p>
<div class="menu_body">
<a href="#">Link-1</a>
</div>
<p class="menu_head">Header-2</p>
<div class="menu_body">
<a href="#">Link-1</a>
</div>
<p class="menu_head">Header-3</p>
<div class="menu_body">
<a href="#">Link-1</a>
</div>
</div>
In “menu_body” is set to “hidden” so that the menu links are hidden when the page is loaded and each menu appears in new line
.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;
}
The final step import the jQuery library
<script type="text/javascript" language="javascript" src="jquery.js"></script>
//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)"});
});
Here is the code of the accordion menu under mouse over effect:
//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)"});
});
|
Ajax Projects
