Menü richtig positionieren

[Daimonion]

Ich bin gerade dabei für eine Bekannte eine Internetseite zu gestalten und hänge ein wenig an der korrekten Positionierung des Menüs.

Hier erst mal der derzeitige Status der Seite: Meisterkonditorei Kirsch

Als Menüvorbild hab ich mir das Menü von Spruengli.ch.de genommen.

Vielleicht erst mal ein wenig Code.
Aufgerufen wird das Menü mittels mouseOver Event:

<div id="menupoint1" class="menupoint" onMouseOver="showMenu('menupoint1','Menu1')">Torten</div>

Die Funktion showMenu sieht derzeit so aus:

function showMenu(mpoint, menu) {
	var menupoint = document.getElementById(mpoint);
	//neue Elemente generieren
	var MenuBox = document.createElement("div");
	MenuBox.id = "Menubox1";
	
	for (i = 0 ; i < Menu1.length ; i++) {
		MenuBox.appendChild(document.createTextNode(Menu1[i]));
		MenuBox.appendChild(document.createElement("br"));
	}
	
	//Eigenschaften vergeben
	MenuBox.style.width = 150 + "px";
	MenuBox.style.backgroundColor = "#4a2910";
	MenuBox.style.color = "#FFFFFF";
		
	//menubox positionieren
	MenuBox.style.position = "absolute";
	
	MenuBox.style.left = menupoint.style.left;
	MenuBox.style.top = menupoint.style.top;
	
	//Event für das MouseOut Ereignis hinzufügen
	if (MenuBox.addEventListener) {
		MenuBox.addEventListener("mouseout", hideMenus, false);
   	} else if (MenuBox.attachEvent) {
		MenuBox.attachEvent("onmouseout", hideMenus);
   	}
	
	
	//Objekt im Dom einfügen
	menupoint.parentNode.insertBefore(MenuBox,menupoint.nextSibling);
	
};

function hideMenus() {
	var Menubox = document.getElementById("Menubox1");
	Menubox.parentNode.removeChild(Menubox);
	
};

Die Funktion ist lange noch nicht fertig, daher kann es sein, dass die ein oder andere Codezeile noch nicht sauber implementiert ist.

Momentan liefert dieses Stück Code folgendes Ergebnis in eigentlich allen Browsern:



Nun könnte man meinen, dass die beiden Zeilen

	MenuBox.style.left = menupoint.style.left;
	MenuBox.style.top = menupoint.style.top;

für dieses Ergebnis verantwortlich sind, aber das ist nur im ersten Moment so, da die Eigenschaft top bzw. left beim CSS Layout für menupoint gar nicht vergeben sind, diese Felder unter JS somit quasi leer sind. Die derzeitige Position ist somit eine Interpretation der Browser.

Wenn ich nun anstelle:

MenuBox.style.top = 225 + 'px';

in der Funktion schreibe, dann zeigt mir mein Opera das zwar mit korrektem Abstand an, aber die anderen Browser interpretieren die Massangabe natürlich anders und es kommt wieder zu Verschiebungen. Ganz schlimm ist der IE7, der die Eigenschaft left völlig versaut (Über den Kompatibilitätsmodus angeschaut.)


Nun mein Frage an euch. Wie kann ich denn die Positionierung bewerkstelligen, dass sie Konform mit CSS ist und auch in allen relevanten Browsern (Opera, FF > 3, IE > 7, Safari, Chrome) gleich dargestellt werden kann?

Danke für eure Hinweise.

Grüße
Daimonion

[Novi]

(...)da die Eigenschaft top bzw. left beim CSS Layout für menupoint gar nicht vergeben sind, diese Felder unter JS somit quasi leer sind. Die derzeitige Position ist somit eine Interpretation der Browser.(...)

Dann nimm doch die richtige Eigenschaft
http://de.selfhtml.org/javascript/ob...tm#offset_left
http://de.selfhtml.org/javascript/ob...htm#offset_top

[Daimonion]

Danke.

Erste Antwort, Volltreffer. So macht das Forenleben spaß. Die beiden Eigenschaften kannte ich bisher noch gar nicht. Aber man lernt ja nie aus...

Derzeit zeigen mir alle Browser das Menü korrekt an. Bis auf den IE7 (Kompatibilitätsansicht im IE8). Dort wird mir die Eigenschafft offsetLeft des Elternelement mit 0 ausgegeben.
Gibt es dafür einen Workaround? Den IE7 wollte ich eigentlich noch mitnehmen in der Liste der kompatiblen Browser für die Seite.

Danke nochmal und Grüße
Daimonion

[Novi]

Derzeit zeigen mir alle Browser das Menü korrekt an. Bis auf den IE7 (Kompatibilitätsansicht im IE8). Dort wird mir die Eigenschafft offsetLeft des Elternelement mit 0 ausgegeben.

Was geben den die anderen Browser aus? Vielleicht ist der Unterschied nur im Bereich eines Paddings oder Margins, der im IE anders behandelt wird.

[Daimonion]

Hmm, ne, da wo die anderen Browser das Menü richtig unter den einzelnen Div positionieren, zeigt der IE7 das Menü links oben in der Ecke an..

Ich mach nochmal nen Test fertig und poste den dann gleich noch mal.

So, unter

http://kirsch-konditor.de/menutest

seht ihr mal meinen derzeitigen Stand. Mit der Kompatibilitätsansicht, seht ihr auch, was noch nicht geht.

[Novi]

Hi,

probiere mal ein bisschen mit position;relative rum.

[Daimonion]

So, mittlerweile hab ich das Menü soweit hinbekommen, dass es (bis auf 1 Pixel) in den üblichen Browsern (FF, Opera, Safari, Chrome, IE7-8) korrekt angezeigt wird.

Lediglich im IE7 hab ich noch einen Pixel versatz, den ich aber bestimmt noch raus bekomme. Dann gehts noch an die Events die das Menü nach bestimmten Nutzerverhalten wieder schließen und dann bin ich fertig. Sobald das komplette Menü steht möchte ich euch den Code nicht vorenthalten. Vielleicht brauch ihn dann ja mal jemand, der nicht so ein schwergewicht wie auf spruengli.ch einsetzen möchte, aber auch keine UL,LI liste machen will, weil vielleicht ein CMS dahintersteckt. Momentan ist da noch zu viel gehacke.

Daher hier erst mal die Stelle der Positionierung:

//berechne Position
var ul = menupoint;
posX = 0;
posY = 0;
do {
	posX += ul.offsetLeft;
	posY += ul.offsetTop;
	ul = ul.offsetParent;
} while(ul != null);
MenuBox.style.top = posY + 22 + 'px';
MenuBox.style.left = posX + 'px';

[Novi]

Hi,

in der aktuellen Version, die online zu sehen ist, hast du einen Tippfehler, der verhindert, das es in Opera geht:

<bodyY<div id="layout">

[Daimonion]

Ja, hab ich vorhin auch bemerkt. GRML..

Hab gerade nen neuen Test hochgeladen.

[Novi]

Hi,

vielleicht sind im IE7 ja auch nicht die Menüs um einen Pixel falsch sondern die Bilder darunter.

[Daimonion]

Mensch, Stimmt, du hast recht. Danke für den Tipp.

Werde dahingehend mal nacharbeiten.

Edit:

So, jetzt hab ich in meinem Main-Div noch einen Pixel dazugemacht und nun schauts unter den 6 großen gleich aus. Man, war das ne Geburt.

Ich bin für einheitliche Webstandards...

[Daimonion]

So, nachdem ich nun diese doch recht schwierige Geburt verdaut habe, hab ich noch ein Problem mit den Events, die das Menu natürlich auch wieder verschwinden lassen sollen, wenn die Maus aus diesem verschwindet.

Folgende Menüstruktur füge ich im DOM ein

<div id="MenuBox" style="position: absolute; left: 223px; top: 225px">
<div class="menuentry">Schwarzwaelder Kirschtorte</div>
<div class="menuentry">Hochzeitstorten</div>
<div class="menuentry">Kuchen</div>
<div class="menuentry">verschiedene</div>
<div class="menuentry">Zusatz</div>
</div>

Der Code, welcher diese Struktur einfügt sieht derzeit wie folgt aus:

Menu1 = new Array("Schwarzwaelder Kirschtorte", "Hochzeitstorten", "Kuchen", "verschiedene", "Zusatz");
Menu2 = new Array("kleine Torten1","kleine Torten2");
Menu3 = new Array("Desert1","Desert2");
Menu4 = new Array("Specials1","Specials2");
Menu5 = new Array("Kontakt","Anfahrt","Impressum","sonstiges");

function showMenu(mpoint, menu) {
	//schließe noch geöffnete Menüpunkte
	hideMenus();
		
	var menupoint = document.getElementById(mpoint);
	//neue Elemente generieren
	var MenuBox = document.createElement("div");
	MenuBox.id = "MenuBox";
	
	//wir sollten noch prüfen, dass es sich hier wirklich um unser Array handelt
	var aktMenu = window[menu];
	
	for (i = 0 ; i < aktMenu.length ; i++) {
		var aktNode = document.createElement("div");
		
		aktNode.className ="menuentry";
		
		aktNode.appendChild(document.createTextNode(aktMenu[i]));
		MenuBox.appendChild(aktNode);
	}
		
	//menubox positionieren
	MenuBox.style.position = "absolute";
	var ul = menupoint;
	posX = 0;
	posY = 0;
	do {
		posX += ul.offsetLeft;
		posY += ul.offsetTop;
		ul = ul.offsetParent;
	} while(ul != null);
	
	MenuBox.style.left = posX + 'px';
	MenuBox.style.top = posY + menupoint.offsetHeight + 'px';
	
	//Event für das MouseOut Ereignis hinzufügen
	if (MenuBox.addEventListener) {
		//blende Menüs wieder aus, wenn die Maus nicht mehr drauf zeigt
		MenuBox.addEventListener("mouseout", hideMenus, false);
   	} else if (MenuBox.attachEvent) {

   	}
	//Objekt im Dom einfügen
	menupoint.parentNode.insertBefore(MenuBox,menupoint.nextSibling);
	
};

function hideMenus() {
	var MenuBox = document.getElementById("MenuBox");
	if (MenuBox) MenuBox.parentNode.removeChild(MenuBox);
	
};

Soweit funktioniert das Event zum Menü ausblenden auch. Nur leider wird die Ausblendfunktion, also die die ich beim EventListener angegeben habe, schon nachdem der Mauszeiger aus dem ersten Eintrag wandert, aber noch in dem eigentlichen Menü drin ist.

Testen könnt ihr das unter http://www.kirsch-konditor.de/menutest

Ich finde keinen Ansatz der dieses Problem beheben kann. Auch finde ich keine Erklärung dafür.

Könnt ihr mir da nochmal etwas auf die Sprünge helfen?

[Falk Prüfer]

Hallo,

was mir nicht ganz klar ist: Warum verwendest du für solch ein simples Menü Javascript? Dies hat einen haufen Nachteile und da du keine Gimmicks - wie Animation oder Fadein/Fadeout - verwendest, bietet es nichtmal einen Vorteil.

Gruß Falk

[Falk Prüfer]

Hallo Daimonion,

hab mal einen Vorschlag angehängt, der gänzlich auf JS für das Menü verzichtet und trotzdem die gleiche Funktionalität wie deine Lösung bietet.
Vorteile: semantisch richtige Auszeichnung, alle Menüpunkte/Links stehen im HTML und kann auch von alternativen Browsern (ohne JS) und Sumas (ganz wichtig!) gelesen werden. Funktioniert problemlos mit aktuellen Browsern (IE, Opera, FF).

Gruß Falk

[Daimonion]

Ich weiß, dass das ganze auch ohne Probleme ohne Javascript geht. Gibts ja zu Hauf im Internet. Sicher ist auch dein Beispiel vom Prinzip her vollkommen ausreichend und sicher ist es semantisch auf richtig.

Aber ich möchte auch verstehen wie die ganze JS Geschichte funktioniert und persönlich sehe ich auch noch diverse andere Vorteile in einem JS Menü.

Was die Kompatibilität mit den Browsern an geht; Ich hab das Menü unter allen wichtigen Browsern vom IE7-8, Opera, Safari, Chrome, Firefox getestet. Und ich bin der Meinung, dass 99% der Besucher dieser Seite JS aktiviert haben.