Javascript Menue
legolas
- javascript
Hallo
Ich bin grad dabei HTML und JavaScript zu Lernen und Code mir grad eine kleine Homepage.Ich habe grad damit angefangen mir ein Menue zu Basteln den rest habe ich schon.Also zuerst sieht man nur eine tabelle ,wenn man jetzt mit der Maus drüber fährt geht eine weiter tabelle mit links auf.
Tabelle ohne drüberliegender Maus
+---------------+
| test |
+---------------+
Tabelle mit drüberliegender Maus
+---------------+
| test |
+---------------+
+---------------+
| test |
+---------------+
+---------------+
| test |
+---------------+
+---------------+
| test |
+---------------+
Jedoch habe ich jetzt noch ein kleines problem und zwar folgendes: Also wenn ich die oberen Tabellen nacheinnander berühre und die untertabellen sich öffenen sieht es wie eine Trebbe aus. Wie kann ich es anstellen das alle untertabellen auf einer Linie ausgegeben werden ? Gibt es nicht einen befehl der die Y Postitionslinie wieder auf null stehlt?
So soll es aussehen:
+---------------+ +---------------+
| test 1 | | test 2 |
+---------------+ +---------------+
+---------------+ +---------------+
| test 1 | | test 2 |
+---------------+ +---------------+
+---------------+ +---------------+
| test 1 | | test 2 |
+---------------+ +---------------+
+---------------+ +---------------+
| test 1 | | test 2 |
+---------------+ +---------------+
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Unbenanntes Dokument</title>
</head>
<script type="text/javascript">
function display(mode,ele){
if(mode=='s'){
document.getElementById(ele).style.visibility='visible';
}else{
document.getElementById(ele).style.visibility='hidden';
}
}
</script>
<body>
<div>
<table border="1">
<tr rowspan="5">
<td width="155" height="20" onMouseOver="display('s','sub1')">Test</td>
<td width="155" height="20" onMouseOver="display('s','sub2')">Test</td>
<td width="155" height="20" onMouseOver="display('s','sub3')">Test</td>
<td width="155" height="20" onMouseOver="display('s','sub4')">Test</td>
<td width="155" height="20" onMouseOver="display('s','sub5')">Test</td>
</tr>
</table>
</div>
<div style="visibility:hidden;margin-left:30px;" id="sub1" onClick="display('h','sub1')">
<table width="150" height="90" border="1">
<tr><td>Test</td></tr>
<tr><td>Test</td></tr>
<tr><td>Test</td></tr>
<tr><td>Test</td></tr>
<tr><td>Test</td></tr>
</table>
</div>
<div style="visibility:hidden;margin-left:210px;" id="sub2" onClick="display('h','sub2')">
<table width="150" height="90" border="1">
<tr><td>Test2</td></tr>
<tr><td>Test</td></tr>
<tr><td>Test</td></tr>
<tr><td>Test</td></tr>
<tr><td>Test</td></tr>
</table>
</div>
<div style="visibility:hidden;margin-left:390px; margin-top:30px" id="sub3" onClick="display('h','sub3')">
<table width="150" height="90" border="1">
<tr><td>Test3</td></tr>
<tr><td>Test</td></tr>
<tr><td>Test</td></tr>
<tr><td>Test</td></tr>
<tr><td>Test</td></tr>
</table>
</div>
<div style="visibility:hidden;margin-left:570px;" id="sub4" onClick="display('h','sub4')">
<table width="150" height="90" border="1">
<tr><td>Test4</td></tr>
<tr><td>Test</td></tr>
<tr><td>Test</td></tr>
<tr><td>Test</td></tr>
<tr><td>Test</td></tr>
</table>
</div>
<div style="visibility:hidden;margin-left:630px;" id="sub5" onClick="display('h','sub5')">
<table width="150" height="90" border="1">
<tr><td>Test5</td></tr>
<tr><td>Test</td></tr>
<tr><td>Test</td></tr>
<tr><td>Test</td></tr>
<tr><td>Test</td></tr>
</table>
</div>
</body>
</html>
P.S. Bin ein Absuluter NEWBEE in der Materie
Hallo
auch Hallo, ;-)
Ich bin grad dabei HTML und JavaScript zu Lernen und Code mir grad eine kleine Homepage.Ich habe grad damit angefangen mir ein Menue zu Basteln den rest habe ich schon.Also zuerst sieht man nur eine tabelle ,wenn man jetzt mit der Maus drüber fährt geht eine weiter tabelle mit links auf.
Willst du nacheinander alle Menüs einblenden, oder sollen diese nicht bei onMouseOut wieder ausgeblendet werden?
Jedoch habe ich jetzt noch ein kleines problem und zwar folgendes: Also wenn ich die oberen Tabellen nacheinnander berühre und die untertabellen sich öffenen sieht es wie eine Trebbe aus. Wie kann ich es anstellen das alle untertabellen auf einer Linie ausgegeben werden ? Gibt es nicht einen befehl der die Y Postitionslinie wieder auf null stehlt?
Wie wäre es mit Positionierung? http://selfhtml.teamone.de/css/eigenschaften/positionierung.htm#position
P.S. Bin ein Absuluter NEWBEE in der Materie
Kein Problem, waren wir alle mal. ;-)
Gruß
Kurt
Willst du nacheinander alle Menüs einblenden, oder sollen diese nicht bei onMouseOut wieder ausgeblendet werden?
THX für deine hilfe Kd-one
Also ich will eigentlich genau so ein Menue Haben wie hier:
http://www.btb-shop.de ganz oben.
Kennt vieleicht noch jemand gute Bücher für HTML JAVASCRIPT PHP und CSS?
mfg janosch
Hallo,
Also ich will eigentlich genau so ein Menue Haben wie hier:
http://www.btb-shop.de ganz oben.
Nun ja, dann solltest du mal darüber nachdenken, wie sowas funktionieren könnte.
Grundsätzlich brauchst du mal ein Script, das die nicht nur die Tabellen/Divs anzeigt, sondern auch wieder verbirgt.
Weiters solltest du darüber nachdenken, wie du es verhindern kannst, daß das Menü wieder verschwindet, wenn du die Zelle verlässt und in das Submenü willst.
Wenn du nun auch noch eine dritte Ebene willst, wird es komplizierter, denn dann musst du auch verhindern, daß die zweite Ebene verschwindet, wenn du in die dritte Ebene willst.
Ich habe es damals mit meinem Menü (http://faq.united-web.at) in meiner Seite mittels Timeouts und ziemlichen Aufwand an Events realisiert, einfacher wäre es aber sicherlich, wenn du die Mausposition abfragst.
Da kann ich dir aber nicht wirklich weiterhelfen, das habe ich selbst noch nie gemacht.
Wenn du aber Interesse an meiner Version hast, bin ich gerne bereit, dir auf die Sprünge zu helfen.
Kennt vieleicht noch jemand gute Bücher für HTML JAVASCRIPT PHP und CSS?
Sorry, nein, ich betreibe "Learning by Doing".
Das einzige, das ich dir aus Erfahrung empfehlen kann, ist SelfHTML, wobei speziell im JS-Bereich einige fragwürdige Konstrukte auch hier existieren.
Gruß
Kurt
Hi,
ich habe dir was per Mail geschickt.
Gruß,
Jürgen