Select menü verschiedene div ebenen einblenden

Computer: Software & Programmierung HTML & CSS
#1

Hallo,
ich möchte gerne ein select menü erstellen, bei dem verschiedene .div ebenen beim anklicken sichtbar werden.
Wenn ich z.B. folgende Struktur für das select menü habe,

Bitte wählen SieMenü1Menü2Menü3Menü4Menü5

dann soll beim klicken auf Menü1 die Ebene .div1 angezeigt werden, beim klicken auf Menü2 die Ebene .div2 usw. Bei „Bitte wählen Sie“ soll keine Ebene angezeigt werden.
Ich kenne mich leider nicht so gut aus mit der Programmierung, deswegen wäre ich euch sehr dankbar, wenn ihr mir helfen könntet.

Gruß

#2

Hi,
Deine Frage wäre in Javascript besser aufgehoben und damit lösbar.

Gruß
Ingo

#3

Moin,

wie Ingo schon sagte, ist das eine Frage für das JavaScript-Forum, denn alles, was einen Klick erfordert, um dann Elemente einzublenden, ohne eine neue Seite zu laden, erfordert JavaScript.

Allerdings hast Du geschrieben, dass das ein Menü werden soll. Dabei musst Du bedenken, dass JavaScript im Browser abgeschaltet sein kann. Wann immer Du ein Menü mit optionalen Techniken wie JavaScript oder Flash planst, musst Du immer eine Alternative anbieten, die auch ohne diese Techniken funktioniert. Denn jeder der Besucher Deiner Website möchte Dein Menü auch nutzen können.

Wenn Du also JavaScript für ein Menü benutzt, sollte Dir klar sein, dass Du einen deutlichen Mehraufwand hast.

Ein Menü, bei dem etwas aufklappt, wenn Du über einen Menüpunkt fährst (ohne zu klicken), lässt sich wunderbar auch mit CSS realisieren. Wenn dabei die Menüpunkte, die ausklappen sollen, auch einen Link auf eine Unterseite darstellen, auf der die ausgeklappten Links stehen, dann ist das Menü auch für die ganz alten Nicht-CSS-fähigen Browser nutzbar. Der Mehraufwand ist hier minimal und nicht mit dem zu vergleichen, den Du bei JS/Flash-Lösungen hast.

Liebe Grüße,
-Efchen

#4

Erstmal vielen Dank für eure Antworten. Wenn das Menü auch mit CSS funktioniert, dann ist das natürlich die bessere Lösung. Wie sähe denn solch eine CSS Lösung aus?

Gruß

#5

Moin,

Wenn das Menü auch mit CSS funktioniert, dann ist das natürlich
die bessere Lösung.

Aber nicht so, wie Du es vorgegeben hast. Anders eben. Aber besser, ja :smile:

Wie sähe denn solch eine CSS Lösung aus?

Guuglst Du nach „dropdown menü mit css“ und suchst Dir was aus.

Diese Menüs basieren darauf, dass im Falle „:hover“ (Pseudoklasse) ein Untermenü eingeblendet wird (display:block).

Grüße,
-Efchen

#6

Hi,

Ein Menü, bei dem etwas aufklappt, wenn Du über einen
Menüpunkt fährst (ohne zu klicken), lässt sich wunderbar auch
mit CSS realisieren. Wenn dabei die Menüpunkte, die ausklappen
sollen, auch einen Link auf eine Unterseite darstellen, auf
der die ausgeklappten Links stehen, dann ist das Menü auch für
die ganz alten Nicht-CSS-fähigen Browser nutzbar.

aber leider nicht barrierefrei für ScreenReader.

Ich muss wohl etwas mehr Text hinzufügen, damit diese Antwort akzeptiert wird… Mein Posting aufgrund der Rückmeldung einer Blinden zur CSS-Einbindung meines Gästebuchs.

Gruß
Ingo

#7

Hallo,
ich habe jetzt ein dropdown menü erstellt, bei dem die einzelnen Ebenen beim laden der Seite ausgeblendet und bei „onclick“ eingeblendet werden. Allerdings sind dann alle ebenen zu sehen und nicht nur die, die ich angeklickt habe. Wenn ich z.B. ebene 3 anklicke, müssen natürlich ebene2 und ebene1 ausgeblendet werden. Was fehlt noch im code?

CSS Code:
#ebene1 {
visibility:hidden;
width:100%;
height:500px;
background-color:#CCC;
z-index:6;
}
#ebene2 {
visibility:hidden;
width:100%;
height:500px;
background-color:#999;
z-index:7;
}
#ebene3 {
visibility:hidden;
width:100%;
height:500px;
background-color:#666;
z-index:8;
}

HTML Code:

Menü:

ebenen

  • ebene1

  • ebene2

  • ebene3

Gruß

#8

Moin,

ich habe jetzt ein dropdown menü erstellt, bei dem die
einzelnen Ebenen beim laden der Seite ausgeblendet und bei
„onclick“ eingeblendet werden.

Warum eine JavaScript-Lösung? Wenn JS ageschaltet ist, geht gar nichts mehr. Eine CSS-Lösung funktioniert überall.

Allerdings sind dann alle
ebenen zu sehen und nicht nur die, die ich angeklickt habe.

Wenn Du auf JS bestehst, dann solltest Du Deine JS-Probleme im JS-Forum klären lassen.

Wenn ich z.B. ebene 3 anklicke, müssen natürlich
ebene2 und ebene1 ausgeblendet werden.

Das fehlt auf jeden Fall im Code. Du machst die Ebenen ja nur visible, aber versteckst sie nirgends.

Liebe Grüße,
-Efchen

#9

Moin,

aber leider nicht barrierefrei für ScreenReader.

Ich muss wohl etwas mehr Text hinzufügen, […]
Mein Posting aufgrund der Rückmeldung einer
Blinden zur CSS-Einbindung meines Gästebuchs.

Ja, das wäre interessant. Denn eigentlich ist das so mit CSS ja die gängige Vorgehensweise für komplexe/umfangreiche Menüs. Wenn das eine Barriere für ScreenReader darstellt, interessiert mich das brennend, wie man ein Menü mit zahlreichen Untermenüs (wie es sich nicht immer vermeiden lässt) realisieren kann.

Dass umfangreiche Menüs natürlich auch entsprechend lang vorgelesen werden ist mir bewusst. Dass man solche Menüs auch ans Ende des HTML-Codes schieben und dann mit CSS positionieren kann, ist mir bewusst.

Ich freue mich auf erklärende Worte.

Liebe Grüße,
-Efchen

#10

Moin,

Ich muss wohl etwas mehr Text hinzufügen, damit diese Antwort
akzeptiert wird… Mein Posting aufgrund der Rückmeldung einer
Blinden zur CSS-Einbindung meines Gästebuchs.

Kommt da noch was? Ich bin interessiert!