I tried replying to this earlier but it didn't post... I've looked at the suckerfish menu, and I'm using something similar. My problem isn't the drop down menu. I have 2 menus, the top tabs that are a links, which dynamically open a submenu with text and drop down menu children, etc etc. My theory was to bind a mouseout even to the parent div that wraps around all of the menu stuff so that when you exit the menu area, the top tab goes back to displaying the default selection, as determined by what page you are on.
I've tried binding the mouseout evens to the top tabs, the sub menus, and every parent div every which way imaginable. As of now I've given up and the menu just stays on the last tab that was moused over. If anyone has any other suggestions on how to get the parent div only to respond to a mouseout event, please do tell. It's much appreciated! 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(); > > }); > > > }
