Liebe/-r Experte/-in,
ich würde gerne erfahren, wie ein ausklappendes Menü erzeugt werden kann… (Wie z.B. auf www.arteka.de wenn man über einen der Menüpunkte fährt)
Ich habe schon einige Erfahrung mit HTML & CSS, sodass Sie nicht ganz von vorne anfangen müssen 
Ich danke Ihnen schon im Voraus für Ihre Mühe.
MfG
P.M.
Hallo!
Ein ausklappendes Menü, wie es bei arteka verwendet wird, basiert nicht auf css, sondern auf javascript. css ist lediglich für das Design zuständig, also in diesem Fall weiße Schrift, blauer, teiltransparenter Hintergrund, und auch die Positionierung etc…
Vom Prinzip her wird dabei im css außerdem „display: none“ gesetzt, damit beim Laden der Seite diese Boxen zwar vorhanden, aber unsichtbar sind.
Von dieser Stelle an tritt javascript in Aktion: die Hauptmenüpunkte enthalten sogenannte Eventhandler, wie onmouseover und onmouseout, welche javascript-Funktionen aufrufen, die die zugeordneten Boxen (Also „Submenüs“) ein- bzw. ausblenden.
Damit diese allerdings nicht nur trivial sichtbar oder unsichtbar geschaltet werden, sondern wie in diesem Fall sich stylisch auseinanderziehen, verwendet die besagte Website jquery. jquery ist eine javascript-Funktionsbibliothek, die viele Funktionen vereinfacht und auch jede Menge Animationsmöglichkeiten bietet, welche man ansonsten mühsam in vielen Zeilen schreiben müßte. - siehe jquery.com.
Naja, ich glaube, das dürfte schonmal ein Anstoß in die richtige Richtung sein. Den fertigen Code hier runterzuleiern wäre ja auch langweilig, oder?
Viel Spaß beim ausprobieren!
Gruß,
Michael Suszek
ich würde gerne erfahren, wie ein ausklappendes Menü erzeugt
werden kann… (Wie z.B. auf www.arteka.de wenn man über einen
der Menüpunkte fährt)
Danke für Ihre schnelle Antwort,
ja, dass jquery mit im Spiel ist, hatte ich schon fast befürchtet
Dann werde ich mich mal in die Materie vertiefen…
Nochmals vielen Dank
Gruß
Philip März
Noch eine kurze Frage:
Ich habe in meinem Menü 2 verschiedene divs, das erste definiert mir den menübereich und das zweite den Bereich für den auszuklappenden Inhalt.
Jetzt habe ich über jquery die funktion „slideToggle“ genutzt. Und zwar folgendermaßen:
/* function toggleleft() {
$(‚menu1‘).slideToggle(‚slow‘, function(){});
} */
(Natürlich ohne die Kommentarzeichen…)
Jetzt funktioniert das aber nicht…
ich habe jquery.js eingebunden…
Was mache ich falsch?
jquery verwendet die Bezeichner genauso, wie CSS.
$(‚menu1‘) verweist auf ein html-Tag
(gibt’s natürlich nicht, es sei denn, Du verwendest xml, schreibst Deine eigene Doctype und baust solche Tags ein).
Du meinst vermutlich eher $(’#menu1’) oder wenn’s ne Klasse ist $(’.menu1’).
/* function toggleleft() {
$(‚menu1‘).slideToggle(‚slow‘, function(){});
} */