Verschachtelter Verzeichnisbaum

Um einen verschachtelten Verzeichnisbaum für Ihre Webseite zu erstellen benötigst du kein JavaScript. CSS reicht dafür völlig aus. In diesem Artikel zeige ich, wie das funktioniert.

 

Verschachtelter Verzeichnisbaum nur mit CSS

Auf der Webseite von Martin Ivanov habe ich ein tolles CSS-Snippet gefunden, mit dem man einen verschachtelten Verzeichnisbaum mit reinem CSS erstellen kann. Dieses Snippet möchte ich dir nicht vorenthalten. Das Ganze funktioniert dabei in allen gängigen Browsern (getestet mit der jeweils aktuellen Version) und sogar auf dem iPhone. Dort wird es jedoch etwas fummelig.

Um das hinzubekommen, sind zwei Code-Snippets nötig. Zum einen natürlich das entsprechende Stylesheet, zum anderen der entsprechende HTML-Code. Beide Beispiele findest du weiter unten. Du kannst dir aber auch das Komplettpaket, bestehend aus Stylesheet, HTML-Beispiel und Grafik als ZIP-Datei herunterladen: Verschachtelter Verzeichnisbaum.zip (2,91 KB).

 

CSS-Code

Damit das ganze funktioniert, musst du erst einmal das Stylesheet für den Verzeichnisbaum festlegen. Dieses ist etwas umfangreicher.

Beispiel (CSS):

.css-treeview ul,
.css-treeview li
{
    padding: 0;
    margin: 0;
    list-style: none;
}
 
.css-treeview input
{
    position: absolute;
    opacity: 0;
}
 
.css-treeview
{
    font: normal 11px "Segoe UI", Arial, Sans-serif;
    -moz-user-select: none;
    -webkit-user-select: none;
    user-select: none;
}
 
.css-treeview a
{
    color: #00f;
    text-decoration: none;
}
 
.css-treeview a:hover
{
    text-decoration: underline;
}
 
.css-treeview input + label + ul
{
    margin: 0 0 0 22px;
}
 
.css-treeview input ~ ul
{
    display: none;
}
 
.css-treeview label,
.css-treeview label::before
{
    cursor: pointer;
}
 
.css-treeview input:disabled + label
{
    cursor: default;
    opacity: .6;
}
 
.css-treeview input:checked:not(:disabled) ~ ul
{
    display: block;
}
 
.css-treeview label,
.css-treeview label::before
{
    background: url("icons.png") no-repeat;
}
 
.css-treeview label,
.css-treeview a,
.css-treeview label::before
{
    display: inline-block;
    height: 16px;
    line-height: 16px;
    vertical-align: middle;
}
 
.css-treeview label
{
    background-position: 18px 0;
}
 
.css-treeview label::before
{
    content: "";
    width: 16px;
    margin: 0 22px 0 0;
    vertical-align: middle;
    background-position: 0 -32px;
}
 
.css-treeview input:checked + label::before
{
    background-position: 0 -16px;
}
 
/* webkit adjacent element selector bugfix */
@media screen and (-webkit-min-device-pixel-ratio:0)
{
    .css-treeview
    {
        -webkit-animation: webkit-adjacent-element-selector-bugfix infinite 1s;
    }
 
    @-webkit-keyframes webkit-adjacent-element-selector-bugfix
    {
        from
        {
            padding: 0;
        }
        to
        {
            padding: 0;
        }
    }
}

 

 

HTML-Code

Hast du das Stylesheet festgelegt, kannst du es in deine Website einbinden. Im nachstehenden Beispiel kannst du die Funktionsweise nachvollziehen.

Code-Beispiel (HTML):

<!DOCTYPE html>
 <html lang="de">
<head>
    <meta charset="utf-8">
    <meta name="robots" content="noindex">
    <title>Code-Beispiel von Webmasterparadies.de</title>
    <link rel="stylesheet" href="verschachtelt.css" type="text/css" />
</head>
<body>
<div>
    <ul>
        <li><input type="checkbox" id="item-0" /><label for="item-0">Dieser ordner ist standardm&auml;&szlig;ig geschlossen.</label>
            <ul>
                <li><input type="checkbox" id="item-0-0" /><label for="item-0-0">Hey, ein verschachtelter Ordner</label>
                    <ul>
                        <li><input type="checkbox" id="item-0-0-0" /><label for="item-0-0-0">Und noch einer</label>
                            <ul>
                                <li><a href="./">Erstes, verschachteltes Element</a></li>
                                <li><a href="./">Zweites, verschachteltes Element</a></li>
                                <li><a href="./">Drittes, verschachteltes Element</a></li>
                                <li><a href="./">Viertes, verschachteltes Element</a></li>
                            </ul>
                        </li>
                        <li><a href="./">Element 1</a></li>
                        <li><a href="./">Element 2</a></li>
                        <li><a href="./">Element 3</a></li>
                    </ul>
                </li>
                <li><input type="checkbox" id="item-0-1" /><label for="item-0-1">Und noch einer</label>
                    <ul>
                        <li><a href="./">Element A</a></li>
                        <li><a href="./">Element B</a></li>
                        <li><a href="./">Element C</a></li>
                        <li><a href="./">Element D</a></li>
                        <li><a href="./">Element E</a></li>
                        <li><a href="./">Element F</a></li>
                        <li><a href="./">Element G</a></li>
                        <li><a href="./">Element H</a></li>
                    </ul>
                </li>
                <li><input type="checkbox" id="item-0-2" disabled="disabled" /><label for="item-0-2">Deaktivierter Ordner</label>
                    <ul>
                        <li><a href="./">Element 1</a></li>
                        <li><a href="./">Element 2</a></li>
                        <li><a href="./">Element 3</a></li>
                        <li><a href="./">Element 4</a></li>
                        <li><a href="./">Element 5</a></li>
                        <li><a href="./">Element 6</a></li>
                        <li><a href="./">Element 7</a></li>
                        <li><a href="./">Element 8</a></li>
                    </ul>
                </li>
                <li><a href="./">Element 1B</a></li>
                <li><a href="./">Element 2B</a></li>
                <li><a href="./">Element 3B</a></li>
                <li><a href="./">Element 4B</a></li>
        </ul>
</li>
<li><input type="checkbox" id="item-1" checked="checked" /><label for="item-1">Dieser ordner ist standardm&auml;&szlig;ig offen...</label>
        <ul>
            <li><input type="checkbox" id="item-1-0" /><label for="item-1-0">Und beinhaltet weitere, verschachtelte Elemente</label>
                <ul>
                    <li><a href="./">Zum Beispiel dieses hier</a></li>
                    <li><a href="./">oder dieses hier</a></li>
                    <li><a href="./">oder auch das hier</a></li>
                </ul>
            </li>
            <li><a href="./">Ich</a></li>
            <li><a href="./">Brauche</a></li>
            <li><a href="./">Einen</a></li>
            <li><a href="./">Kaffee</a></li>
        </ul>
</li>
<li><input type="checkbox" id="item-2" /><label for="item-2">Und das Beste ist...</label>
        <ul>
                <li><input type="checkbox" id="item-2-0" /><label for="item-2-0">Das dieser Verzeichnisbaum</label>
                    <ul>
                        <li><input type="checkbox" id="item-2-2-0" /><label for="item-2-2-0">kein bisschen JavaScript benutzt</label>
                            <ul>
                                <li><a href="./">Sondern einzig und allein</a></li>
                                <li><a href="./">auf die Kraft</a></li>
                                <li><a href="./">von CSS vertraut</a></li>
                            </ul>
                        </li>
                        <li><a href="./">Ist</a></li>
                        <li><a href="./">Mein</a></li>
                        <li><a href="./">Kaffee</a></li>
                        <li><a href="./">schon fertig?</a></li>
                    </ul>
                </li>
                <li><input type="checkbox" id="item-2-1" /><label for="item-2-1">Das hier ist ein Ordner mit ganz vielen...</label>
                    <ul>
                        <li><a href="./">verschachtelten Elementen</a></li>
                        <li><a href="./">verschachtelten Elementen</a></li>
                        <li><a href="./">verschachtelten Elementen</a></li>
                        <li><a href="./">verschachtelten Elementen</a></li>
                        <li><a href="./">verschachtelten Elementen</a></li>
                    </ul>
                </li>
                <li><input type="checkbox" id="item-2-2"/><label for="item-2-2">&Uuml;brigens...</label>
                    <ul>
                        <li><a href="./">ich</a></li>
                        <li><a href="./">hoffe</a></li>
                        <li><a href="./">ich</a></li>
                        <li><a href="./">habe</a></li>
                        <li><a href="./">&uuml;berall</a></li>
                        <li><a href="./">"verschachtelt"</a></li>
                        <li><a href="./">richtig</a></li>
                        <li><a href="./">geschrieben</a></li>
                    </ul>
                </li>
            </ul>
        </li>
    </ul>
</div>
</body>
</html>

 

Anzeigebeispiel ansehen

 

Kompatibilität

Dieses Script habe ich in folgenden Browsern getestet:

  • Google Chrome 31
  • Firefox 26
  • Internet Explorer 11
  • Opera 18
  • Safari (iPhone-Version, iOS 7.0.4)

In den genannten Browsern funktionierte das Script einwandfrei. Ich kann darüber hinaus leider nicht versichern, dass dieses Beispiel auch in älteren Browser-Versionen oder hier nicht aufgeführten Browsern funktioniert.

 


Dir gefällt dieser Artikel?

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht.