Menüführung

Schüler

Hallo, ich hab ein Problem zu einer Menüsteuerung. ich hab jetzt schon mehrere Sachen probiert, aber ich komme einfach nicht auf die Lösung. Ich möchte einfach nur, das wenn ich mit der maus über ein Obermenü gleite, der weitere Menübaum aufgeht. Andere Untermenüs sollen sich dann natürlich wieder schließen.

Mit If-Verzweigungen kam ich net drauf, und jetzt dachte ich mir,probiere ich es doch mal, mit switch case. Wäre echt dankbar, wenn mir jemand meinen Fehler erklären könnte.

<html>
<head>
<title>index.html</title>
<meta name="author" content="Jochen1">
<style>
	div.hauptmenue{
        background-color:#c0c040;
		cursor:hand;
		visibility:visible;
		}
  	div.untermenue{
        background-color:#c0c040;
        visibility:hidden;
          }
	div.untermenue{
        background-color:#c0c040;
        }
</style>
<script language="JavaScript">
	var menuepunkte=new Array();

		 menuepunkte[0]=new Array("Produkte","a");
         menuepunkte[1]=new Array("Dienstleistungen","a");
         menuepunkte[2]=new Array("News","a");
         menuepunkte[3]=new Array("Projekte","a");
         menuepunkte[4]=new Array("Referenzen","a");
         menuepunkte[5]=new Array("Kontakt","a");
         menuepunkte[6]=new Array("Links","Partner","Referenzen");
         menuepunkte[7]=new Array("Impressum","a");

		/*function dropdownmenue(nummer){
			var untermenue = document.getElementById("uH"+nummer);
			var obermenue  = document.getElementById("H"+nummer);
			if(nummer==6){
				document.write()
				}*/

    	function sethidden(nummer){
    		var puffer = document.getElementById("uH"+nummer);
    		puffer.style.visibility="hidden";
    		}

    	function setvisible(nummer){
    		var puffer = document.getElementById("uH"+nummer);
    		//puffer.style.visibility="visible";

    		switch (puffer) {
  				case "uH0":
    				puffer.style.visibility="visible";
    				break;
 				case "uH1":
    				puffer.style.visibility="visible";
   				 	break;
  				case "uH2":
    				puffer.style.visibility="visible";
    				break;
  				case "uH3":
    				puffer.style.visibility="visible";
    				break;
    			case "uH4":
    				puffer.style.visibility="visible";
    				break;
    			case "uH5":
    				puffer.style.visibility="visible";
    				break;
    			case "uH6":
    				puffer.style.visibility="visible";
    				break;
  					}
    		}

    	/*function uumeinblenden(nummer){
    		var puffer = document.getElementById("uH"+nummer);
    		if(nummer==6){
    			document.write("<div style=position:absolute;left:300;top:400>"); 
    			document.write("hallo");
    			document.write("</div>");
    			}
    		}*/
</script>
</head>
<body text="#000000" bgcolor="#FFFFFF" link="#FF0000" alink="#FF0000"
	vlink="#FF0000">

<script language="JavaScript">
	//Schreibt Hauptmenue
	for(var x=0;x<menuepunkte.length;x++){
		document.write("<div class='hauptmenue' id='H"+x+"' style='position:absolute;"+
				"left:20;top:"+(100+(20*x))+";width:100' onmouseover='setvisible("+x+")'>");
    	document.write(menuepunkte [x][0]);
    	document.write("</div>");
		}

	//Schreibt Untermenue
	for(var y=0;y<menuepunkte.length;y++){
		document.write("<div class='untermenue' id='uH"+y+"' style='position:absolute;"+
				"left:126;top:"+(100+(20*y))+";width:100'>");
		document.write(menuepunkte [y][1]);
		document.write("</div>");
		}

	//Steuerung im Menü

</script>

</body>
</html>

sowas geht auch ganz gut mit CSS
dann hat man zB keine probleme wenn der client javascript deaktiviert

Xato

designerin schrieb:

sowas geht auch ganz gut mit CSS
dann hat man zB keine probleme wenn der client javascript deaktiviert

Quark, in CSS ist keine Dynamik drin, also es kann nichts anders sein, nur weil ein user auf einen Button geklickt hat -> geht also nicht.

Das mit dem Menü geht so in etwa:

//javascript
function showhide(id)
{
 var x=document.getElementById('menu'+id).style;
 if(x.display=='none')
  x.display='block'; 
 else
  x.display='none';
}

<a href="java\1:showhide(1);">Menü1</a>
<div id="menu1" style="display: none;">
<a href="unterpunkt">unterpunkt</a>
<a href="unterpunkt">unterpunkt</a>
<a href="unterpunkt">unterpunkt</a>
</div>
<a href="java\1:showhide(2);">Menü2</a>
<div id="menu2" style="display: none;">
<a href="unterpunkt">unterpunkt</a>
<a href="unterpunkt">unterpunkt</a>
<a href="unterpunkt">unterpunkt</a>
</div>

So sollte es in etwa gehen, da braucht man weder ne Case Schleife, noch sonstwas kompliziertes

Xato schrieb:

designerin schrieb:

sowas geht auch ganz gut mit CSS
dann hat man zB keine probleme wenn der client javascript deaktiviert

Quark, in CSS ist keine Dynamik drin, also es kann nichts anders sein, nur weil ein user auf einen Button geklickt hat -> geht also nicht.

soweit ich des verstanden hab geht es darum dass ein untermenü gezeigt wird wenn man mit der maus über einen bestimmten menüpunkt fährt und nicht wenn man draufklickt
und sowas geht definitiv mit CSS !!!

beispiel (nicht getestet):

<style type="text/css">

div.aussen div.innen{display:none; ...}
div.aussen:hover div.innen {display: block; ...}

</style>

<div class="aussen">
<div class="innen">BLABLABLA</div>
</div>

so oder zumindest so ähnlich (habs ja nicht getestet) gehts und natürlich nicht nur mit div's
und da soll dann keine dynamik drin sein... tss...

Xato

designerin schrieb:

so oder zumindest so ähnlich (habs ja nicht getestet) gehts und natürlich nicht nur mit div's
und da soll dann keine dynamik drin sein... tss...

Oh, ich dachte das mit den Hovers geht nur bei a´s Naja, ich hab deinen Code verändert ausprobiert, es klappt wirklich

flenders

http://meyerweb.com/eric/css/edge/menus/demo.html

Schüler

Danke für die Hilfe!!!

Schüler

Also das mit dem display hat mir auch geholfen und auch die Funktion. Ich hatte das Problem auch gelöst nur eben, mit einem langen if - else code.

Nur hab ich immer noch ein paar komische Probleme die ich beim besten Willen nicht verstehe.

function setvisible(para1,para2,para3){
    		var puffer1 = document.getElementById(para1).style;
    		var puffer2 = document.getElementById(para2).style;
    		var puffer3 = document.getElementById(para3).style;
    		if(puffer1.display=="none"&&puffer2.display=="none"&&puffer3.display=="none"){
  				puffer1.display="inline";
  				puffer1.display="inline";
  				puffer2.display="inline";
 				puffer3.display="inline";
 				}
 				else{
 					puffer1.display=="none";
  					puffer2.display=="none";
  					puffer3.display=="none";
 					}
 				}

I.
puffer1.display="inline";
puffer1.display="inline";
puffer2.display="inline";
puffer3.display="inline";

Hier ist es so, das wenn ich nicht zweimal puffer1.display="inline"; er mir nie den ersten Puffer ausgibt, sonder immer nur 2 und 3.

[b]II.

Ich hab eine oben bereits erwähnte Funktion auf eine Funktion mit 3 Parametern umgebastelt. Nur so, wie sie da steht will er mir gar keine Untermenüs anzeigen.
Lasse ich den else Block und die Anweisungsblock-klammern auch weg. Werden mir die Menüs angezeigt aber nicht ausgeblendet.

Ich verstehe einfach net, warum diese Funktion mit den 3 Parametern nicht funktioniert.