Seltsames "Visibility:Hidden" Problem beim Megamenu auf 2.11.1

**rezico** · 12.03.2012, 15:09

Hallöchen,
und zwar habe ich gerade das Update aufgespielt und jetzt habe ich folgendes Problem:
Ich habe das Megamenu wie gehabt eingebunden und die StyleSheets übernommen - jetzt erscheint beim Mouseover aber leider das Menü nicht mehr. (Überhaupt nicht).
Entferne ich jetzt im CSS Das Visibility:Hidden für das Dropdown erscheint das Menu und wird auch anständig animiert, leider wird es jetzt IMMER angezeigt, wenn ich die Seite lade, und nicht erst, wenn ich per Mouse-Over über den Hauptmenüpunkt gehe.

Geh ich mit der Maus aber dann einmal über den Punkt wird er wie gesagt ordentlich ausgeblendet bzw. eingeblendet.
Der Firebug findet auch keine Javascript-Fehler.

Hat jemand eine Idee?
Link gibts auch gerne per PN.

Danke!!

Hier mein CSS Code angepasst, der Kern ist aus der Wiki. Lass ich das visibility:hidden weg, bekomme ich den oben beschrieben Effekt.:

Code:

/* Die übliche Technik. Das div wird zunächst in den unsichtbaren Bereich
verschoben */
#mainnav li.submenu div.submenu
{
    left:-9999px;
    position:absolute;
    margin-left:0;
}

#mainnav .fade,
#mainnav .level_2
{
    position:absolute;
    margin-top:0;
    visibility:hidden;
    z-index:9999;
}

#mainnav .mm .fade,
#mainnav .mm .level_2
{
    left:20%!important;
}

#mainnav .drop div
{
    left:0!important;
}

Installiert ist diese Erweiterung (nicht megamenu-jquery)
http://www.contao.org/de/extension-l...020019.de.html

**rezico** · 16.03.2012, 08:51

Hiho,
auch hier nochmal ein ganz vorsichtiges (und letztes) nachfragen ob sich vielleicht doch jemand eine Idee hat.
ich kann es mir leider nicht erklären und googeln bringt auch überhaupt keine vernünftigen Ergebnisse.
Wäre wirklich sehr dankbar!

**K.R.** · 16.03.2012, 10:37

Update doch nochmal auf 2.11.2

Wenn das ganze auf MooTools zugreift, teste dochmal eine ältere MooTools-Version (1.3.2)

**fischkopp** · 20.03.2012, 15:36

Hi rezico,
hatte dasselbe Problem wie du. Ab MooTools Vers. 1.4 wird bei der tween-Methode dy CSS-Eigenschaft visibility nicht mehr auf "hidden"/"visible" gesetzt.
Daher muss diese einfach durch die fade-Methode getauscht werden. die MooMenu.js aus dem Modulordner muss folglich so aussehen:

Code:

/**
 *  Mootools Drop-Down Menü aka MooMenu
 *  basiert auf Standard CSS DropDown mit Fallback
 *
 *  Erläuterung:
 *  Es wird ein ganz normales Drop-Down-Menu mit CSS erstellt.
 *  Durch das Einbinden der MooMenu - Klasse wird das Menü animiert.
 *
 *  Die margins des animierten Objekts werden auf 0 gesetzt. Im Falle
 *  eines Grid-Systems kann der Außenabstand mittels padding wieder hergestellt
 *  werden.
 *
 *  Optionen:
 *  element : die ID der mod_navigation
 *  mode    : fade oder drop
 *  MooIn   : siehe Mootools Fx
 *  MooOut  : siehe Mootools Fx
 *  duration: Angabe in ms
 *
 *  (c) Oliver Lohoff, www.contao4you.de
 *  LGPL 3.0
 */

var MooMenu = new Class({

  Implements : Options,
    options: {
        element : 'mainnav',
        mode : 'drop',  // or 'fade'
        MooIn : 'bounce:out',
        MooOut : 'circ:out',
        durationin : '1000',
        durationout : '200'
    },

  initialize: function(options){
    this.setOptions(options);
    var id = $(this.options.element);
    var ul = id.getElement('ul');
    this.elements = ul.getElements('li.submenu');
    this.attach(this.options.mode, this.options.MooIn, this.options.MooOut, this.options.durationin, this.options.durationout);
  },

    attach: function(mode, MooIn, MooOut, durationin, durationout){
    this.elements.each(function(element, index) {
        var obj;
        if (element.getElement('div')) obj=element.getElement('div'); else obj=element.getElement('ul');
        if (mode == 'drop') {
            var div = new Element('div').wraps(obj);
            obj.setStyle('top', -obj.offsetHeight);
        } else {
            obj.addClass('fade');
        }
        element.addEvents({
            mouseenter: function(e){
                switch (mode) {
                  case 'drop' :
                        div.addClass('drop');
                        obj
                         .set('tween',{ transition: MooIn, duration: durationin })
                         .tween('top', 0);
                        break;
                  case 'fade' :
                  		obj.setStyle('opacity', 0);
                        obj
                          .set('tween', { transition: MooIn, duration: durationin })
                          .fade('in');
                        break;
                }
            },
            mouseleave: function(e){
                switch (mode) {
                case ('drop') :
                        var myFx = new Fx.Tween (obj, { transition: MooOut,
                                    duration: durationout,
                                    property:'top'
                                  });
                        myFx.start(-obj.offsetHeight).chain(function(){
                            div.removeClass('drop');
                        });
                     break;
                case ('fade') :
                    obj.setStyle('opacity', 1);
                    obj
                      .set('tween', { transition: MooOut, duration: durationout })
                      .fade('out');
                    break;
                }
            }
        });

    }, this);

    return this;
}
 
});

Beste Grüße
vom fischkopp