nicht angemeldet
Betriebsblind? Abfrage nach Element realisieren
Hi
bin mit meinem Menue schon recht weit gekommen. Die einzelnen Submenues blenden sich ohne probleme ein und aus, nur ein kleines problem bleibt noch.
eigentlich sollen sich meine submenues ausblenden wenn man im hauptmenu auf den submenue-eigenen oberpunkt klickt, doch bisher verschwindet das menue nur kurz um dann wieder zu erscheinen.
hier erstmal die source (sollte eigentlich unter IE 6 und moziall 1.4 laufen):
==============================================================
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Menue</title>
<style type="text/css">
.normal {font-family : "MS Sans Serif", Arial, Helvetica, Sans-Serif; font-size : 12px; color : #000000; background-color : #D4D0C8; height : 25px; border : 1px solid #D4D0C8; padding : 4px; padding-left : 5px; }
.over {font-family : "MS Sans Serif", Arial, Helvetica, Sans-Serif; font-size : 12px; color : #000000; background-color : #D4D0C8; height : 25px; 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;}
.click {font-family : "MS Sans Serif", Arial, Helvetica, Sans-Serif; font-size : 12px; color : #000000; background-color : #D4D0C8; height : 25px; border-left : 1px solid #7F7F7F; border-top : 1px solid #7F7F7F; border-right : 1px solid #e0e0e0; border-bottom : 1px solid #e0e0e0; padding : 4px; padding-left : 5px;}
.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;}
.unselect {color : #000000; background-color : #D4D0C8;}
.select {color : #ffffff; background-color : #0A246A;}
</style>
<script type="text/javascript">
var findobjekt = null;
var visible = "";
var offen = 0;
// Position des Elements
var posx = 0;
var posy = 0;
// Hoehe und Breite des Elements
var sizex = 0;
var sizey = 0;
// Einblenden der Menues an der richtigen Stelle
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";
if (document.getElementById(subID).style.display == "none") {
document.getElementById(subID).style.display = "block";
document.getElementById(subID).focus();
}
else {
document.getElementById(subID).style.display = "none"; }
}
// Soll bewirken das das Element ausgeblendet wird sobald es den Focus verliert
function hide(ID)
{
document.getElementById(ID).style.display = "none";
}
// Status auf "mouseover" setzen
function change(ID)
{
document.getElementById(ID).className = "over";
}
// Status auf "nomouse" setzen
function zur(ID)
{
document.getElementById(ID).className = "normal";
}
// Status auf "angeklickt" setzen
function klick(ID)
{
document.getElementById(ID).className = "click";
}
// markieren und demarkieren von Menueeintraegen
function markit(ID)
{
if (document.getElementById(ID).className == "unselect")
{
document.getElementById(ID).className = "select";
}
else
{
document.getElementById(ID).className = "unselect";
}
}
</script>
</head>
<body>
<div name="submenu" id="item_1_sub" class="menue" style="position: absolute; display: none;" onblur="hide(this.id)">
<div id="item_1_sub_1" class="unselect" onmouseover="markit(this.id);" onmouseout="markit(this.id);">SubMenueitem 1</div>
<div id="item_1_sub_2" class="unselect" onmouseover="markit(this.id);" onmouseout="markit(this.id);">SubMenueitem 1</div>
<div id="item_1_sub_3" class="unselect" onmouseover="markit(this.id);" onmouseout="markit(this.id);">SubMenueitem 1</div>
</div>
<div name="submenu" id="item_2_sub" class="menue" style="position: absolute; display: none;" onblur="hide(this.id)">
<div id="item_2_sub_1" class="unselect" onmouseover="markit(this.id);" onmouseout="markit(this.id);">SubMenueitem 1</div>
<div id="item_2_sub_2" class="unselect" onmouseover="markit(this.id);" onmouseout="markit(this.id);">SubMenueitem 1</div>
<div id="item_2_sub_3" class="unselect" onmouseover="markit(this.id);" onmouseout="markit(this.id);">SubMenueitem 1</div>
</div>
<div name="submenu" id="item_3_sub" class="menue" style="position: absolute; display: none;" onblur="hide(this.id)">
<div id="item_3_sub_1" class="unselect" onmouseover="markit(this.id);" onmouseout="markit(this.id);">SubMenueitem 1</div>
<div id="item_3_sub_2" class="unselect" onmouseover="markit(this.id);" onmouseout="markit(this.id);">SubMenueitem 1</div>
<div id="item_3_sub_3" class="unselect" onmouseover="markit(this.id);" onmouseout="markit(this.id);">SubMenueitem 1</div>
</div>
<span id="item_1" class="normal" onmouseover="change(this.id);" onmouseout="zur(this.id);" onclick="klick(this.id); pos(this, this.id);">
HauptMenue 1
</span>
<span id="item_2" class="normal" onmouseover="change(this.id);" onmouseout="zur(this.id);" onclick="klick(this.id); pos(this, this.id);">
HauptMenue 2
</span>
<span id="item_3" class="normal" onmouseover="change(this.id);" onmouseout="zur(this.id);" onclick="klick(this.id); pos(this, this.id);">
HauptMenue 3
</span>
</body>
</html>
==============================================================
ich hab schon versucht eine abfrage in die pos() funktion einzubauen, bin aber irgendwie gescheitert :(.
der versuch sah so aus:
if (document.getElementById(subID).style.display == "none") {
document.getElementById(subID).style.display = "block";
document.getElementById(subID).focus();
}
else if (document.getElementById(ID).focus() == "true") {
document.getElementById(subID).style.display = "none"; }
}
ist aber wohl nen ziemlicher denkfehler drin :(
kann mir jemande auf die sprünge helfen?
thx
ole
(8-)>
-
Hi,
vielleicht lieber mit einem Merker arbeiten, der den offenen Menuepunkt speichert?
// Einblenden der Menues an der richtigen Stelle
// flag
var aktState = 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";if (aktState) {
document.getElementById(aktState).style.display = "none";
}
if (aktState != subID) {
document.getElementById(subID).style.display = "block";
aktState = subID;
} else {
aktState = 0;
}}
...nur grob getested...
Gruesse Joachim