Thanks, but the drop down menu isn't the problem... I'm already using a type of drop down menu similar to suckerfish. The problem is I have two menus, a top tab menu calling a bottom menu that does the drop downs... when the page is loaded it highlights the proper top tab for the page you're on (and displays the proper drop down menus below), but when you mouseover the top tabs I want it to go back to highlighting the original tab when you're no longer mousing through the menus.
My theory was that I could bind a mouseout event to the div that wraps around the whole menu system, and once that mouseout is triggered it will tell the menu to jump back to the original tab, like it did on loading the page. But what is happening is that the mouseout even is fired upon ALL mouseouts within any child divs underneath it, which is why i tried to do a return false for the children of the wrapping parent div. Any other suggestions? Thank you! On Oct 3, 7:27 am, motob <[EMAIL PROTECTED]> wrote: > I would suggest using one of jQuery's menu plugins. There is a > standard practice for marking up menus and sub menus using lists > (<ol>). Look at this tutorial for suckerfish drop down menu > (http://www.alistapart.com/articles/dropdowns/). Once you have your menu > properly marked up take a look at the superfish plugin (http:// > jquery.com/plugins/project/Superfish). > > On Oct 3, 2:08 am, Brandon <[EMAIL PROTECTED]> wrote: > > > I've got a menu that does the basic <a> links and shows a sub menu of > > divs with nested <ul><li>'s and other text dynamically with css and > > javascript. I'm migrating it over to jquery, and have it all working > > perfectly except for one thing. I am trying to get the menu to jump > > back to the tab that corresponds to the current page upon mouseout of > > the menu's parent div. > > > My code is basically this: > > > <div id="menuholder"> > > <div id="menu"> > > <div id="toptabs"> > > <a.. > > <a.. > > <a.. > > </div> > > <div id="tabcontentcontainer"> > > <div id="menustuff... > > <div id="menustuff... > > <div id="menustuff... > > </div> > > </div> > > </div> > > > Each "toptabs a" is binded (bound?) with a mouseover to show a > > corresponding menu div. All that works fine. > > > What I'm not getting though, and am completely stumped about, is > > stopping the mouseout event from triggering on the child div's and a's > > underneath the menu div. I've got it kind of working to stop all > > children and self, and just do mouseout on the parent div, which would > > be the menuholder div, but it doesn't fire all of the time, if at > > all... it sometimes works if i mouse over the edge very slowly. > > > Here's my code... maybe someone can shed some light on either stopping > > the child mouseover binding or triggering the mouseout on the parent > > smoother. > > > (var currenttab is defined in the head by php) > > <script>var currenttab = '$tabtitle';</script> > > > $(document).ready(function(){ > > expandmenu(currenttab); > > > $("#menu") > > .parent().mouseout(function(e){expandmenu(currenttab);}) > > .children().andSelf().mouseout(function(e){return false;}); > > > $("#toptabs > a").each(function() { > > var rel = $(this).attr("rel"); > > $(this).mouseover(function(){ expandmenu(rel); }); > > }); > > > }); > > > function expandmenu(tabid){ > > $("#toptabs:visible",function(){ > > $("#toptabs > [EMAIL PROTECTED]'"+tabid > > +"']").addClass("current").siblings("a.current").removeClass(); > > $("#"+tabid).show().siblings("div:visible").hide(); > > }); > > > }
