Dropdown menu - hover leads to unclickable menu-bar item |
|
ryan
|
Hello,
This is a rather straightforward UI issue (that I am surprised i did not find an existing thread about) that is unfortunately a little hard to articulate (if you did not already gather that from the title).
If I enable the dropdown effect (either 1 or multiple level) in the menu region, I have noticed some interesting behavior in the way the top-level of "buttons" work. Specifically, if I hover over one (to reveal the dropdown) suddenly the bottom half of the top-level button becomes unclickable. This is of course a serious UI issue as it makes it very difficult for someone to access a section "index" page represented by the top-level menu item when children menu items exist.
The anomaly does not happen if there are no children menu items below a given top-level menu item, so it would seem to be related to the css or javascript that renders the dropdown effect (somehow the dropdown items are obscuring the top-level a tag.
I have a feeling I can't be alone in this. Has anyone experienced this and had any luck addressing it?
Best,
Ryan
|
| |
ryan
|
Ok, I just dug into this a little.
It looks like the dropdown effect is done almost purely with CSS. This got me thinking about z-index settings. Sure enough, the top-level menu item links seem to have a z-index of "auto", but the boxes that contain the "fly-outs" have a z-index of 10. This seems to be problematic as these "fly-out" containers have some margin/padding characteristics that spill over onto the space of the top-level button. This "spill over" seems to be what it obscuring the clickability of the top-level button.
I tried adjusting the z-index of the top-level button with:
.art-menu a, .art-menu a:link, .art-menu a:visited, .art-menu a:hover {
z-index: 20;
}
... and have seen some promising results so far.
Can anyone confirm that this is a problem, and any thoughts on the potential solution above? Unless I am crazy, this would really seem like a very pesky UI issue that many would notice, and one that could be very easy to address by the Artisteer team (just CSS tweaks).
Ryan
|
| |
ryan
|
Ok, I spent a bit more time looking at this, and it looks like the CSS mods I noted above don't work in IE.
What seems to work across most browsers is the following:
.art-menu li.expanded a
{
z-index: 10000;
}
It looks like the generated artisteer CSS already sets a z-index of 10000 for .art-menu li:hover (which I guess makes sense), but when a leaf/fly-out is hovered-over it also takes on that z-index: 10000 and obscures the main menu bar button (even if it too has a z-index of 10000). It seems that applying the z-index to the "a" element gets around all this.
I'm not sure if this is a robust solution, or if problems would arise with multiple levels of fly-outs (I usually only use 1 level), but I though I would share.
This is a small/subtle problem, but one that certainly is annoying and distracting to the user experience.
Ryan
|
| |
Renderking
|
Hi Ryan!
I have exactly the same problem, but already working with Joomla 1.7 and Artisteer.3.0.0.41778.
Looks like the CSS is different there. I tried to adapt your fix to art-hmenu li.hover, but it sill is not working.
You have any new solution? I can not find anything else here in the forum.
Best, Jan.
|
| |
Hella
|
Hi,
I suggest you to try the latest updates from the news page (3.1 beta) and contact Artisteer support for the investigation.
Does the issue also happen with all Artisteer templates or only with the specific one? You may try to switch off the installed plug-ins and see if the issue goes away.
|
| |
Renderking
|
Hi Hella!
Well, I just realized i also is the case with our old Artisteer template.
I'm not sure yet if it happens with all or if plugins can be a problem, but I will give it a try.
Thanks.
|
| |
Martin
|
the following template.css change works for our joomla 1.7 installation:
.art-hmenu ul
{
visibility: hidden;
position: absolute;
z-index: 10;
left: 0;
top: 0;
background: none;
min-height: 0;
background-image: url('../images/spacer.gif');
padding: 0 30px 30px 30px; <----------- original: 10px 30px 30px 30px
margin: 0 0 0 -30px; <----------- original: -10px 0 0 -30px
}
Martin 
|
| |
|
|