JS issue on menu display 1

[TheCandyman]

I'm working on a mega drop down menu and it's coming along, but I'm struggling with the JS in this. Currently the menu works when you mouse over and then mouse down to the drop down menu and then off of it, it works like it should and the sub menu disappears. But i can't get it to disappear unless i have the mouse hit the sub menu such as moving horizontally between top menu items or just going up when the sub menu appears. Any suggestions?

http://www.westernregional.org/2011/

 

[TheCandyman]

I have made it almost work correctly. The only problem now is that when you move over the menu and the sub menu appears, if you move the mouse up on the page (not onto the sub menu) then it won't disappear. Getting closer....

 

[BillyRayPreachersSon]

I'd make the following changes:

- Remove all usages of the "downclear" class. It's never referred to anywhere.

- Update the class "downservices2" to be "downservices", as thee is no difference in the CSS.

- Remove the JS code relating to downservices2.

- Modify the JS to attach to the class "downservices"

- Keep track of the last menu shown in a variable, and use this to know which menu to hide.

- Remove all usages of the "servicesdropped" and "servicesdropped2" classes.
Note: The CSS will need some way to refer to these for styling purposes. If the CSS for them will be identical, then use one class name shared between the ULs. The JS doesn't really need to refer to the class, as it'll only ever have 1 child UL.

This JS, along with the other CSS and HTML changes I mention should do the job:

<script type="text/javascript">
	var lastMenu = null;

	$(document).ready(function() {
		$('.downservices').mouseleave(function() {
			$(this).children('ul').slideUp('fast');
			lastMenu = null;
		});

		$('.downservices').mouseenter(function() {
				if (lastMenu) {
					$(lastMenu).children('ul').slideUp('fast');
					lastMenu = null;
				}

				lastMenu = $(this);
				lastMenu.children('ul').slideDown('fast').show();
		});
	});
</script>

Note: This solution is also extensible to n menus without having to code specifically for each one.

Hope this helps,
Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

Dan's Page [blue]@[/blue] Code Couch:

http://www.codecouch.com/dan/

Code Couch Snippets & Info:

http://www.codecouch.com/

 

[TheCandyman]

Thanks BillyRayPreachersSon, that code change did exactly what i needed! I have seen you around these forums a long and and appreciate the help you given me.