Tree List w CSS3

Zaczynamy oczywiście od stworzenia wielokrotnie zagnieżdzonego drzewka z wykorzystaniem <ul/> i <li/>.
Jedyne co musimy dodatkowo wprowadzić do przykładu, to objąć wszystkie <li/> w element <span/>. Lecz jeśli wiemy, że w elemencie <li/> będą linki <a/> to możemy sobie je podarować. Będą potrzebne do ustawienia poziomego kropkowanego tła.

Żeby jakoś się zabrać za określanie wyglądu, warto zacząć od nadania marginesu elementowi <ul/> i zmianie czcionki (początkowy look & feel powinien być choć troszkę podobny).

Do mojego przykładu przygotowałem trzy pliki graficzne (expand.png, hor.png, vert.png), używane do wyświetlenia połączeń w drzewku. Można je dołączyć jako Data: URL teraz właśnie jeśli ktoś chce poeksperymentować. :)

Tak więc dla elementu <li/> ustawmy tło kropkowania pionowego. Dla <span/> poziomego.

1. ul.treelist li
2. { background: url(vert.png) -4px -1px repeat-y; list-style-type: none; }
3. ul.treelist li span
4. { background: url(hor.png) -5px 2px no-repeat; }

Ustawiłem od razu pozycję tego tła, żeby ładnie się komponowało z dopełnieniami i marginesami. Dodam jeszcze, że przesunięcia elementów dobrałem empirycznie, a do tego na pikselach. W tym przykładzie nie będę tłumaczył krok po kroku wszystkich operacji w CSS, tylko koncept.

Reszta stylowania:

1. ul.treelist {
2. width: 25%;
3. font-family: Tahoma, sans-serif;
4. font-size: 11px;
5. margin: 15px;
6. }
7. ul.treelist li {
8. margin-left: -21px;
9. padding-top: 4px;
10. padding-bottom: 0;
11. margin-top: -2px;
12. }
13. ul.treelist li span {
14. padding: 1px 0 0 15px;
15. }

Ustawienia tła kropkowanego w pionie poszło całkiem nieźle, ale przecież drzewko nie wygląda tak, że kropkowanie spada w dół po każdym jego elemencie. Należy więc zatrzymać powtarzanie tła.

1. ul.treelist li:last-child
2. { background-repeat: no-repeat; }

No tak, tutaj Opera zawiedzie. Tworząc drzewko dla wszystkich przeglądarek, bez większego wsparcia dla CSS3, trzeba będzie wykorzystać dodatkowe klasy.
Następnie możemy zająć się krzyżykiem, pojawiającym się w drzewku w miejscu rozgałęzienia elementów. Zaopiekuje się tym pseudoklasa ::before.

1. ul.treelist li span::before
2. { content: url(expand.png) " "; }

Dodatkowo należy znowu usunąć krzyżyk z elementów nie wchodzących w skład rozgałęzienia. Można także ustawić inny obrazek, na przykład pojedynczego dokumentu, w przypadku gdy wykorzystujemy drzewko jako strukturę katalogów.

1. ul.treelist li span:last-child::before
2. { content: ""; }

Obejrzyj skończone drzewko: XHTML, CSS.