web-dev-qa-db-fra.com

Liste des menus de l'arborescence extensible

Ce que je veux réaliser est le suivant:

Je veux avoir une liste arborescente qui apparaîtra sur le côté gauche de la page, lorsqu'un élément est développé, ses éléments sont chargés à partir d'une base de données (je peux faire cette partie), donc en gros, cela se passera comme suit:

+Category1
+Category2
+Category3
+Category4

Lorsque l'utilisateur clique sur +, il affichera ce qui suit jusqu'à ce que les données soient extraites de la base de données et ajoutées à la page:

+Category1
-Category2
    loading ...
+Category3
+Category4

Une fois les données chargées, chaque sous-catégorie aura une sous-sous-catégorie.

+Category1
-Category2
    +Sub-Cat1
    +Sub-Cat2
    +Sub-Cat3
    +Sub-Cat4
+Category3
+Category4

Comment puis-je atteindre cet objectif?

REMARQUE: je veux savoir comment mettre (* ou > ou tout autre symbole de la liste, je crois que c'est CSS mais je ne travaille pas du tout avec le design !!)

Ton aide est grandement appréciée.

htmlcsslistviewtreeview
16
sikas

Avez-vous des exigences de navigateur? J'ai utilisé l'exemple [CSS] Ninja, ainsi que selectivizr pour prendre en charge les anciennes versions d'IE. Je n'ai pas d'exemple accessible, à part ce qui se trouve sur le site [CSS] Ninja:

menu arborescent pliable CSS pur

Et sélectivizr:

selectivizr

L'exemple est destiné à l'utiliser pour un scénario de navigation de fichiers, mais vous devriez pouvoir le modifier assez facilement pour supprimer les dossiers et les icônes de fichiers, si vous le souhaitez.

9
Joseph Ferris

ok, donc je suppose que votre liste d'éléments est un ul À chaque élément, vous pouvez ajouter une classe appelée fermée, ce clase ressemblerait à ceci dans css:

.closed:before{content:'+';}
.opened:before{content:'-';}

Puis ‹avec javascript, vous basculez entre ces classes. Vous pouvez également ajouter d'autres styles à ces signes + et - dans le CSS ci-dessus, pour lui donner une couleur de bordure et d'arrière-plan.

5
bigblind