javascript - onMouseOut with div question (pop-up menus)
Posted: Sat Oct 14, 2006 11:35 am
hello folk
i am trying to code a pop-up & drop-down (hierarchical) menu from scratch. i have the main menu bar that stretches accross the top of the screen. it is defined in its own div. inside that menubar are 3 links. onMouseOver on those links sets the visibility of their respective submenu to 'visible'. the submenus are all defined in their own divs too. so far so good. the submenus pop-up perfectly.
now the problem...
the onMouseOver on the main menu bar works perfectly, ie: the expected submenu pops up correctly. however i am not sure how to implement the hiding of the submenu correctly.
i've tried making each submenu its own table (within a div too) and have rows for each submenu-item (with just one td cell per row). now the links all work fine but i can't make the submenu dissappear correctly. i know how to handle the code to set its visibility to hidden just fine, but it's timing/catching the event correctly that i am struggling with.
ive tried debugging it using alerts. it seems whenever i move my mouse over the submenu's div border the onMouseOver alert is activated (as expected), and then onMouseOut is immediately activated as the mouse moves into the table's td cell. so basically it hides it straight away. whereas i only want it to be hidden once the mouse is completely out of the submenu div alltogether.
can anyone please clarify the best practise with onMouseOut, divs/spans, and submenus in pop-up drop-down menus. should i be using tables at all?
any help would be greatly appreciated.
ps: i know how to use timeouts for delaying events and am wondering if this instant onMouseOut is normal when dealing with divs and their content, and whether i should be constantly updating the visibility of a div as i move through each table cell / link.
pps: an excellent example of what it is i am trying to do (pardon for pasting links): http://suzukicycles.com/ - move your mouse over the 'MOTORCYCLES' menu item and notice the first drop-down menu. thats all i want. i am not interested in having a second submenu.
i am trying to code a pop-up & drop-down (hierarchical) menu from scratch. i have the main menu bar that stretches accross the top of the screen. it is defined in its own div. inside that menubar are 3 links. onMouseOver on those links sets the visibility of their respective submenu to 'visible'. the submenus are all defined in their own divs too. so far so good. the submenus pop-up perfectly.
now the problem...
the onMouseOver on the main menu bar works perfectly, ie: the expected submenu pops up correctly. however i am not sure how to implement the hiding of the submenu correctly.
i've tried making each submenu its own table (within a div too) and have rows for each submenu-item (with just one td cell per row). now the links all work fine but i can't make the submenu dissappear correctly. i know how to handle the code to set its visibility to hidden just fine, but it's timing/catching the event correctly that i am struggling with.
ive tried debugging it using alerts. it seems whenever i move my mouse over the submenu's div border the onMouseOver alert is activated (as expected), and then onMouseOut is immediately activated as the mouse moves into the table's td cell. so basically it hides it straight away. whereas i only want it to be hidden once the mouse is completely out of the submenu div alltogether.
can anyone please clarify the best practise with onMouseOut, divs/spans, and submenus in pop-up drop-down menus. should i be using tables at all?
any help would be greatly appreciated.
ps: i know how to use timeouts for delaying events and am wondering if this instant onMouseOut is normal when dealing with divs and their content, and whether i should be constantly updating the visibility of a div as i move through each table cell / link.
pps: an excellent example of what it is i am trying to do (pardon for pasting links): http://suzukicycles.com/ - move your mouse over the 'MOTORCYCLES' menu item and notice the first drop-down menu. thats all i want. i am not interested in having a second submenu.