Cómo crear listas dinámicas para la programación html5 y css3
Video: Estructura Basica Pagina Web HTML 5 CSS3
Una simple lista de botones se ven mejor que los enlaces ordinarios HTML5, pero a veces, la página tiene que tener un esquema de navegación más complejas. Por ejemplo, es posible que desee crear un sistema de menús para ayudar al usuario a ver la estructura de su sitio.
La construcción de una lista anidada
Comience por la creación de un sistema de listas anidadas sin CSS en absoluto.
Sin estilo CSS está en su lugar, sin embargo, pero la lista tiene sus propias complejidades:
La lista primaria tiene tres entradas. Esto es en realidad una lista de varias capas. El nivel superior indica categorías, no necesariamente enlaces.
Cada elemento de la lista de arriba tiene su propia lista secundaria. Una segunda capa de enlaces tiene varios enlaces en la mayoría de los elementos.
El elemento de desarrollo web tiene otra capa de sub-listas. La disposición general de esta entrada de la lista corresponde a una compleja jerarquía de la información - como la mayoría de sitios web complejos.
La lista valida con el estándar HTML estricto. Es especialmente importante para validar el código antes de la adición de CSS cuando se trata de código HTML algo compleja, como la lista de varios niveles. Un pequeño problema en la estructura HTML que puede pasar desapercibida en un documento HTML plano puede causar todo tipo de problemas extraños en su CSS.
Aquí está el código de la lista anidada en HTML plano:
nestedList.html Algunos de mis enlaces favoritos
- Redes sociales
Tenga especial cuidado con su muesca al hacer una lista anidada compleja como ésta. Sin sangrado adecuado, se hace 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 las listas que están incrustados en un elemento de la lista. Agregue el siguiente estilo CSS a la página:
li ul {display: none;}En realidad, por lo general, de aplicar esta técnica sólo a un div especialmente marcado, como un sistema de menús.
Su página se someterá a una sorprendente transformación.
Ese pequeño fragmento de código CSS es una potencia real. Se hace algunas cosas fascinantes, tales como
Operando en listas desordenadas que aparecen dentro de los elementos de lista: Lo que esto significa en realidad es el listado superior, no se verá afectado, pero cualquier lista desordenada que aparece dentro de un elemento de la lista tendrá el estilo aplicado.
Utilizando display: none para que el texto desaparezca: Ajuste de la monitor atribuir a cuenta la página HTML para ocultar los datos dados por completo.
Este código funciona bien en casi todos los navegadores.
Conseguir las listas internas que aparezca en el momento justo
La parte divertida es cada vez las listas de interiores para que aparezca cuando el ratón está sobre el elemento padre. Un segundo estilo CSS puede hacer que esto suceda:
li ul {display: none;} li: hover ul {display: bloque-}El nuevo código es bastante interesante. Echa un vistazo a los efectos de mantener el puntero del ratón sobre el elemento de una red social.
Este código no funciona en todos los navegadores! Internet Explorer 6 (IE6) y versiones anteriores no son compatibles con el :flotar pseudo-clase en cualquier elemento excepto un. Proporcionar un comentario condicional con un estilo alternativo de las primeras versiones de IE. Todos los navegadores modernos (incluyendo IE 7 y versiones posteriores) funcionan bien.
Así es como funciona el código de lista reaparición:
Todas las listas dentro de listas están ocultas. La primera regla de estilo oculta cualquier lista que está dentro de un elemento de la lista.
li: hover se refiere a un elemento de lista que se está flotaba sobre. Es decir, si el ratón está situado en la parte superior de un elemento de la lista, esta regla se refiere a ella.
li: hover ul se refiere a una lista desordenada dentro de un elemento de la lista cernía. En otras palabras, si algún contenido es una lista desordenada que descansa dentro de una lista que tiene actualmente el solo pasar el mouse sobre él, aplicar esta regla.
Mostrar la lista como un bloque. bloqueo de pantalla anula el anterior display: none instrucción y muestra el elemento en particular como un bloque. El texto reaparece mágicamente.
Este escondite y buscar el truco no es tan grande por sí mismo. En realidad es bastante molesto tener los contenidos aparecen y desaparecen por el estilo. Hay otro problema más molesto.
Para ver por qué esto sucede, vuelva a revisar el código CSS que hace que el segmento de reaparecer:
li: hover ul {display: bloque-}Este código significa conjunto monitor a bloquear para cualquier ul eso es un niño de un oscilado li. El problema es que el desarrollo Web li contiene una ul eso contiene dos más uls. Todas las listas de bajo desarrollo web aparecen, no sólo el niño inmediata.
Una de las modificaciones más del CSS soluciona este problema:
li ul {display: none;} li: hover gt; ul {display: bloque-}El símbolo mayor que (gt;) Es una herramienta especial de selección. Se indica una relación directa. En otras palabras, el ul debe ser un elemento secundario directo de la oscilado li, No es un nieto o bisnieto. Con este indicador en su lugar, la página actúa correctamente.
Este truco te permite crear listas anidadas tan profundamente como desee y de abrir cualquier segmento, coloca el cursor sobre su padre.
Mi código actual tiene una lista con tres niveles de anidamiento, pero se puede añadir tantas listas anidadas como desee y utilizar este código para hacerlo actuar como un menú dinámico.
Este tipo de menú no es necesariamente una buena idea. Tener emergente cosas de un lado como este es realmente muy molesto.