Расширяемый список меню деревьев
Я хочу достичь следующего:
Я хочу иметь список древовидных представлений, который будет отображаться в левой части страницы, когда элемент будет расширен, элементы загружаются из базы данных (я могу сделать эту часть), поэтому в основном это будет похоже на это:
+Category1
+Category2
+Category3
+Category4
Когда пользователь нажимает на +
, он покажет ниже, пока данные не будут схвачены из БД и не добавлены на страницу:
+Category1
-Category2
loading ...
+Category3
+Category4
После загрузки данных каждая подкатегория WILL имеет под-подкатегорию.
+Category1
-Category2
+Sub-Cat1
+Sub-Cat2
+Sub-Cat3
+Sub-Cat4
+Category3
+Category4
Как я могу это достичь?
ПРИМЕЧАНИЕ. Я хочу знать, как поставить (*
или >
или любой другой символ для списка, я считаю, что это CSS, но я вообще не работаю с дизайном!!)
Ваша помощь действительно оценена.
Ответы
Ответ 1
Есть ли у вас какие-либо требования к браузеру? Я использовал пример [CSS] Ninja, а также selectivizr для поддержки более старых версий IE. У вас нет доступного примера, кроме того, что находится на сайте [CSS] Ninja:
Чистое меню CSS с разворачивающимся деревом
И selectivizr:
selectivizr
Пример предназначен для использования в сценарии навигации по файлам, но вы должны иметь возможность довольно легко изменить его, чтобы удалить папки и значки файлов, если хотите.
Ответ 2
ok, поэтому я предполагаю, что ваш список элементов - это ul
Каждому элементу вы можете добавить класс с именем closed, этот clase будет выглядеть так: css:
.closed:before{content:'+';}
.opened:before{content:'-';}
Затем