I used your mouseenter and mouseleave function, but I'm still having issues with the menus disappearing when the user mouses off the top level item, and in to the lower level list items (containing the div menus).
Here's a link to a more fleshed out example: http://dl.getdropbox.com/u/21984/menu_test_case/menu_test_case.html Any clues on why it's inconsistent in it's sticky-ness? Thanks - Ted Jeffrey Kretz wrote: > > > I made a few changes and reposted it here: > > http://test1.scorpiondesign.com/LocalTest7.htm > > Changes: > > menu1 through menu5 were moved underneath their respective LIs. When the > menus were NOT children of the LIs, the mouseenter mouseleave kept firing. > > #nav { position:relative; } > This allows the absolute positioning of child elements relative to itself. > > #menu1, #menu2, #menu3, #menu4, #menu5 { > display:none; > left: 0px; > > Rather than hiding the menus with javascript, I set the CSS to display > none. > The first toggle called will turn them on. The left:0px aligns the menus > with the first relatively positioned element, in this case #nav. > > $("li.main-nav").bind("mouseenter mouseleave", function(){ > $(this).children('div').toggle(); > return false; > }); > > So it's a class based selector (less code), and it only binds the parent > element (rather than the parent and child). > > Cheers, > JK > > > -----Original Message----- > From: jquery-en@googlegroups.com [mailto:[EMAIL PROTECTED] On > Behalf Of serpicolugnut > Sent: Tuesday, November 25, 2008 11:04 AM > To: jquery-en@googlegroups.com > Subject: [jQuery] Re: Using jquery to construct menus like nbc.com > > > > Here's a link to a simplified version of the code. The > mouseenter/mouseleave > events helped, but I'm seeing some strangeness on the first menu item, and > then some flickering on the others. > > http://dl.getdropbox.com/u/21984/menu_test.html > > > Jeffrey Kretz wrote: >> >> >> If you have a sample url of your code, that would be helpful. >> >> But at a guess, the flyout div is probably not a child of the main menu >> element, so the mouseenter and mouseleave won't work properly. If this >> is >> the case, it will require a minor change to the hover plumbing. >> >> The z-index with flash in IE6/7 can usually be solved by doing two >> things: >> >> 1. Add the wmode="transparent" attribute to the flash movie. >> 2. Wrap the tag in a div set for the same width and height, with >> its z-index set for 0. >> >> JK >> >> -----Original Message----- >> From: jquery-en@googlegroups.com [mailto:[EMAIL PROTECTED] On >> Behalf Of serpicolugnut >> Sent: Tuesday, November 25, 2008 7:08 AM >> To: jquery-en@googlegroups.com >> Subject: [jQuery] Using jquery to construct menus like nbc.com >> >> >> >> I'm trying to utilize jquery to construct a menu structure that is >> similar to what you see at fox.com and nbc.com. Basically I have a >> menu that is a ul list, with each li selector given it's own id. Below >> I have a div container for each menu item, which are set to be hidden >> by jquery upon load. >> >> I've been the mousever/mouseout actions to trigger turning each div >> container on/off, but the problems I'm encountering with this are 1) >> it works when hovering over the main menu selection, but not when the >> mouse is inside the div, making selecting sub items difficult/ >> impossible, and 2) for some reason in IE6/IE7, the divs don't show >> when they are over a Flash object. >> >> Does anybody have any ideas on how to take items #1 and #2? >> -- >> View this message in context: >> > http://www.nabble.com/Using-jquery-to-construct-menus-like-nbc.com-tp2068217 >> 1s27240p20682171.html >> Sent from the jQuery General Discussion mailing list archive at >> Nabble.com. >> >> >> >> > > -- > View this message in context: > http://www.nabble.com/Using-jquery-to-construct-menus-like-nbc.com-tp2068217 > 1s27240p20687612.html > Sent from the jQuery General Discussion mailing list archive at > Nabble.com. > > > > -- View this message in context: http://www.nabble.com/Using-jquery-to-construct-menus-like-nbc.com-tp20682171s27240p20783951.html Sent from the jQuery General Discussion mailing list archive at Nabble.com.
