My name is Tommy, I am the author of Publr. When I'm not working on Publr, I'm either working at One Lucky Guitar, playing in Metavari, or haning out with my girlfriend.
So, I was using this pre-made accordion menu for a site and when it wasn't working, I decided to build my own from scratch. It, suprisingly, took very little code to write. Here it is:
The javascript:
$(document).ready(function(){
/*
JQuery accordion menu
-------------------------------------------------------------
Written by Tommy Cutter (http://www.tommycutter.com)
-------------------------------------------------------------
*/
// initially hide sub-menus
$(".drawers li ul").hide();
$(".drawers").bind('mouseleave',function() {
$(".drawer ul").slideUp();
});
// set hover event for menus
$(".drawer-handle").hover(function() {
// the current handle's ul should be set to active
$(this).siblings().each(function() {
$(this).slideDown("medium");
$(this).addClass("active");
});
// loop through all sub-menus and show the active one
$(".drawer ul").each(function() {
if($(this).hasClass("active") == false)
{
$(this).slideUp("medium");
$(this).removeClass("active");
}
});
},function() {
// loop through all sub-menus and hide the active one
$(".drawer ul").each(function() {
if($(this).hasClass("active"))
{
$(this).slideDown("medium");
$(this).removeClass("active");
}
});
});
/* ------------------------------------------------------------- */
});
The markup
<ul id="sitenav" class="drawers">
<li class="drawer">
<h2 class="drawer-handle open"><a href="/"><img src="/assets/images/nav-ylni.png" /></a></h2>
<ul>
<li><a href="/mission">Misson</a></li>
<li><a href="/history">History</a></li>
<li><a href="/board">Board/Committees</a></li>
<li><a href="/corporate">Corporate Member</a></li>
<li><a href="/faq">FAQ<span style="text-transform:lowercase;">s</span></a></li>
<li><a href="/membership">Membership</a></li>
<li><a href="/donations">Donations</a></li>
</ul>
</li>
<li class="drawer">
<h2 class="drawer-handle open"><a href="/events"><img src="/assets/images/nav-events.png" /></a></h2>
<ul>
<li><a href="/mission">Misson</a></li>
<li><a href="/history">History</a></li>
<li><a href="/board">Board/Committees</a></li>
<li><a href="/corporate">Corporate Member</a></li>
<li><a href="/faq">FAQ<span style="text-transform:lowercase;">s</span></a></li>
<li><a href="/membership">Membership</a></li>
<li><a href="/donations">Donations</a></li>
</ul>
</li>
<li>
<h2><a href="/news"><img src="/assets/images/nav-newsblog.png" /></a></h2>
</li>
</ul>