nicht angemeldet
Problem beim schreiben eines Menues
hi
ich versuche gerade ein Menue im office-style* zu schreiben und stoße dabei auf ein kleines Problem.
hier erstmal meine bastel-source (nicht schön aber selten ;)):
<html>
<head>
<title>Unbenannt</title>
<style type="text/css">
.menue {font-family : "MS Sans Serif", Arial, Helvetica, Sans-Serif; font-size : 12px; color : #000000; background-color : #D4D0C8; line-height: 18px; border-left : 1px solid #e0e0e0; border-top : 1px solid #e0e0e0; border-right : 1px solid #7F7F7F; border-bottom : 1px solid #7F7F7F; padding : 4px; padding-left : 5px;}
</style>
<script type="text/javascript">
//Das Element
var findobjekt = null;
// Position des Elements
var posx = 0;
var posy = 0;
// Hoehe und Breite des Elements
var sizex = 0;
var sizey = 0;
function pos(element,ID) {
findobjekt = element;
posx = findobjekt.offsetLeft;
posy = findobjekt.offsetTop;
sizex = findobjekt.offsetWidth;
sizey = findobjekt.offsetHeight;
var subposx = posx;
var subposy = posy + sizey;
var subID = ID + "_sub";
document.getElementById(subID).style.top = subposy+"px";
document.getElementById(subID).style.left = subposx+"px";
hide(subID);
}
function hide(ID) {
if (document.getElementById(ID).style.display == "none") {
document.getElementById(ID).style.display = "block"; }
else {
document.getElementById(ID).style.display = "none"; }
}
</script>
</head>
<body>
<span id="item_1" class="click" onclick="pos(this, this.id);">MenueItem</span>
<div id="item_1_sub" class="menue" style="position: absolute; display: none;" onmouseout="hide(this.id);">
SubMenueitem 1<br>
SubMenueitem 2<br>
SubMenueitem 3<br>
</div>
</body>
</html>
diese Version funktioniert zur zeit im IE so wie gedacht und im mozilla mit nem kleinen abstrich, was zur zeit aber halb so wild ist.
und nun zu meinem problem:
Wenn ich die SubMenueItems in ein <a>, <span> oder sonstiges packe bekommt das ganze so hässliche zuckungen.
Wenn ich das richtig deute überlagert in diesem fall das <a> oder <span> das <div> und somit wird das onmouseout erfüllt.
Wie bekomme ich es hin, das das <div> nur ausgeblendet wird wenn der äußere rahmen des divs verlassen wird?
Anders ist das Menue ja nicht wirklich nutzbar :(.
so long
ole
(8-)>
-
hi
auf was man nicht alles beim basteln stößt *grummel*.
ich habe ein <div> dem ich eine hintergrundfarbe als HEX zugewiesen habe, z.B. #000000;
nun soll beim überfahren die hintergrundfarbe des bildes geändert werden. und was stell ich da fest? obwohl ich den hintergrund als HEY angegeben habe spuckt mozilla mir einen rgb wert aus, genauer gesagt den string "rgb(0 , 0, 0)" IE sagt dazu "#000000"
da hab ich mir gedacht, gibstes doch gleich den rgb wert an.gesagt getan, nun steht im style also "rgb(0, 0, 0)" und wieder das ganze ausgeben lassen. mozilla versteht es jetzt und was macht der IE...der rationalisiert die leerzeichen einfach weg, so das für ihn da "rgb(0,0,0)" steht.
Ist doch echt zum verrücktwerden...da muß man ja hunderte von abfragen zwischenpacken *grummel*
so long
ole
(8-)> -
Du hast Probleme mit dem event-bubbling. Die inneren Elemente decken beim Erscheinen tatsächlich das äußere Element ab und lösen einen onmouseout-event aus.
Setze in das äußere Element folgende onmousout-routine:
onmouseout="if (document.all) {
if (!this.contains(event.toElement))
javascript:changeMenu('');
}
else if (document.getElementById) {
if (!containsNN6(this, event.relatedTarget))
javascript:changeMenu('');}"für den Mozilla brauchen wir dann die Funktion containsNN6:
function containsNN6 (container, containee)
{
var isParent = false;
do {
if ((isParent = container == containee))
break;
containee = containee.parentNode;
}
while (containee != null);
return isParent;
}und natürlich für alle noch die Funktion die das Menue ändern soll, im Beispiel heißt sie changeMenu().
MfG
Klaus