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.
javascript - onMouseOut with div question (pop-up menus)
Moderator: General Moderators
-
konstandinos
- Forum Commoner
- Posts: 68
- Joined: Wed Oct 04, 2006 4:20 am
-
konstandinos
- Forum Commoner
- Posts: 68
- Joined: Wed Oct 04, 2006 4:20 am
huh?feyd wrote:many libraries use a timer that starts on mouse-out that shortly after leaving (and not mousing onto someone else that stops the timer) hides the menu.
surely this can be done without the need for exernal libraries.
i've scowered the net. can't find a decent explanataion of how drop down menus work with divs and events...
-
konstandinos
- Forum Commoner
- Posts: 68
- Joined: Wed Oct 04, 2006 4:20 am
ok i appreciate your trying to help. i am going to attempt to be as descriptive as possible.
i have a div.
inside that div is a table.
that table has 3 rows.
each row has one cell.
in each of these cells is a link.
that contsruct makes up one of my submenus.
when i set the div's visibility to 'visible' after a onMouseOver event on my main menubar, the submenu pops up perfectly.
however, onMouseOut on the actuall submenu screws up. for some reason, when i move into the div, and hover my mouse over one of the afformentioned links in the table cells, the onMouseOut event is called for the div. and i dont know why. surely i am still inside the div and thus haven't moved the mouse out of it yet?
it's as if javascript is treating the contents of the div like they were outside of it. and the only part of the div it recognises is its edges.
has anyone else experienced this issue?
how the heck else is a drop down / pop-up menu meant to be implemented? what am i doing wrong?
i have a div.
inside that div is a table.
that table has 3 rows.
each row has one cell.
in each of these cells is a link.
that contsruct makes up one of my submenus.
when i set the div's visibility to 'visible' after a onMouseOver event on my main menubar, the submenu pops up perfectly.
however, onMouseOut on the actuall submenu screws up. for some reason, when i move into the div, and hover my mouse over one of the afformentioned links in the table cells, the onMouseOut event is called for the div. and i dont know why. surely i am still inside the div and thus haven't moved the mouse out of it yet?
it's as if javascript is treating the contents of the div like they were outside of it. and the only part of the div it recognises is its edges.
has anyone else experienced this issue?
how the heck else is a drop down / pop-up menu meant to be implemented? what am i doing wrong?
-
konstandinos
- Forum Commoner
- Posts: 68
- Joined: Wed Oct 04, 2006 4:20 am
well it doesn't make sense to me. i want my submenu to stay visible until i move my mouse outside of the submenu alltogether. right now it dissappears as i move the mouse within the submenu but into another link/cell.feyd wrote:It sounds a perfectly reasonable event happening.
perhaps you can recommend a really good tutorial / eBook on pop-up menus in js. i've searched all day. no luck
- Chris Corbyn
- Breakbeat Nuttzer
- Posts: 13098
- Joined: Wed Mar 24, 2004 7:57 am
- Location: Melbourne, Australia