Extensible Arbre De Menu De La Liste
Ce que je veux réaliser est le suivant:
Je veux avoir une arborescence de la liste qui apparaîtra sur le côté gauche de la page, lorsqu'un Élément est développé, c'est des éléments sont chargées à partir d'une base de données (je peux faire de cette partie), donc en gros il va comme ceci:
+Category1
+Category2
+Category3
+Category4
Lorsque l'utilisateur clique sur +
, il va montrer le dessous jusqu'les données sont saisies à partir de DB et ajouté à la page:
+Category1
-Category2
loading ...
+Category3
+Category4
Une fois les données chargées, chaque sous-catégorie des sous-sous-catégories.
+Category1
-Category2
+Sub-Cat1
+Sub-Cat2
+Sub-Cat3
+Sub-Cat4
+Category3
+Category4
Comment puis-je y parvenir?
REMARQUE: je veux savoir comment mettre (*
ou >
ou n'importe quel autre symbole pour la liste, je crois que c'est le CSS mais je ne travaille pas avec la conception du tout!!)
Votre aide est très apprécié.
OriginalL'auteur sikas | 2011-12-14
Vous devez vous connecter pour publier un commentaire.
Ne vous avez des exigences du navigateur? J'ai utilisé le [CSS] Ninja exemple, avec selectivizr à prendre en charge les anciennes versions d'IE. N'avez pas accessible exemple, en dehors de ce qui est sur le [CSS] Ninja site:
Pur CSS pliable arbre de menu
Et selectivizr:
selectivizr
L'exemple est orientée vers l'utilisation pour un fichier de navigation scénario, mais vous devriez être en mesure assez facilement le modifier pour supprimer les dossiers et les icônes de fichiers, si vous le souhaitez.
OriginalL'auteur Joseph Ferris
ok, donc je suppose que votre liste d'articles est un
ul
Pour chaque élément, vous pouvez ajouter une classe appelée fermé, cette clase devrait ressembler à ceci dans le css:
Puis ‹ith javascript, vous togle ces classes. Vous pouvez également ajouter d'autres styles de ces signes + et - dans le css ci-dessus, pour lui donner une bordure et la couleur d'arrière-plan.
Vous pourriez ajouter le - pour le texte dans l'élément à l'aide par exemple de jquery
.text(newtext)
méthode lorsqu'il est ouvert, et l'enlever, et de passer pour un + lorsque la section est de nouveau fermé. Il n'y a pas de code HTML pour créer un tel arbre.Frederik Creemers, je ne travaille pas avec le HTML, tout mon travail est avec PHP et MySQL principalement ... Donc j'apprécierais que vous fournir un exemple de code que de le démontrer. J'essaie de trouver quelque chose sur google, trouvé de bons exemples, mais la semaine de tutoriels!!
OriginalL'auteur bigblind