Arbre extensible Liste des menus

Ce que je veux atteindre est la suivante:Arbre extensible Liste des menus

Je veux avoir une liste-arborescence qui apparaîtra sur le côté gauche de la page, lorsqu'un élément est étendu, il est des articles sont chargés à partir d'une base de données (je peux faire cette partie), donc en gros il ira comme ceci:

+Category1 
+Category2 
+Category3 
+Category4

Lorsque l'utilisateur clique sur +, il affichera le ci-dessous jusqu'à ce que les données sont saisi de DB et ajouté à la page :

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

Après le chargement des donné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 y parvenir?

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

Votre aide est vraiment apprécié.

Source

2011-12-14 sikas

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

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

Puis

Source

2011-12-14 14:35:42 bigblind

Y a-t-il du code HTML pour cela? Je veux qu'il apparaisse exactement comme dans la question. – sikas

Vous pouvez ajouter le - au texte de l'élément en utilisant par exemple la méthode '.text (newtext)' de jquery quand il est ouvert, et le retirer, et le changer pour un + lorsque la section est à nouveau fermée. Il n'y a pas de code HTML pour créer un tel arbre. – bigblind

Frederik Creemers, je ne travaille pas avec HTML, tout mon travail est principalement sur PHP et MySQL ... J'apprécierais donc que vous fournissiez un exemple de code qui le démontre. J'essaie de trouver quelque chose sur google, trouvé de bons exemples mais des tutoriels de la semaine !! – sikas

Avez-vous des besoins sur votre navigateur? J'ai utilisé l'exemple [CSS] Ninja, avec selectivizr pour supporter les anciennes versions d'IE. Ne pas avoir un exemple accessible, à l'exception de ce qui est le [CSS] Site Ninja:

Pure CSS collapsible tree menu

Et selectivizr:

selectivizr

L'exemple vise à utiliser pour scénario de navigation de fichiers, mais vous devriez être en mesure de le modifier assez facilement pour supprimer les dossiers et les icônes de fichiers, si vous le souhaitez.

Source

2011-12-14 15:42:40

Arbre extensible Liste des menus

Répondre

Questions connexes