✔ Java Script Menü

M

Mr Mr Mazen

Mitglied
Hallo,

ich habe folgendes problem, ich möchte gern ein Java Script Menü auf meine Homepage stellen, habe jetzt auch schon tagelang rumprobiert. In einem anderen thread habe ich dieses Menü gefunden, allerdings bräuchte ich das Menü nicht waagerecht sondern Senkrecht. Kann mir jemand sagen wie ich das hinbekomme? Die Unterfenster des Menüs sollten dann jeweils auf der Stufe öffnen, wo das Bild des Obermenüs liegt.
Irgendwie schwer zu erklären, deswegen nochmal eine Skizze, ich hoffe Ihr versteht dann was ich meine. Danke schonmal im vorraus für Eure Hilfe

Menü: | Untermenü:
|
+ - - - - + | + - - - - +
+ - - - - + | + - - - - +
+ - - - - + | + - - - - +
+ - - - - + | + - - - - +
| + - - - - +
| + - - - - +



Code: 
 <script type="text/javascript">

  var subs=new Array('sub1','sub2','sub3','sub4');
  var zeit='';
  function tmeout()
  {
	zeit=setTimeout('hideall()',800);
  }
  function hideall()
  {
	for(x=0; x<subs.length;x++)
	{
	  document.getElementById(subs[x]).style.visibility='hidden';
	}
  }
  function display(ele)
  {
	clearTimeout(zeit);
	for(x=0; x<subs.length;x++)
	{
		if(subs[x]!=ele)
		{
	  		document.getElementById(subs[x]).style.visibility='hidden';
		}
	}
	document.getElementById(ele).style.visibility='visible';
  }
  </script>

<body>
<div style="width: 100%; float: none;">
	  <div onmouseover="display('sub1');" onmouseout="tmeout();">Test1</div>
	  <div onmouseover="display('sub2');" onmouseout="tmeout();">Test2</div>
	  <div onmouseover="display('sub3');" onmouseout="tmeout();">Test3</div>
	  <div onmouseover="display('sub4');" onmouseout="tmeout();">Test4</div>
</div>
<div style="width: 100%; float: left;">
	<div style="float: left; width: 150px; visibility: hidden; margin-left:0px; border: 1px solid #000000" id="sub1" onmouseover="clearTimeout(zeit);" onmouseout="tmeout();" onClick="display('h','sub1')">
		  1
	</div>
	<div style="float: left; visibility: hidden; width: 150px; margin-left:0px; border: 1px solid #000000" id="sub2" onmouseover="clearTimeout(zeit);" onmouseout="tmeout();" onClick="display('h','sub1')">
		  2
	</div>
	<div style="float: left; visibility: hidden; width: 150px; margin-left:0px; border: 1px solid #000000" id="sub3" onmouseover="clearTimeout(zeit);" onmouseout="tmeout();" onClick="display('h','sub1')">
		  3
	</div>
	<div style="float: left; visibility: hidden; width: 150px; margin-left:0px; border: 1px solid #000000" id="sub4" onmouseover="clearTimeout(zeit);" onmouseout="tmeout();" onClick="display('h','sub1')">
		  4
	</div>
</div>


</body>
</html>
 
Zuletzt bearbeitet:
Meinst du so?
Code: 
 <script type="text/javascript">

  var subs=new Array('sub1','sub2','sub3','sub4');
  var zeit='';
  function tmeout()
  {
zeit=setTimeout('hideall()',800);
  }
  function hideall()
  {
for(x=0; x<subs.length;x++)
{
  document.getElementById(subs[x]).style.visibility='hidden';
}
  }
  function display(ele)
  {
clearTimeout(zeit);
for(x=0; x<subs.length;x++)
{
if(subs[x]!=ele)
{
  document.getElementById(subs[x]).style.visibility='hidden';
}
}
document.getElementById(ele).style.visibility='visible';
  }
  </script>

<body>
<div style="width: 150; float: left;">
  <div onmouseover="display('sub1');" onmouseout="tmeout();">Test</div>
  <div onmouseover="display('sub2');" onmouseout="tmeout();">Test</div>
  <div onmouseover="display('sub3');" onmouseout="tmeout();">Test</div>
  <div onmouseover="display('sub4');" onmouseout="tmeout();">Test</div>
</div>
<div style="width:150; float: left;">
<div style="float: left; width: 150px; visibility: hidden; margin-left:0px; border: 1px solid #000000" id="sub1" onmouseover="clearTimeout(zeit);" onmouseout="tmeout();" onClick="display('h','sub1')">
  1
</div>
<div style="float: left; visibility: hidden; width: 150px; margin-left:0px; border: 1px solid #000000" id="sub2" onmouseover="clearTimeout(zeit);" onmouseout="tmeout();" onClick="display('h','sub1')">
  2
</div>
<div style="float: left; visibility: hidden; width: 150px; margin-left:0px; border: 1px solid #000000" id="sub3" onmouseover="clearTimeout(zeit);" onmouseout="tmeout();" onClick="display('h','sub1')">
  3
</div>
<div style="float: left; visibility: hidden; width: 150px; margin-left:0px; border: 1px solid #000000" id="sub4" onmouseover="clearTimeout(zeit);" onmouseout="tmeout();" onClick="display('h','sub1')">
  4
</div>
</div>
 
Also es soll direkt ohne Platz dranstehen und bei mir sieht es jetzt so aus:

Test1 Untermenü 1 Untermenü 2 Untermenü 3
Test2


Ich hätte es gerne so:

Test1 Untermenü 1
Test2 Untermenü 2

usw.
 
Also wenn ich das so mache, sieht es so aus, wie du es willst.
Code: 
<div style="float: left;">
  <div onmouseover="display('sub1');" onmouseout="tmeout();">Test</div>
  <div onmouseover="display('sub2');" onmouseout="tmeout();">Test</div>
  <div onmouseover="display('sub3');" onmouseout="tmeout();">Test</div>
  <div onmouseover="display('sub4');" onmouseout="tmeout();">Test</div>
</div>
<div style="width:150; float: left;">
<div style="float:left;width:150px;visibility:hidden;margin-left:0px;border:0px solid #000000" id="sub1" onmouseover="clearTimeout(zeit);" onmouseout="tmeout();" onClick="display('h','sub1')">  1</div>
<div style="float:left;width:150px;visibility:hidden;margin-left:0px;border:0px solid #000000" id="sub2" onmouseover="clearTimeout(zeit);" onmouseout="tmeout();" onClick="display('h','sub1')">  2</div>
<div style="float:left;width:150px;visibility:hidden;margin-left:0px;border:0px solid #000000" id="sub3" onmouseover="clearTimeout(zeit);" onmouseout="tmeout();" onClick="display('h','sub1')">  3</div>
<div style="float:left;width:150px;visibility:hidden;margin-left:0px;border:0px solid #000000" id="sub4" onmouseover="clearTimeout(zeit);" onmouseout="tmeout();" onClick="display('h','sub1')">  4</div>
</div>
 
Ich bin Dir echt dankbar, das Du mir so hilfst, aber ich probiere es mit Internet Explorer, Firefox und Netscape und bei mir bleibt das Problem das gleiche. Vielleicht irgend eine Idee warum das bei mir anders ist als bei Dir?
 
so ein Mist. Tja dann werd ich es einfach selbst noch weiter probieren. Falls jemand anders noch eine Lösung hat, immer her damit. Ich freu mich über jede Hilfe. Ansonsten Danke an alle die mit überlegt haben.
 
Ich habs gefunden, bei mir funktioniert es, wenn ich float auf none setze. Komisch ist aber so :)

hier nochmal der Quelltext für diejenigen, den es genauso ging wie mir:

Code: 
<script type="text/javascript">

  var subs=new Array('sub1','sub2','sub3','sub4');
  var zeit='';
  function tmeout()
  {
zeit=setTimeout('hideall()',800);
  }
  function hideall()
  {
for(x=0; x<subs.length;x++)
{
  document.getElementById(subs[x]).style.visibility='hidden';
}
  }
  function display(ele)
  {
clearTimeout(zeit);
for(x=0; x<subs.length;x++)
{
if(subs[x]!=ele)
{
  document.getElementById(subs[x]).style.visibility='hidden';
}
}
document.getElementById(ele).style.visibility='visible';
  }
  </script>

<body>
<div style="width: 150; float: left;">
  <div onmouseover="display('sub1');" onmouseout="tmeout();">Test1</div>
  <div onmouseover="display('sub2');" onmouseout="tmeout();">Test2</div>
  <div onmouseover="display('sub3');" onmouseout="tmeout();">Test3</div>
  <div onmouseover="display('sub4');" onmouseout="tmeout();">Test4</div>
</div>


<div style="width:150; float: left;">

 <div style="float: none; visibility: hidden; width: 150px; margin-left:0px; border: 1px solid #000000" id="sub1" onmouseover="clearTimeout(zeit);" onmouseout="tmeout();" onClick="display('h','sub1')">  1
 </div>
 <div style="float: none; visibility: hidden; width: 150px; margin-left:0px; border: 1px solid #000000" id="sub2" onmouseover="clearTimeout(zeit);" onmouseout="tmeout();" onClick="display('h','sub1')">  2
 </div>
 <div style="float: none; visibility: hidden; width: 150px; margin-left:0px; border: 1px solid #000000" id="sub3" onmouseover="clearTimeout(zeit);" onmouseout="tmeout();" onClick="display('h','sub1')">  3
 </div>
 <div style="float: none; visibility: hidden; width: 150px; margin-left:0px; border: 1px solid #000000" id="sub4" onmouseover="clearTimeout(zeit);" onmouseout="tmeout();" onClick="display('h','sub1')">  4
 </div>

</div>

</body>
</html>
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück