Fork me on GitHub

menutree 2.2 display problem in zikula 1.2 blankthemes  Bottom

  • I was able to get menutree 2.2 work in zikula 1.2. However there's some display problem: when I hover over a drop down menu, the drop down menu appears, but I can only see the very top part of it (not even the whole first item). It's like the rest of the items is behind some curtain - I know there're there just can't see them. This occurs in all themes I downloaded from blankthemes.org and also the ones that came with zikula 1.2, for all menutree styling (I was using css_prodrop most of the time). I thought it's a z-index problem, but playing with the z-indexes in menutree's CSS files didn't fix it. It appears the blankthemes use css_prodrop to style the top navigation menu for admin pages and it displays fine (the dropdown menu appears at the top layer and is visible), but I wasn't able to fix the menutree problem by examining the blankthemes' CSS files.

    Does anyone have similar experience and know where the problem lies? Many thanks.
  • by the way I tested with both firefox(3.0) and IE (6.0), same problem occurs.
  • Hi,

    what themes did you use (they can be based on BlankTheme, but styling can be much different for every theme)? This can be a problem if the menu is inside the header div. The header is normally of class floatbox, which sets overflow:hidden. This means that when the menu is inside the header it cannot flow outside the #header div and thus you see nothing.
    The default BlankTheme should work fine, since the menu is be outside the header, that is also the case for the admin menu.

    Check out Firebug for firefox BTW, you can check what happens when you switch off a certain style definition in the style sheets without actually changing them.

    You can solve it by adding overflow:visible to the #header definition, or by removing the floatbox class on the header. But do check out if everything else in the theme is still ok. Placing the menu outside the header also works, but that might mess up your theme.

    --
    campertoday.nl, Module development, Dutch Zikula Community
  • Thanks Erik. It's exactly as you pointed out. Removing the floatbox class from the header division (and another division inside the header division) solved the problem.

    The menutree menus look very nice. However, for multi-level menus with chromestyle and ddtabs styling in BlankThemes (most Blankthemes, e.g. Converge and Envision), the submenus do not appear at the right position when I hover over the top level menu items. The shifts in x and y directions relative to the parent item seem to be miss-calculated. I looked at the js function that calculates these shifts but it's just too complicated for me to figure out where the problem could be. Is this a known issue or it's just because I didn't configure it right? I can live without using these stylings but it's nice to have them work right.

    Again thanks for the wonderful menutree templates, I appreciate your work.
  • Do you have a URL for the menu offset problems? It's hard to figure these kind of things out without the actual menu. Are the cssplay (simpledrop and prodrop) working fine BTW? I must admit these menus have gotten more attention for these kind of things.
    It might be that in the chrome and ddtabs menus there are some optimizations possible still to make it work in a wider range of themes. It usually requires some additional margin definition, cause the header or navigation div margin definitions mess up the internal margins of the menu.
    The problem could also be that the submenu divs that these menu use should be outside the header div. I have been thinking about that also in the back of my head icon_smile Some update might be needed to get the submenu divs to render at the bottom of the page instead of inside the header div. But an online example might help there icon_smile

    --
    campertoday.nl, Module development, Dutch Zikula Community

This list is based on users active over the last 60 minutes.