Cómo crear listas dinámicas para programación HTML5 y CSS3 - dummies

Una simple lista de botones puede verse mejor que los enlaces HTML5 normales, pero a veces su página debe tener un esquema de navegación más complejo. Por ejemplo, es posible que desee crear un sistema de menús para ayudar al usuario a ver la estructura de su sitio.

Creación de una lista anidada

Comience por crear un sistema de listas anidadas sin CSS.

Aún no existe un estilo de CSS, pero la lista tiene sus propias complejidades:

La lista principal tiene tres entradas. Esta es en realidad una lista de varias capas. El nivel superior indica categorías, no necesariamente enlaces.
Cada elemento en la lista superior tiene su propia sublista. Una segunda capa de enlaces tiene varios enlaces en la mayoría de los elementos.
El elemento de Desarrollo web tiene otra capa de sublistas. El diseño general de esta entrada de lista corresponde a una jerarquía compleja de información, como la mayoría de los sitios web complejos.
La lista se valida según el estándar HTML Strict. Es especialmente importante validar su código antes de agregar CSS cuando se trata de un código HTML algo complejo, como la lista de niveles múltiples. Un pequeño problema en la estructura HTML que puede pasar desapercibido en un documento HTML simple puede causar todo tipo de problemas extraños en su CSS.

Aquí está el código para la lista anidada en HTML simple:

lista anidada html

Algunos de mis enlaces favoritos

Redes sociales

digg
reddit
stumbleupon


Referencia
google
wikipedia
diccionario


desarrollo web

XHTML / CSS

escuelas w3
htmlHelp
CSS Zen Garden


Programación

javascript. com
php. net
mysql. com

Tenga especial cuidado con su sangría al hacer una lista compleja anidada como esta. Sin una sangría adecuada, se vuelve muy difícil establecer la estructura de la página. Además, un elemento de la lista puede contener texto y otra lista. Cualquier otra disposición causará un error de validación.

Ocultar las listas internas

El primer paso para crear un sistema de menú dinámico es ocultar cualquier lista que esté incrustada en un elemento de la lista. Agregue el siguiente estilo CSS a su página:

li ul {display: none;}

En realidad, generalmente aplica esta técnica solo a un div especialmente marcado, como un sistema de menú.

Su página sufrirá una transformación sorprendente.

Ese pequeño fragmento de código CSS es una potencia real. Hace cosas fascinantes, como

Operando en listas desordenadas que aparecen dentro de los elementos de la lista: Lo que realmente significa es que la lista superior no se verá afectada, pero cualquier lista desordenada que aparezca dentro de un elemento de la lista tendrá el estilo aplicado
Usando pantalla: ninguno para hacer que el texto desaparezca: Al configurar el atributo de visualización se le dice a la página HTML que oculte los datos dados por completo.

Este código funciona bien en casi todos los navegadores.

Obteniendo las listas internas para que aparezcan en la entrada

La parte divertida es hacer aparecer las listas interiores cuando el mouse está sobre el elemento padre. Un segundo estilo CSS puede hacer que esto suceda:

li ul {display: none;} li: hover ul {display: block;}

El nuevo código es bastante interesante. Compruebe el efecto de mantener el mouse sobre el elemento Redes sociales.

¡Este código no funciona en todos los navegadores! Internet Explorer 6 (IE6) y las versiones anteriores no admiten la: pseudoclave de desplazamiento sobre cualquier elemento excepto a. Proporcione un comentario condicional con un estilo alternativo para las versiones anteriores de IE. Todos los navegadores modernos (incluido IE 7 y posterior) funcionan bien.

Así es como funciona el código de reaparición de listas:

Todas las listas dentro de las listas están ocultas. La primera regla de estilo oculta cualquier lista que esté dentro de un elemento de lista.
li: hover hace referencia a un elemento de la lista que se está pasando por alto. Es decir, si el mouse está situado encima de un elemento de la lista, esta regla le pertenece.
li: hover ul hace referencia a una lista desordenada dentro de un elemento de la lista suspendida. En otras palabras, si algún contenido es una lista desordenada que descansa dentro de una lista que actualmente tiene el mouse sobre ella, aplique esta regla.
Muestra la lista como un bloque. pantalla: el bloque anula la pantalla anterior: ninguna instrucción y muestra el elemento particular como un bloque. El texto reaparece mágicamente.

Este truco de esconderse y buscar no es tan genial por sí mismo. En realidad, es bastante molesto tener los contenidos emergentes y desaparecer así. Hay otro problema más molesto.

Para ver por qué sucede esto, eche un vistazo al código CSS que hace que el segmento reaparezca:

li: hover ul {display: block;}

Este código significa configurar la pantalla para bloquear cualquier ul que esté un niño de un hovered li. El problema es que el desarrollo web li contiene un ul que contiene dos más uls. Aparecen todas las listas en desarrollo web, no solo el hijo inmediato.

Una modificación más de CSS corrige este problema:

li ul {display: none;} li: hover> ul {display: block;}

El símbolo mayor que (>) es una herramienta de selección especial. Indica una relación directa. En otras palabras, el ul debe ser un hijo directo del li volado, no un nieto o un bisnieto. Con este indicador en su lugar, la página actúa correctamente.

Este truco le permite crear listas anidadas tan profundamente como desee y abrir cualquier segmento al pasar el mouse sobre su elemento principal.

Mi código actual tiene una lista con tres niveles de anidamiento, pero puede agregar tantas listas anidadas como desee y usar este código para que actúe como un menú dinámico.