JavaScript Menü mit Untermenü aufklappbar

[Benutzer-42]

Da Google mir massig Ergebnisse liefert, aber irgendwie diese sich nicht wirklich schlüssig umsetzen, eine Frage an alle:

Ich will eine Menüleiste machen, in der zB die Hauptschlagworte sind

Nintendo | SEGA | Atari | Sony ....

dann soll, wenn man auf eine der Hauptworte geht, sich ein Dropdown-Menü öffnen

nun habe ich dazu massig Lösungsansätze gefunden, teils mit CSS, teils JS und bin irgendwie verwirrt (oder blind vor lauter Bäumen)

Wie wäre eine solche Navigation am besten zu realisieren?


Denkbar wäre auch eine Lösung, bei der man ParentIDs vergibt und unter diesen dann die zugehörigen Menüpunkte setzt, da soll es wohl auch eine Möglichkeit geben, dann das Menü per Datenbanklösung zu realisieren, so dass sich das auch sehr gut erweitern lässt

 

[strolch00]

auf css-play wirst Du fündig

Diese sind zwar copyright, aber ich habe Ihn auch mal wegen einem gefragt und durfte es verwenden, einfach fragen.

*edit
Halte ich für die besten Lösungen die ich bisher finden konnte.

*edit2
So brauchst Du auch nicht auf ParentID zu achten und kannst es ganz bequem aus der DB zum Beispiel mit Nested Sets auslesen.

 

[Benutzer-42]

auf CSSPlay bin ich auch schon gestoßen, habe da nur keine DB Version gefunden

 

[strolch00]

Ja das ist richtig das sind auch nur Strucktur und CSS Beispiele, die DB-Auslesung usw. muss man sich selber erstellen. Aber ich denke das sollte kein Problem sein mit Nested Sets.

Grundprinzip:
$array = Auslesung per Query
per foreach das $array durchgehen, evtl. dazu ne rekursive Funktion verwenden, wenn Du es nicht nur Erweitern sondern auch später noch vertiefen willst.

*edit
Habe es mir nur flüchtig angeschaut aber hier sprechen Sie drüber, vielleicht ist ansonsten hier noch was anderes brauchbares dabei.

 

[perlini]

Am einfachsten geht es per css, ist dann aber ohne Effekte. Bei einer verschachtelten Liste die Untermenüpunkte mit "display:none" ausblenden und dann mittels der Psydo-Klasse ":hover" diese wieder einblenden. Also

<style>
.submenu {display:none}
.menu li:hover .submenu {display:block}
</style>

<ul class="menu">
 <li>Nintendo
  <ul class="submenu">
   <li>bla bla</li>
  </ul>
 </li>
<li>SEGA</li>
</ul>

Funktioniert aber nicht im IE6, da der ":hover" nur für Links kennt. Da müßtest du per Javascript diese Psydoklasse erzeugen.

 

[Benutzer-42]

ja, das Problem mit IE6 hatte ich auch schon gelesen

gibt es denn eventuell eine logischweise revolutionäre Web2.0 Version

 

[ice-breaker]

und was soll eine "revolutionäre Web2.0 Version" sein?

 

[Benutzer-42]

keine Ahnung, darum frag ich ja

nachdem ja alles von Web 2.0, Ajax und Co schwärmt

und wenn ich schon eine Seite neu aufsetze, kann man das von Anfang an direkt komplett machen

 

[theHacker]

Was willst du mit "Web2.0", wenn es Web1.0 (sollte klar sein, was gemeint is) auch schon tut?

 

[Benutzer-42]

na, wenn das Web 3.0 kommt, hängt man mit 2.0 nicht woweit hinterher

naja, wollte eigentlich schauen, was sich an Spielrei einbauen lässt, werde aber wohl dann doch ein ganz normales Dropdown machen

 

[theHacker]

naja, wollte eigentlich schauen, was sich an Spielrei einbauen lässt, werde aber wohl dann doch ein ganz normales Dropdown machen

Programmierung hat nix mit Spielerei zu tun. Wenn du JavaScript z.B. für AJAX brauchst, ok. Aber ein Menü ist eine reine CSS-Angelegenheit.