ampliable Árbol Lista de menús

Lo que quiero lograr es la siguiente:ampliable Árbol Lista de menús

Quiero tener una lista de vista de árbol que aparecerá en la parte izquierda de la página, cuando se expande un elemento, que es artículos son cargados a partir de una base de datos (que puedo hacer esta parte), así que básicamente va a ir como esto:

+Category1 
+Category2 
+Category3 
+Category4

Cuando el usuario hace clic en +, se mostrará el siguiente hasta que los datos se agarró de DB y se añade a la página :

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

Después de cargar los datos, cada subcategoría tendrá subcategoría.

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

¿Cómo puedo lograr esto?

NOTA: Quiero saber cómo poner (o *> o cualquier otro símbolo para la lista, creo que esto es CSS, pero yo no trabajo con el diseño en todos !!)

Su ayuda es muy apreciado.

Fuente

2011-12-14 sikas

bien, así que supongo que la lista de elementos es una ul Para cada elemento, se puede añadir una clase llamada cerrada, esta clase se vería así en css:

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

Entonces

Fuente

2011-12-14 14:35:42 bigblind

¿Hay algún código HTML para esto? Quiero que se muestre exactamente como en la pregunta. – sikas

Puede anteponer el - al texto en el elemento usando por ejemplo el método '.text (newtext)' de jquery cuando se abre, y eliminarlo, y cambiarlo por un + cuando la sección se cierra de nuevo. No hay HTML para crear dicho árbol. – bigblind

Frederik Creemers, no trabajo con HTML, todo mi trabajo es con PHP y MySQL principalmente ... Así que apreciaría que proporcione un código de muestra que lo demuestre. Estoy tratando de encontrar algo en google, encontré buenos ejemplos pero tutoriales de semana !! – sikas

¿Tiene algún requisito del navegador? He utilizado el ejemplo de [CSS] Ninja, junto con selectivizr para admitir versiones anteriores de IE. No tienen un ejemplo accesible, aparte de lo que está en la [CSS] sitio de Ninja:

Pure CSS collapsible tree menu

Y selectivizr:

selectivizr

El ejemplo está dirigido a usarlo para una escenario de navegación de archivos, pero debería poder modificarlo con bastante facilidad para eliminar las carpetas y los iconos de archivos, si lo desea.

Fuente

2011-12-14 15:42:40

Respuesta

Cuestiones relacionadas