Felix Riesterer: Vertikales Baummenü in CSS möglich?

Beitrag lesen

Liebe(r) Molle,

ich suche, wenn es das gibt ein vertikales CSS-Menü sonst Javascript mit dem man Unterrubriken darstellen kann.

Aus dieser Fragestellung geht nicht hervor, ob der Auf-und-zu-Klappmechanismus möglich sein soll, oder nicht.

Mit CSS und einer unsortierten Liste lässt sich sehr gut eine solche Baumstruktur (wie im Windows-Explorer) darstellen. Um aber einen Klappmechanismus nutzen zu können, braucht es entweder Javascript, oder eine serverseitige Technik, die Dir das Falten der Äste übernimmt.

Grundsätzliche Idee:

  
<ul id="baumstruktur">  
   <li>erster Ast  
      <ul class="auf">  
         <li>erster zweig</li>  
      </ul>  
   </li>  
   <li>zweiter Ast  
      <ul class="zu">  
         <li>zweiter Zweig</li>  
      </ul>  
   </li>  
</ul>  

Im CSS-Code stehen dann zwei Klassen und eine ID:

ul#baumstruktur { /* so soll es aussehen */ }  
ul#baumstruktur ul.auf { display: compact; /* es geht auch display:block */ }  
ul#baumstruktur ul.zu { display: none; /* Dein Zweig-Inhalt ist unsichtbar, der Zweig selbst aber nicht (="geschlossener Ordner"). */ }  

Liebe Grüße aus Ellwangen,

Felix Riesterer.