Juliver Galleto Juliver Galleto - 22 days ago 11
jQuery Question

adding slidedown event on a jquery menu

Ok I have this code:

<html>
<head>
var timeout = 0;
var closetimer = 0;
var ddmenuitem = 0;

function jsddm_open()
{ jsddm_canceltimer();
jsddm_close();
ddmenuitem = $(this).find('#as').eq(0).css('visibility', 'visible');
bb = $(this).css("background","#0099FF");
}

function jsddm_close()
{
if(ddmenuitem)
ddmenuitem.css('visibility', 'hidden');
}

function jsddm_timer()
{ closetimer = window.setTimeout(jsddm_close, timeout);
bb = $(this).css("background","none");
}

function jsddm_canceltimer()
{ if(closetimer)
{ window.clearTimeout(closetimer);
closetimer = null;}}

$(document).ready(function()
{


$("#sinputbox").watermark("Search item here...");
$('#menu > li').bind('mouseover', jsddm_open);
$('#menu > li').bind('mouseout', jsddm_timer);});

document.onclick = jsddm_close;

</head>
<body>
<div id="hmenu">
<ul id="menu">
<li><a class="active" href="index.php">Home</a></li>
<li><a href="gallery.php?name=gallery">Gallery</a>
<ul id="as">
<li><a href="gallery.php?name=clothing">Clothing</a></li>
<li><a href="gallery.php?name=furniture">Furniture</a></li>
<li><a href="gallery.php?name=householditems">Household-items</a></li>
<li><a href="gallery.php?name=automotive">Automotive</a> </li>
<li><a href="gallery.php?name=food">Food</a></li>
</ul>
</li>
<li><a href="about.php">About</a></li>
<li><a href="contact.php">Contact</a></li>
</ul>
</div>
</body>
</html>


Now, I am planning to add a slidedown to that dropdown menu but I don't know how. I tried to add this line: "
$('this').slideDown('slow');
" inside this function: "
function jsddm_timer()
" but nothing work so far. Could someone here help me to this pls? I'm open in any suggestion thanks.

Answer

Try this JSFiddle and tell if you want functionality like this:

Updated Link:

http://jsfiddle.net/qFEJh/1/

And this is the UPDATED Code

function jsddm_open()
{
    $(this).find('#as').slideDown('slow');
    bb = $(this).css("background","#0099FF");
}

function jsddm_close()
{
    $(this).find('#as').slideUp('slow');
}

$(document).ready(function()
{
    $('#menu > li:has(ul)').hover(jsddm_open,jsddm_close);
});

document.onclick = jsddm_close;
Comments