Problem mit Menüerstellung

7bkahnt · 12. Mai 2010

Hallo Leute,
ich versuche ein normales Menü zu basteln mit Datei,.......
Datei soll aufklappen, wenn ich draufklicke und automatisch zu gehen wenn ich beispielsweise auf Bearbeiten klicke. Wie ein normales Menü halt.
Das hab ich mit onblur hinbekommen. Das Problem was ich jetzt habe, ist nun aber, dass wenn ich Datei klicke und dann etwas auswählen will, das auswählen nicht funktioniert, da eben onblur sofort greift.

Hier mal das Bild zum Menü:

Hier ist der Code dazu:

HTML:

function menue(identifier) {
 var element = document.getElementById(identifier);
 if (element.style.display == "block") {
  element.style.display = "none";
 } else {
  element.style.display = "block";
 }
}


function menue2(identifier) {
var element=document.getElementById(identifier);
element.style.display="none";
}
</script>
</head>

<body>

 <table border=0px align="center" width="100%">
 <tr >
 <td>
  <ul id="Navigation">
  
  <!-- Datei-->
    <li><a href="#" onclick="menue('a');return false;" onblur="menue2('a');return false;" href="#Beispiel"  >Datei</a>
    <ul id="a">
    <li><a id="datei"     href="#Beispiel">PWD setzen</a></li>
    <li><a id="datei"     href="hilfe.html">Hilfe</a></li>
    <li><a id="datei"     href="index.html">Beenden</a></li>
    </ul>
    </li>

Die id "a" ist in der css festgelegt mit display=none; festgelegt, sodass das Untermenü am Anfang ausgeblendet ist.
Immer wenn ich auf etwas anderes als auf "Datei klicke" schließt sich das Untermenü also. Das Problem ist eben, wenn ich im Untermenü auf "Hilfe" klicke, schließt sich ebenfalls das Untermenü, was ja eigentlich auch gut ist, aber es wird eben nicht auf die Seite verlinkt, welche unter "Hilfe" angegeben ist.
Ordnergeschichten können es nicht sein, da wenn ich onblur rausnehme, alles wunderbar funktioniert. Nur dann bleiben eben immer die Untermenüs offen bis ich wiederholt z.B. auf Datei klicke.

Es wäre ideal, wenn mir jemand helfen könnte.

Quaese · 17. Mai 2010

Hi,

vielleicht ist es geschickter, statt des onblur-Ereignisses das onmouseout-Ereignis zu verwenden. Hierfür wird eine Routine benötigt, die feststellt, ob das Element, auf das der Mauszeiger bewegt wird (Zielelement) ein Kind des Containers. Handelt es sich nicht um ein Kind und nicht um den Container selbst, wird der Navigationspunkt geschlossen.

Beispiel:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title>www.tutorials.de</title>
<meta name="author" content="Quaese">
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">
// Routine zum Bestimmen, ob ein Element Kindknoten eines übergeordneten Elements ist
// Parameter:
// objElem - (object) Element, das getestet werden soll, ob es Kindknoten ist
// objRoot - (object) optional; Element, das den Kindknoten enthalten soll (default: document)
isChild = function(objElem, objRoot){
  var blnRet = false;

  objRoot = (typeof objRoot == "undefined")? document : objRoot;
  var arrChildren = (document.all && !window.opera)? objRoot.all : objRoot.getElementsByTagName("*");

  for(var i=0; i<arrChildren.length; i++){
    if(arrChildren[i] == objElem){
      blnRet = true;
      break;
    }
  }
  return blnRet;
}

function menue(identifier) {
  var element = document.getElementById(identifier);
  if(element.style.display == "block"){
    element.style.display = "none";
  }else{
    element.style.display = "block";
  }
}

function menue2(objEvt, _this, identifier) {
  var objEvt = (window.event)? window.event : objEvt;

  // Zielelement bestimmen
  var objTo = (typeof objEvt.toElement != "undefined")? objEvt.toElement : ((typeof objEvt.relatedElement != "undefined")? objEvt.relatedElement : null);

  // Falls das Zielelement kein Kind UND das Zielelement nicht gleich dem Container ist
  if(!isChild(objTo, _this) && (_this!=objTo)){
    var element = document.getElementById(identifier);
    element.style.display = "none";
  }
}
</script>
<style type="text/css">
  <!--
#Navigation{}
#Navigation li{
  float: left;
  width: 200px;
}
#Navigation li li{
  clear: both;
}
#a, #b{
  display: none;
}
 //-->
</style>
</head>
<body>
<ul id="Navigation">
  <!-- Datei-->
  <li onmouseout="menue2(event, this, 'a');"><a href="#" onclick="menue('a'); return false;" href="#Beispiel"  >Datei</a>
    <ul id="a">
    	<li><a id="datei1"     href="#Beispiel">PWD setzen</a></li>
    	<li><a id="datei2"     href="hilfe.html">Hilfe</a></li>
    	<li><a id="datei3"     href="index.html">Beenden</a></li>
    </ul>
  </li>
  <!-- Bearbeiten-->
  <li onmouseout="menue2(event, this, 'b');"><a href="#" onclick="menue('b'); return false;" href="#Beispiel"  >Bearbeiten</a>
    <ul id="b">
    	<li><a id="datei4"     href="#Beispiel">PWD setzen</a></li>
    	<li><a id="datei5"     href="hilfe.html">Hilfe</a></li>
    	<li><a id="datei6"     href="index.html">Beenden</a></li>
    </ul>
  </li>
</ul>
</body>
</html>

Ciao
Quaese

Problem mit Menüerstellung

7bkahnt

Mitglied

Quaese

Moderator

Neue Beiträge