Hallo Forum,

suche schon den ganzen Tag im Web nach einer Lösung für mein Problem.

Hintergrund:
Meine Seite soll oben ein horizontales Menu mit Untermenupunkten haben. Unter einer bestimmten Breite des Browserfensters soll nur noch ein Button sichtbar sein. Wenn man auf den Button drückt soll am rechten Rand ein Menu eingeblendet werden.

Über Abfragen der Fenstergrösse und zwei separate CSS Dateien habe ich das wechseln zwischen Menu und Button hinbekommen.
Wenn ich jetzt auf den Button drücke soll ein Menu eingeblendet werden (ohne Javascript). Ich schaffe es den Hintergrund zu verändern, aber nicht ein anderes Menu dazustellen.

Hier einmal die (hoffentlich wesentlichen) Code Bestandteile:

HTML:
<div>
<button type="button" id="menu_button">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>

</div>

CSS:
ul#menu-level-1 {
....
display:none;
}

#menu_button:active {
background: blue;
}

button#menu_button:active > ul#menu-level-1 { display: block;}


Wenn ich in dem ersten CSS den display auf block setze, dann wird das Menu korrekt angezeigt.

Ich hoffe mir kann geholfen werden

Viele Grüsse
mb68

Also, ich habe jetzt das HTML so abgeändert:

menu_mobile ist jetzt ein child zu menu_button und kann mit folgendem CSS aktiviert werden (wobei ul#menu-level-1 die Menuliste in dem div id="menu_mobile" ist):

Was mir jetzt noch fehlt ist, dass das menu das dann aufklappt offen bleibt auch wenn man die Maustaste losläst.

Nach Möglichkeit nur mit CSS, da das ganze in einem CMS generiert wird und da möchte ich Javascript oder feste ID Tags in den verschiedenen Seiten vermeiden.

Danke
mb68

Probiere die Pseudoklasse :focus.

__________________
toscho.de

Danke, ich habe es jetzt erstmal mit Javascript gemacht werde das aber bei Gelegenheit mal ausprobieren.