Verschachtelter Verzeichnisbaum

Ein verschachtelter Verzeichnisbaum kann im Grunde genommen durchaus nützlich sein. Zwar kommt es natürlich auf den Einsatzzweck an, aber es gibt durchaus sinnvolle Möglichkeiten zur Anwendung. Dabei ist auch gar nicht schwer, einen verschachtelten Verzeichnisbaum zu erstellen.  Du benötigst nicht einmal JavaScript dafür. CSS reicht hingegen völlig aus.

Wie das ganze Funktioniert, erkläre ich dir im Folgenden Artikel.

 

Verschachtelter Verzeichnisbaum nur mit CSS

Auf der Webseite von Martin Ivanov habe ich ein tolles CSS Snippet gefunden. Mit diesem Script kannst du einen verschachtelten Verzeichnisbaum erstellen – und zwar mit reinem CSS. Dieses Snippet möchte ich dir daher 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.

Es sind dazu zwei Dinge nötig, um ein solches Verzeichnis zu erstellen. Erstens das entsprechende Stylesheet, zweitens der entsprechende HTML Code. Beide Beispiele findest du im Folgenden weiter unten. Du kannst dir aber auch das Paket, bestehend aus CSS Code, HTML Beispiel und Grafik als ZIP Datei komplett herunterladen. Benutze dazu einfach folgenden Link: Verschachtelter Verzeichnisbaum.zip (2,91 KB).

 

CSS Code

Damit das ganze läuft, musst du erst einmal das CSS für den Verzeichnisbaum festlegen. Der CSS Code dafür ist jedoch 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 CSS festgelegt, kannst du es dann in deine Website einbinden. Im folgenden Beispiel kannst du dabei die Funktionsweise nachvollziehen. Somit lässt sich ein verschachtelter Verzeichnisbaum in deine Website einbinden.

 

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

 

Hinweis

Wie immer, solltest du den verwendeten CSS Code dabei in möglichst vielen Browsern testen. Weiter unten in der Info Box habe ich zwar die von mir getesteten Browser aufgelistet, jedoch solltest du den Code ebenfalls noch einmal selbst testen. Browser interpretieren CSS Code schließlich unterschiedlich. Oftmals bauen die Hersteller auch eigene Funktionen ein, die dann in einer anderen Browser Engine nicht laufen. Hierzu sind dann CSS Weichen nötig, die auch im obigen Beispiel einen Einsatz finden.

Da sich diese speziellen Erweiterungen ändern können, solltest du den CSS Code immer wieder testen. Vor allen Dingen dann, wenn es sich um ein wichtiges Element der Navigation handelt.

 

Kompatibilität

Dieses Script habe ich vorher 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 klappte das Script dabei einwandfrei. Ich kann darüber hinaus leider nicht versichern, dass dieses Script auch in alten, oder hier nicht aufgeführten Browsern geht.

 


Dir gefällt dieser Artikel?

Schreibe einen Kommentar

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