Javascript Menü mit SQL ausgabe

[Elmo]

Hallo,

Ich würde gerne ein Menü erstellen was sich nach rechts aufklappt unt dann ein weiteres Menü zeigt.

Es soll mit einer SQL Abfrage erstmal das erste Menü erstellt werden. Beim Rollover über einen Link des ersten Menüs soll dann ein zweites Menü rechts davon geöffnet werden worin wieder links aus einer SQL Abfrage stehen.

Also ungefähr so:

SQL Abfrage nach Farben -> Ausgabe: BLAU ROT GELB....
SQL Abfrage wer die Farbe am liebsten mag: Peter, Klaus, Franz ...
(jeweils dann USER_ID die auch aus der DB kommt im Link drin.

| BLAU |  
| ROT |   -> | Peter |
| GELB |     | Klaus |
              | Franz |

Nun wüsste ich gerne wie man sowas realisiert. Ich habe leider fast keine Erfahrung mit Javascript. Könnte mir eventuell jemand dabei helfen oder mir zumindest einen Link zu nem Tut. geben was ungefähr mein Problem behandelt?

Freundliche Grüße und danke im vorraus

 

[con-f-use]

Es kommt ganz darauf an, wie groß die Datenbank ist und ein bisschen auch auf die geschwünschte Optik deines Menüs.

Ich halte mich einfach mal ein dein Beispiel mit Farben und Namen:

Bei kleinen Datenbanken wäre es schlau per PHP das vollständige Menü (inklusive der Untermenüs für jede der Farben) zu erstellen und den style="display:none" für die Untermenüs zu setzen, damit sie erstmal nicht angezeigt werden. Dann kannst du das entsprechende Untermenü per Javascript einblenden, sobald jemand auf eine Farbe klickt.
Das ist die Variante, die weniger Ahnung von Javascript erfordert. Sie hat den Nachteil, dass evtl. Änderungen an dem Inhalt der Datenbakn nicht angezeigt werden, es sei denn, der User lädt die Seite neu.
Links dafür: Das Document Object Model (DOM), Style-Eigenschaften mit Javascript verändern.

Bei größeren Datenbanken empfielt es sich das Farb-Menü per PHP zu erstellen und die Untermenüs über XMLRequest bei bedarf nachzuladen. Ansonsten läuft es von der Herangehensweise ähnlich wie bei kleinen Datenbanken.
Das ist die Variante, die mehr Ahnung von Javascript erfordert.
Sie hat den Vorteil, das ungewünschte Daten, gar nicht erst an den User gesendet werden.
Links dafür: Das Document Object Model (DOM), Style-Eigenschaften mit Javascript verändern, XMLHttpRequest (engl.)