Как да създадете дърво меню с CSS

меню

Онлайн демонстрационен пример

Този пример е създаден с помощта на подреден списък (ol) с вложени подредени списъци, които създават основната структура на папките.

Както можете да видите, структурата е списък с вложен етикет и квадратче за отметка, като щракнете върху което ще се отвори менюто.

За да настроя входа и етикета в правилния визуален ред, зададох абсолютното позициониране на входа и зададох левия поле за етикета.

За да позиционирам ol правилно, използвам отрицателна подложка (поле вляво: -0.938em 0 0 -44px), за да го позиционирам така, че да седи до етикета и под невидимото квадратче за отметка.

За да скрия подпапки, за да не се показват при свиване на родителската папка, използвах display: none, това също предотвратява навигацията на клавиатурата през свитите елементи от меню.

За елементи със списък с папки прилагам по-голям отрицателен марж, така че папките се подреждат с някой от файловите елементи, а за файлови елементи рестартирам левия поле.

Промяна на иконата в зависимост от разширението

С някои CSS3 селекторни атрибути можем да определим кое разширение има файлът и да променим съответно иконата.