✔ JavaScript-Menü

janosch · 29. August 2003

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

Mark · 29. August 2003

Hi!

Was meinst Du mit "ein Kleines Beispiel würde mir reichen"?
Diesbezüglich schaue Dir doch den Quelltext von http://www.btb-shop.de einfach mal an... wie weit geht da Dein "Wissen vom Prinzip her"

Andreas Gaisbauer · 29. August 2003

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

janosch · 29. August 2003

@ 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

Andreas Gaisbauer · 30. August 2003

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

janosch · 30. August 2003

@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

janosch · 31. August 2003

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

Andreas Gaisbauer · 31. August 2003

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

kamikazeflieger · 17. September 2003

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

titan4e · 19. Dezember 2004

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

✔ JavaScript-Menü

janosch

Erfahrenes Mitglied

Mark

Cinema4D

Andreas Gaisbauer

Erfahrenes Mitglied

janosch

Erfahrenes Mitglied

Andreas Gaisbauer

Erfahrenes Mitglied

Anhänge

janosch

Erfahrenes Mitglied

janosch

Erfahrenes Mitglied

Andreas Gaisbauer

Erfahrenes Mitglied

kamikazeflieger

titan4e

Grünschnabel

Neue Beiträge