Navigation hover/toggle problems over dead space

[red]

There is a rough sample of what's going on at saczee.com/ZTEST/build20-11.html Pay little attention to the code, though. It deliberately violates "best practices" and is less than half done. It simply gives an idea of what the mega-menu structures are intended to do. Also keep in mind, the positions and sizes of the mega-panels are not fixed - and will change from edition to edition (of an online newspaper). The solution, if there is one, must be something that works independent of other features of containers and their styling. It needs to pretty much confine itself to matters of visibility in hovered and toggled states and invisibility at other times.

 

Setup: Its a routine inline-block navbar. there's underlayment containers for certain function and class switches on the list-items themselves for certain functions (on/off/active/dropdown/etc...) nothing special. the anchors are kept relatively clean and have no function except those without submenus - they serve as links - the others just serve as titles for submenus. Straightforward to that point. There are also two primary types of li links - ones that will have dropdown menus of some sort, others that will have mega-menu like panels that use divs as their principle content containers rather than ul/li submenus.

 

Problem: The problem is handling the event actions on the list items. In particular, the gaps or deadspace if one is in hover mode. The mega-panels may be absolutely positioned anywhere on the page. So, when one hovers a navbar link the panels appear, but in traversing to the panel one must pass through unhovered-space (containers that are not associated (often cannot be) with the navbar structure at all. I can get the panels to appear, I can move them around and size them as I wish. I cannot manage to 1) keep them visible when leaving the link to go to them, 2) keep the link hover style active when I leave the list-item. My visibility is controlled with opacity, visibility and overflow and the panels put in block mode when visible (for a variety of reasons I do not wish to use negative margins or display:none properties to handle visibility.)What I've looked at a lot of toggle featured solutions like bootstrap and such. don't want to use them. Other simpler solutions I've seen with jquery, js and css combinations just miss what I'm trying to accomplish. I'm guessing some combination of css and js will do the trick, but I've no js experience.

 

What I'd settle for: To be able to hover from the li to the separate div panels without losing the hover effect on the link or the visibility of the mega-panel. When the pointer is on the panel, both visibilities should remain. Then, when the hover is removed from the panel the panel should become invisible again and the style on the link go back to its unhovered state.

 

What I'd like is: on hover the link styling for hover lights up and the mega-panel appears (stays on as long as the link is hovered. One can then travel to the panel and both elements remain in hover state. if one then clicks either the link or the panel, both are toggled and retain the hovered state visibility. If either are then clicked, then the panel becomes invisible and the link loses its hover styling when the pointer leaves it.

 

I figure the thing takes a combination of js and css classes to put on the event initiators and their targets. If anyone has seen this somewhere or has/can create something like that, my thanks in advance. I haven't found anything like it elsewhere.

Edited January 11, 2015 by red

[Ingolme]

You'll need a mouseover event handler on the links, but not a mouseout event. When the mouse is put over the link it should hide all the panels and then show the one that's associated to the link.

 

You'll need a closing button on the panel that needs to be clicked on to close it. This will prevent the problem of dead space.

 

In order to associate the link with one of the panels, give the panel an ID attribute, then use an HTML5 data attribute on the link that refers to the ID of the panel it's associated to. Then you can use that information in the event handler of the link to refer to the panel.