One last question (at least on this topic, I promise)-
I'd like to have the main menu item keep it's hover class active while
the user has the submenu selected.
I've tried adding -
$('li.main-nav').addClass('menu-on');
...to the code to achieve this, but it's not working.
Code here:
http://dl.getdropbox.com/u/21984/navigation.html
Thanks -
Ted
On Dec 1, 8:28 pm, "Jeffrey Kretz" <[EMAIL PROTECTED]> wrote:
> Here's what I believe is happening.
>
> You have an LI that is a certain height, about 21px.
>
> This LI is inside a div that is larger, 36px.
>
> The floating DIVs are positioned underneath the larger DIV.
>
> -------
> MENU DIV
>
> --------
> LI
> --------
>
> <- Empty space
>
> ------
> Floating Div
>
> There is an empty space between the LI and its child DIV.
> So when you move the mouse there, it is no longer inside the
> LI or its children, and it fires the mouseleave event.
>
> You could set the height of the LI to expand to the size of the menu DIV.
>
> JK
>
> -----Original Message-----
> From: jquery-en@googlegroups.com [mailto:[EMAIL PROTECTED] On
>
> Behalf Ofserpicolugnut
> Sent: Monday, December 01, 2008 4:52 PM
> To: jquery-en@googlegroups.com
> Subject: [jQuery] Re: Using jquery to construct menus like nbc.com
>
> 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 Ofserpicolugnut
> > 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 Ofserpicolugnut
> >> 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-tp...
> >> 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-tp...
> > 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-tp...
> 1s27240p20783951.html
> Sent from the jQuery General Discussion mailing list archive at Nabble.com.
