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();
> });
>
> }
