Як створити деревоподібне меню за допомогою CSS
Онлайн-демо приклад
Даний приклад створено з використанням упорядкованого списку (ol) з вкладеними впорядкованими списками, які створюють основну структуру папок.
Як ви можете бачити структура являє собою список, з вкладеним label і чекбоксом, на кліку на який меню буде розкриватися.
Щоб встановити input і label у правильному візуальному порядку, я поставив абсолютне позиціонування для input і поставив відступ зліва для label
Щоб правильно розташувати ol, я використовую негативний відступ(margin-left: -0.938em 0 0 -44px), щоб розмістити його таким чином, що він перебуватиме поряд з label і під невидимим чекбоксом.
Щоб сховати підпапки, щоб вони не з'являлися, коли батьківська папка згорнута, я використав display: none, це також не дозволяє переміщення за допомогою клавіатури по згорнутих пунктах меню.
До елементів зі списком папок я застосовую більше негативне поле, таким чином папки вишиковуються в лінію з будь-яким із пунктів-файлів, а для пунктів-файлів я скидаю ліве поле.
Зміна іконки в залежності від розширення
За допомогою деяких CSS3 атрибутів селекторів ми можемо визначити, яке розширення має файл і змінити значок відповідно.
Використовуючи $ = CSS селектор атрибута дозволяє нам перевірити, яке розширення файлу - .pdf, .html і т.д.
* = буде відповідати підстроці, яка містить .pdf або .html де завгодно в межах атрибуту, і якщо посилання має відповідний рядок, ми можемо встановити відповідне зображення розширенню файлу. У способу є невеликий недолік, він буде шукати відповідність по всьому рядку і якщо, наприклад, Ваш файл називається file.html.pdf, то він буде відповідати обом типу файлів, і допункту в цьому випадку буде застосовано правило, яке матиме більш високу специфіку CSS.
Атрибути чекбоксів
У демонстраційному прикладі за промовчанням перша папка відкрита, це зроблено завдяки доданню атрибут checked до чекбоксу.
Ми також можемо додати disabled атрибут до чекбоксу, щоб не дозволяти користувачеві відкрити папку, оскільки input не може бути відзначений.
Нарешті, використання комбінації checked та disabled дозволить нам показувати під папки та файли, але при цьому не дозволяє користувачеві закривати папку верхнього рівня.
Кросбраузерність
Це меню працюватиме в будь-якому браузері, який підтримує CSS3-селектори. Воно було успішно протестовано у наступних браузерах:
- Firefox 1+
- Opera 9.6+
- Safari 4+
- Safari iPhone/iPod
- Chrome 1+
- Android
- IE9+