Frage zu vertikaler CSS-Navigation

[ThomasG]

allo,

wer kann mir bitte helfen?
Ich habe eine vertikale CSS-Navigation aufgebaut mit mehreren Menüebenen, das soweit auch gut funktioniert. Jetzt aber zu meiner eigentlichen Frage.
Gibt es mit CSS eine Funktion wenn die Navigation aufgeklappt ist wobei die Untermenüs sichbar sind, diesen Verzeichnisbaum per Klick wieder
zuklappen zu lassen? Oder kann dies nur mit JavaScript realisiert werden?
Ich habe mir hierzu schon etliche JavaScripte angesehen, aber noch keines gefunden das für unsere Hompage geeignet ist, zu sehen unter www.musikverein-hirschzell.de.
Solch ein JavaScript sollte folgende Bedingungen erfüllen:
1. Vertikale Navigation die per Klick die Submenüs öffnet.
2. Es sollen mindestens 5 Menüebenen realisiert werden können (Hauptmenü und 4 Untermenüebenen).
3. Auch in der Hauptmenuebene sollen Webseiten hinterlegt werden können und nicht nur als Überschrift für die einzelnen Kategogien dienen.
4. Wenn bei geöffnetem Menü ein anderes Menü angeklickt wird, soll das Menü wo der Focus zuletzt war automatisch schließen und das neue geöffnet werden.
Wo könnte man solch eine Navigation herbekommen?

Danke schon mal im voraus für die Unterstützung

Gruß
Thomas

[suit]

Gibt es mit CSS eine Funktion wenn die Navigation aufgeklappt ist wobei die Untermenüs sichbar sind, diesen Verzeichnisbaum per Klick wieder
zuklappen zu lassen?

::active, ::focus oder ::target könnten dich interessieren.

[Gunnar Bittersmann]

@@suit:

nuqneH

::active, ::focus oder ::target könnten dich interessieren.

Das sind 6 Punkte zu viel. Nichts davon ist ein Pseudoelement.

Qapla'

[suit]

::active, ::focus oder ::target könnten dich interessieren.

Das sind 6 Punkte zu viel. Nichts davon ist ein Pseudoelement.

Punkt für dich, bleiben unterm Strich noch 5 :p

[Gunnar Bittersmann]

@@suit:

nuqneH

Punkt für dich, bleiben unterm Strich noch 5 :p

Vielleicht kannst du einen Marienkäfer damit glücklich machen.

Qapla'

[Matthias Apsel]

Om nah hoo pez nyeetz, ThomasG!

Solch ein JavaScript sollte folgende Bedingungen erfüllen:

1. Vertikale Navigation die per Klick die Submenüs öffnet.

Ist via CSS kein Problem.

2. Es sollen mindestens 5 Menüebenen realisiert werden können (Hauptmenü und 4 Untermenüebenen).

Das ist aus usability-Gründen nicht zu empfehlen, (Platz steht nicht unbedingt zur Verfügung, wer soll sich da durchhangeln?)

3. Auch in der Hauptmenuebene sollen Webseiten hinterlegt werden können und nicht nur als Überschrift für die einzelnen Kategogien dienen.

Das ist auch kein Problem.

4. Wenn bei geöffnetem Menü ein anderes Menü angeklickt wird, soll das Menü wo der Focus zuletzt war automatisch schließen und das neue geöffnet werden.

Auch dies ist das Standardverhalten.

Wo könnte man solch eine Navigation herbekommen?

Eine zugängliche Multilevelnavigation

Allerdings bleiben die Menüpunkte nicht geöffnet und das halte ich auch nicht für sinvoll, u.a. weil sie Inhalte überdecken können.

Mit dem vorgeschlagenen :target halte ich es nur für lösbar, wenn es auf der Seite keine weiteren Links gibt. Eine (unschöne) non-js-Lösung wäre zum Beispiel, der Navigation eine ID zu verpassen und im CSS alle Möglichkeiten anzugeben, welche Navigationsbuttons geöffnet sein sollen.

Sinnvoll ist eine zusätzliche Navigationsleiste in Textform ala: Sie sind hier: Home > Auftritte > 23.4.11

Matthias

[Gunnar Bittersmann]

@@Matthias Apsel:

nuqneH

1. Vertikale Navigation die per Klick die Submenüs öffnet.
   Ist via CSS kein Problem.

Nicht, dass du Klick und Hover durcheinanderbringst …

3. Auch in der Hauptmenuebene sollen Webseiten hinterlegt werden können und nicht nur als Überschrift für die einzelnen Kategogien dienen.
   Das ist auch kein Problem.

Doch. Wie soll sich beim Klick auf solch einen Menüpunkt das Untermenü öffnen, wenn da eine andere Seite verlinkt ist?

Mit dem vorgeschlagenen :target halte ich es nur für lösbar, wenn es auf der Seite keine weiteren Links gibt.

Das stellt kein Problem dar.

<nav>  
  <ol>  
    <li id="section1">  
      <a href="#section1">Section 1</a>  
      <ol>  
        <li><a href="?">Section 1.1</a></li>  
        <li><a href="?">Section 1.2</a></li>  
      </ol>  
    </li>  
    <li id="section2">  
      <a href="#section2">Section 2</a>  
      <ol>  
        <li><a href="?">Section 2.1</a></li>  
        <li><a href="?">Section 2.2</a></li>  
      </ol>  
    </li>  
  </ol>  
</nav>

nav li ol { display: none }  
nav li:target ol { display: block }

Allerdings geht das nur für eine Unterebene.

Qapla'

[suit]

Doch. Wie soll sich beim Klick auf solch einen Menüpunkt das Untermenü öffnen, wenn da eine andere Seite verlinkt ist?

Man soll doch Menüpunkte, die Unterpunkte haben eigentlich nicht verlinken (in einem Drop-Down).

[Matthias Apsel]

Om nah hoo pez nyeetz, Gunnar Bittersmann!

1. Vertikale Navigation die per Klick die Submenüs öffnet. Ist via CSS kein Problem.

Nicht, dass du Klick und Hover durcheinanderbringst …

3. Auch in der Hauptmenuebene sollen Webseiten hinterlegt werden können und nicht nur als Überschrift für die einzelnen Kategogien dienen. Das ist auch kein Problem.

Doch. Wie soll sich beim Klick auf solch einen Menüpunkt das Untermenü öffnen, wenn da eine andere Seite verlinkt ist?

Klick und Hover …

Matthias

[Matthias Apsel]

Om nah hoo pez nyeetz, Gunnar Bittersmann!

<nav>

>   <ol>
>     <li id="section1">
>       <a href="#section1">Section 1</a>
>       <ol>
>         <li><a href="?">Section 1.1</a></li>
>         <li><a href="?">Section 1.2</a></li>
>       </ol>
>     </li>
>     <li id="section2">
>       <a href="#section2">Section 2</a>
>       <ol>
>         <li><a href="?">Section 2.1</a></li>
>         <li><a href="?">Section 2.2</a></li>
>       </ol>
>     </li>
>   </ol>
> </nav>

nav li ol { display: none }

> nav li:target ol { display: block }

Und auch das nicht ordentlich, denn nach einem Klick auf Section 1.1 ist das :target nicht mehr bei Section 1 und somit das Menü wieder zugeklappt.

Matthias

[Gunnar Bittersmann]

@@Matthias Apsel:

nuqneH

Und auch das nicht ordentlich, denn nach einem Klick auf Section 1.1 ist das :target nicht mehr bei Section 1 und somit das Menü wieder zugeklappt.

Doch. "Section 1.1" ist ein Link zu einer anderen Seite, da ist Schluss mit Menü.

Qapla'