JavaScript-Menü

Status
Nicht offen für weitere Antworten.

janosch

Erfahrenes Mitglied
moin

Ich bin grad dabei mir ein Homepage zu basteln, nur suche ich jetzt noch ein Menue so wie diese hier:

http://www.milonic.co.uk/menu/frames/ <-- so ein menu nur ohne frames wäre perfekt
http://tutorials.blackcross-board.com/
http://www.btb-shop.de <----- das obere Menue

Im prinzip weiß ich wie es geht, nur fehlen mir die nötigen Kenntnise um so ein Menu in HTML, JAVASCRIPT oder PHP zu Programmieren will heisen ich bin grad dabei mich in das Thema einzuarbeiten.
Also ich habe z.B. ein Tabelle (weite 150 höhe20 ) mit dem Text "Test" ,wenn ich jetzt mit der Maus über diese Tabelle gehe soll sich ein wenig versetzt eine neue "unter Tabelle" öffnen. Wie geht's (eine kleines Beispiel würde mir reichen )?

Tabelle ohne drüberliegender Maus
PHP:
+---------------+
|      test     |
+---------------+
Tabelle mit drüberliegender Maus
PHP:
+---------------+
|      test     |
+---------------+
        +---------------+
        |      test     |
        +---------------+
        +---------------+
        |      test     |
        +---------------+
        +---------------+
        |      test     |
        +---------------+

mfg janosch

P.S. Gegoogelt hab ich schon nur hab ich nichts leichtverständliches gefunden
 
Hallo.

also ganz grobes Grundgerüst kannst du das hier verwenden:
Code:
<html>
<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>
</head>
<body>
<div>
  <table width="150" height="90" border="1">
    <tr>
      <td onMouseOver="display('s','sub1')">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>
</body>
</html>

Vielleicht sind auch noch follgende Threads hilfreich:
http://www.tutorials.de/tutorials130021.html
http://www.tutorials.de/tutorials24983.html


bye
 
@ Andreas Gaisbauer
für dein Beispiel, das hat mich weiter gebracht

@all

Ich habe den Code von Andreas Gaisbauer ein wenig geändert und habe 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 befeh der die Y Postitionslinie wieder auf null stehlt?

So soll es aussehen:
PHP:
+---------------+ +---------------+
|      test 1   | |      test 2   |
+---------------+ +---------------+

        +---------------+ +---------------+
        |      test 1   | |      test 2   |
        +---------------+ +---------------+
        +---------------+ +---------------+
        |      test 1   | |      test 2   |
        +---------------+ +---------------+
        +---------------+ +---------------+
        |      test 1   | |      test 2   |
        +---------------+ +---------------+



PHP:
<!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
 
Zuletzt bearbeitet:
Hallo Janosh,

1) Du kannst mich gerne "nur" Andreas nennen - dann komm ich mir wenigstens nicht so alt vor ;)

2) Ich hab dir ein weiteres Beispiel angehangen - das Menü baut sich soauf wie du wolltest - zusätzlich habe ich eine Funktion eingebaut,damit nur immer ein Menü aktiviert sein kann.

bye
 

Anhänge

  • menu.txt
    3,2 KB · Aufrufe: 3.317
@Andreas

Vielen dank für deine Hilfe genau so wolte ich es haben :) :) :)
So jetzt weiß ich wie sowas geht :) :)

Jetzt muß ich es nur noch in meine Homepage einbauen aber das schaffe ich alleine ;) ;)








mfg janosch
 
Zuletzt bearbeitet:
Ich habe da noch was entdeckt ,wenn ich jetzt nur eine Tabelle berühre und sich darauf hin die subtabelle öffnet und ich anschliesent den Menuebereich verlasse bleibt diese subtabelle offen. Wie kann ich es anstellen, dass sich egel welche subtabelle offen ist sich diesse subtabelle bei verlassen des menuebereiches schliest ?

Ich habe es mit onmouseout Probiert jedoch funktioniert das nicht ,denn dann wird die subtabelle aufjedenfall geschlossen ob ich will oder nicht.Das ist ziemlich dum wenn ich die links in der subtabelle anklicken will :rolleyes:
 
Hallo Janosch,

ein Versuch: Erweitere die "display()" Funktion um die folgende Zeile: window.setTimeout("hideall()",5000);
Diese bewirkt das nach 5 Sekunden die Funktion Hideall() aufgerufen wird und somit das Menu schließt - den wert kannst du natürlich beliebig anpassen...

Das Ganze sollte dann so aussehen...
Code:
function display(mode,ele){
    if(mode=='s'){
      hideall();
      document.getElementById(ele).style.visibility='visible';
      window.setTimeout("hideall()",5000);
    }else{
      document.getElementById(ele).style.visibility='hidden';
    }
  }

ciao
 
setTimeout

hi. finde das menü auch sehr praktisch. nur finde ich die timeout funktion störend. gibt es nicht einen befehl wie onmouseout dafür? da das timeout auch beginnt wenn ich noch durch das menü gehe :(
kenn mich leider damit auch nicht aus, sonst würde ich ja nicht fragen :)
 
Re: Javascript menue

Könnte Bitte jemand von Euch die Frage von "kamikazeflieger" beantworten. Habe das Menü ebenfalls verwendet und würde gerne mit "Onmouseout" die Fenster der Untermenüs schließen, da die Variante mit dem Zeitende wirklich nicht sehr praktisch ist. Falls also jemand eine Idee hat, wie das funktioniert, Bitte Bitte Bitte ...... Danke
 
Status
Nicht offen für weitere Antworten.
Zurück