bind a mouseenter function to the menu div, then a mouseleave function
to the sub menu.
Ted wrote:
I have, and have used the suckerfish method before. The problem is
I've already created the CSS for the menus based upon them living each
in their own div, and would like to engineer them based upon that as
opposed to having to recode the CSS based upon another method.
Basically my HTML looks like this:
<div id="nav">
<ul>
<li class="main-nav"><a href="#" id="main-item-1">Main Item 1</a></
li>
<ul class="sub-nav-1">
<div id="menu1">
<!-- 4 col nav menu code goes here -->
</div>
</ul>
<li class="main-nav"><a href="#" id="main-item-2">Main Item 2</a></
li>
<ul class="sub-nav-2">
<div id="menu2">
<!-- 4 col nav menu code goes here -->
</div>
</ul>
<li class="main-nav"><a href="#" id="main-item-3">Main Item 3</a></
li>
<ul class="sub-nav-3">
<div id="menu3">
<!-- 4 col nav menu code goes here -->
</div>
</ul>
<li class="main-nav"><a href="#" id="main-item-4">Main Item 4</a></
li>
<ul class="sub-nav-4">
<div id="menu4">
<!-- 4 col nav menu code goes here -->
</div>
</ul>
<li class="main-nav"><a href="#" id="main-item-5">Main Item 5</a></
li>
<ul class="sub-nav-5">
<div id="menu5">
<!-- 4 col nav menu code goes here -->
</div>
</ul>
</ul>
</div>
When the user rolls over an item (main-item-#), I want to unhide the
sub-nav-# ul items, and the enclosed child div with it's 4 col menu
layout.
The issue I'm running in to is that using mouseover/mouseout activates
the menu, but when you move your mouse away from the main menu item,
the div disappears. I've tried attaching mouseover/mouseout actions to
the enclosing ul and divs, but those don't seem to register.
On Nov 25, 10:23 am, RyOnLife <[EMAIL PROTECTED]> wrote:
Have you looked at the Son of Suckerfish
method?http://htmldog.com/articles/suckerfish/dropdowns/
Might be a good starting point to get everything working, then you can
customize the CSS to get whatever look you're going for.
On Nov 25, 10:07 am, serpicolugnut <[EMAIL PROTECTED]> wrote:
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...
Sent from the jQuery General Discussion mailing list archive at Nabble.com.
