4.8CE Azure Hauptmenü Javascript

Deutsches Forum
1

Hallo zusammen,

ich nutze noch 4.8CE mit Azure. Es ist so, dass das Hauptmenü mit Submenüs ja beim hover ausklappt. Soweit so normal, nur ist das bei mir im Shop bei eier Kategorie so, dass die auf dem iPad Pro nicht komplett sichtbar ist. Per javascript wird beim hover immer ein margin-left:-175,xxxpx hinzugefügt. Sollte daher keine CSS sache sein, aber ich finde einfach nicht, wo und in welcher JS datei das ist.

Zur veranschaulichung: einfach auf www.katzenkontor.de gehen und mit der Maus über “Nassfutter” hovern. das aufklappende Menü soll weiter rechts sein. Vermutlich um genau diese 175px.

Kann mir jemand weiterhelfen?

2

der gesamte Kopf wird ja beim iPad (im Hochformat) rechts und links abgeschnitten da das iPad nur 768 Pixel anzeigt. Am besten auf 4.10. updaten und das responsive Theme verwenden

3

Ich muss mal vorsichtig nachfragen, wie du auf einem iPad pro mit der Maus über etwas “hoverst”?
Simulierst du den Browser agent auf dem Desktop oder hast du ein echtes Gerät und der stylus agiert wie Maus?
Auf meinem note 8 passiert jedenfalls rein gar nichts, wenn ich den stylus über Nassfutter halte, obwohl es normalerweise den Mauszeiger simuliert

4

ich gar nicht. Ein Bestandskunde hat sich beschwert und mir screenshots geschickt.
ich kenne die iPad Technik nicht, aber selbts mit meinem alten Samsung Galaxy s 5 kann ich hovern indem ich den finger ca 1cm oder weniger über den bildschirm halte aber den bildschirm nicht berühre.

Jedenfalls wird das Kontextmenü wohl am Ipad angezeigt, aber eben nicht korrekt, sondern zu weit links verschoben.

5

ipad2
ipad2.png640×479 86.5 KB

Hier noch ein Screenshot vom Kunden, von mir etwas zensiert :slight_smile:

7

okay, das Problem besteht darin, dass die Dropdowns zentriert werden.
öffne mal out/azure/src/js/widgets/oxtopmenu.js
du kannst entweder diesen Bereich auskommentieren:

// horizontaly centering top navigation first level popup accoring its parent
activeItem = this.parent()
if ( activeItem.parent().hasClass('sf-menu') ) {
  liWidth = activeItem.width();
  ulWidth = activeItem.width()*3;
  marginWidth = (liWidth - $('ul:first', activeItem).width()) / 2;

  var itemleft = activeItem.position().left + marginWidth;
  if (itemleft < 0) marginWidth -= itemleft;

  var pagewidth = $("#page").outerWidth(),
  itemright = activeItem.position().left + this.outerWidth() + marginWidth;
  if (itemright > pagewidth) marginWidth += pagewidth - itemright;

  $('ul:first', activeItem).css("margin-left", marginWidth);
}

dann ist diese Funktion komplett weg.
Oder die Bedingung so anpassen, dass es bei ipad nicht greift.
Eventuell anhand von window.innerWidth oder eifnach im Internet gucken, wie man allgemein iPad pro von Desktop unterscheiden kann

oder besser ab einer bestimmten Seitenbreite greift, unabhängig von iPad oder nicht iPad, denn auf dem Desktop mit kleiner Auflösung wäre das Problem auch da