PDA

View Full Version : Jquery effects don't activate until after I mouse over once



brainbuzzmedia
07-24-2010, 12:08 PM
Hi guys

I am using a customized version of this free css dropdown menu (http://www.lwis.net/free-css-drop-down-menu/) script. It is just pure css, no jquery. I wanted to add some delay to the open and close on mouseover, here is what I added:


<script type="text/javascript">
$(document).ready(function () {
$('ul.dropdown li').hover(
function () {
//show its submenu
$('ul', this).slideDown(150);
},
function () {
//hide its submenu
$('ul', this).slideUp(250);
}
);
});
</script>

When I first mouse over, this does nothing, but if I mouse over the same drop down li a second time, it works. Check it out here (http://www.brainbuzzmedia.com/!BLUEPRINT/blueprint.html).

Any ideas on how I can fix this?

azoomer
07-24-2010, 12:23 PM
I am thinking you could try something like this


<script type="text/javascript">
$(document).ready(function () {

$('ul.dropdown ul').css('display', 'none');

$('ul.dropdown li').hover(
function () {
//show its submenu
$('ul', this).slideDown(150);
},
function () {
//hide its submenu
$('ul', this).slideUp(250);
}
);
});
</script>
It seems that you have to have the element as display none in order to get the slide down effect.
I'm not sure if it works but you can try it out.

brainbuzzmedia
07-24-2010, 12:30 PM
Ah! That does work. But now I noticed another problem. The slide down works now, but it instantly disappears when you mouse off, instead of sliding up (slower than it slides down).

Sorry, I know very little about jquery / javascript.

azoomer
07-24-2010, 12:34 PM
Yeah that's true about the sudden disappearance , maybe it wasn't such a clever fix after all, sorry !

brainbuzzmedia
07-24-2010, 12:40 PM
Better than before. Any idea on how I could remove the drop down delay from the second level ul? Like "Products" should have a delay but then "New" and "Used" should just pop open instantly.

brainbuzzmedia
07-24-2010, 08:18 PM
Anyone else have any idea?

azoomer
07-25-2010, 02:32 PM
Hi brainbuzzmedia, I've been trying to find a solution to the slideUp problem, but it's more difficult than i thought. Also I haven't been able to figure out how to remove the slide effect from the second ul level, as you request. Did you come up with solutions to this yet ?
There is a menu on DD that slides up again:
http://www.dynamicdrive.com/dynamicindex1/ddsmoothmenu.htm
and that looks very nice.
What I like about your menu is that it still works if javascript is disabled. I use the superfish menu a lot and it also degrades well, but it suffers from the same problem as your menu, not having a slideUp effect. I have not seen any solution to that yet, even though I have googled it for quite a while. I was thinking of trying to construct a menu from scratch, but it is just too confusing with all the li, ul and so on, let alone the browser differences. If anybody, knows of a menu that slides up again and still degrades well with javascript disabled I'd love to hear about it.

brainbuzzmedia
07-26-2010, 12:24 AM
Thanks for looking into it more for me. I haven't found a solution to it yet but I did actually try that smooth dropdown menu you linked on DD. The problem I had with that was that it didn't work well with the cufon font replacement on the same page.