Jan: Aufklappmenü

Hallo,

Wie kann ich möglichst elegant, am besten nur mit CSS, wenn möglich auch ohne JavaScript ein Aufklappmenü erstellen? Es soll so funktionieren, dass jemand, der CSS und JavaScript aktiviert hat, es entweder trotzdem benutzen kann oder falls das nicht geht eben das komplett aufgeklappte Menü erhält. Er soll also trotzdem möglichst ohne Probleme navigieren könne.

Ich stelle es mir so vor, dass man mehrere Überpunkte hat und diese ihre Untermenüpunkte offenbaren, sobald man drauf klickt. Wenn möglich sollen alle Punkte die der Nutzer anklickt gleichzeitig geöffnet sein, die anderen nicht.

Wenn es nur mit JavaScript gehen sollte, dann wäre ich auch da für Anregungen offen.

Hauptidee: CSS mit div kombinieren. Es soll wie gesagt möglichst einfach sein, also wenig bis gar kein JavaScript und überall lauffähig (NN4 muss nicht sein).

Vielen Dank
Jan

  1. Hallo,

    Wie kann ich möglichst elegant, am besten nur mit CSS, wenn möglich auch ohne JavaScript ein Aufklappmenü erstellen?

    Wenn du es nur mit CSS machen willst, dann wird es im Internet Explorer nicht möglich sein. Mit anderen Browsern die besser mit CSS zurecht kommen lässt es sich machen, ein Beispiel musst du aber selber finden, da hab ich keines zur Hand.

    Es soll so funktionieren, dass jemand, der CSS und JavaScript aktiviert hat, es entweder trotzdem benutzen kann

    Ich nehme an, dass du hier _de_aktiviert meinst. Das ist mal ein vernünftiger Gedanke, schön, dass du daran auch denkst. Schau dir doch mal beispielsweise folgende Artikel im Archiv an: http://forum.de.selfhtml.org/archiv/2003/6/48784/
    Da hatte ich mal ein kleines auf JS basierendes Menü gebaut, dieses funktioniert auch bei ausgeschaltetem JavaScript. Du findest das Beispiel noch unter http://realteck.in-berlin.de/pub/scrollmenu.html

    Viele Grüße,

    Stefan

    --
    Lass dir das Tanzen NICHT verbieten
    http://tanzverbot.de
  2. hej Jan,

    ... dass jemand, der CSS und JavaScript aktiviert hat, ...

    also ich geh mal im weitern davon, aus dass es deaktiviert heißen sollte. Um css solltest du dir keine sorgen machen, afaik kommt das nämlich nur bei irgendeiner NS 4er Version vor, dass man mit JS auch gleichzeitig css ausschaltet, und wers sonst ausgeschaltet hat, (weiß gar nich bei welchen browsern das überhaupt geht) der wird sowieso nich viel spaß im netz haben.

    Ich weiß nicht obs dir hilft, aber mit JS, is das ganze relativ leicht zu realisieren, so dass auch die, die JS deaktiviert haben, keinen wirklichen nachteil dadurch haben. Nämlich steuer ich meine Untermenüs so an, dass ich die in eine Tabellenzeile (oder auch Spalte) packe dieser aber das css-Attribut visibility:hidden verpasse. Bei einem onMousovereffekt über den Button, der bei mir auch gleichzeitig nen Verweis zum Übermenü hat, wird das Attribut per JS auf visibility:visible gesetzt.
    Falls jetzt jemand JS deaktiviert haben sollte merkt er das gar nicht und denkt, er kann auf den Button klicken. Auf der nachflgenden Seite wird er dann auf die Unterseiten weitergeleitet.

    Nich ganz was du suchtest, aber ganz ohne JS gibts nur zwei andere Möglichkeite, von denen ich nich viel halte:

    1. Beim klicken auf den Button leitest du einfach auf ne andere Seite um, wo das Untermenü ausgeklappt ist (is Mist, und ohne Frames auch nicht grade Benutzerfreundlich). Zudem kommt, dass wenn du ein Menü ausgeklappt lassen willst beim klicken auf das nächste, brauchst du eine Vielzahl von Möglichkeiten die du Berücksichtigen musst.

    2. Schau dir das hier mal an
    http://aktuell.de.selfhtml.org/tippstricks/css/infobox/index.htm

    da geht soetwas nur mit css, aber nur bei dem Pseudoformat :hover, also nix klicken, weil die nur für links gedacht sind und du beim klicken dann direkt weitergeleitet wirst. Außerdem hab ich damit mal versucht mein Problem zu lösen und habs nich hinbekommen in das Ausfahrmenü ein weiteres link einzubauen. Also halt ich nich soviel von.

    Hoffe es ging in die Richtung die du erfragt hast.

    Grüße i.

  3. Hi

    Schau dir mal die News auf http://madrat.net/ an.

    Peter