indice:
- El porque
- Estructura y Funcionamiento
- Los Estilos
- Inconvenientes
- Conclusión
EL PORQUE
Hace unos 5 meses me encontraba dandole estilo a DSPACE, que es basicamente un repositorio para bibliotecas digitales desarrollado en el no tan amigable JSP.
Despues vs Antes de un menu arbol en dspace modificado con css
Una de las cosas que más cabeza me dio fue crear la estructura de un arbol en un menu, pero no cualquiera, sino con las siguientes características:
1. Los titulos deben servir como enlaces.
2. Solo desplegarse cuando se haga clic en el icono y no en el enlace.
3. Debe funcionar sin importar los niveles o subcategorias que se empleen.
Existen miles de plugin en javascript para hacerlos, pero soy diseñador gráfico que con pinitos en javascript o mejor dicho en jquery no tenia el suficiente nivel para hacerlo compatible con JAVA (jsp) por lo que un ingeniero termino creando la lógica. Sin embargo me quede con la duda y hace unas semanas pensando en que demo crear para demostrarme a mi mismo lo que sé de CSS hoy día, pense porque no crear una estructura para MENU con esas características sin usar un lenguaje de programación como tal.
ESTRUCTURA Y FUNCIONAMIENTO
La estructura la hice con EMMET. Pero la voy a detallar más aquí.
En el HTML debemos crear la siguiente estrucutura:
<ul>
<li>
<label> + </label> <!--Opcional lo coloco para darle estilos a los input-->
<input type="checkbox">
<a>Menu</a>
<ul> <!--Segundo nivel-->
<li><a>Item 1</li>
<li><a>Item 2</li>
</ul>
</li>
</ul>
y en CSS sería:
ul li>ul
{ display: none; }
u lil>input:checked ~ ul
{ display: block; }
En teoría solo necesitan colocar la estructura que detallo en el primer li en cualquier otro li, para que funcione, como señalo el label es opcional y pueden comprobar la estructura en funcionamiento en el siguiente demo de codepen, sin estilos o adornos.
ESTILOS
Para poder dar la apariencia a los input, no conocía otra forma de hacerlo sin usar los label. Para esto, relaciono cada uno de los label con un atributo for="#id"y con los input teniendo en cuenta el #id. de esta forma solo con hacer clic en el texto del label se producira el efecto "check" en los input. Lo describo porque es algo que desconocía y que descubrí gracias a KsesoCss.
Recomiendo de igual forma usar clases en cada ul de subnivel y un id para el ul padre principal y para estilizarlos utilizar los selectores avanzados de css, todo esto solo por principios de nos "ensuciar" tanto la estrutura en html, si esto no es inconveniente pueden manejar las clases (multiples mejor) como se les antoje incluso por cada sub item, labels o input.
INCONVENIENTES
El mayor errores en la estructura es la accesibilidad, que he traicionado en aras de la demo, me refiero a:
- No es retrocompatible con navegadores desactualizados no compatibles con css3 (incluyendo internet explorer 8 o versiones anteriores).
- No es accesible vía teclado, ya que de estos dependen de los input y sí los ocultamos, estos no podrán ser seleccionados por tab en los label, por lo que dejamos a los usuarios ciegos o sin mouse o padmouse sin posibilidad de usarlos.
- Añade otros elementos al código html que engordan demasiado las listas, las cuales podrían quedar exajeradamente enormes si añadimos más niveles.
- Deberán entender que por cada li, los input deben tener un ID unico y un label con su For relacionado, ya que de otra forma los label activaran cualquier otro input en la estructura causando un bug.
CONCLUSIONES
Lo bueno:- Esta demo es facil de entender y de realizar una vez comprendes la estructura.
- Sin importar los niveles y subniveles, funcionara sin problemas.
- Es compatibles en todos los dispositivos moviles y de ultima generación debido a que los navegadores que usan son los más actuales y son compatibles con el selector de estados en inputs :checked.
- Puede hacerse sin conocimientos avanzados en HTML o CSS y prescindiendo de javascript.
- Si están diseñando una landingpage responsive con un target de usuarios de dispositivos de ultima generación o OnePages o sitios de una sola pagina.
- Si son diseñadores gráficos y quieren crear un sitio personal o portafolio y no son del mundillo web.
Lo malo:
- Debido a los invonvenientes expuestos no recomiendo la implementación de esta estructura en cualquier tipo de proyectos.
Sí quieren cambiar la anterior situación y aumentar la probabilidad de implementar la estructura recomiendo lo siguiente:
- Retrocompatibilidad: Cosa que pueden solucionar añadiendo las librerías javascript modernizr.js y selectivzr.js en el head.
- Buscando por la red me encontre que la master LEA VEROU detalla una forma para que sea aaccesible al teclado http://lea.verou.me/2013/03/ios-6-switch-style-checkboxes-with-pure-css/ y que quizás mucho más adelante en una nueva versión de la demo, la implemente.
- Estudiando lo que sugiere LEA VEROU solo serían necesario los input y prescindir de los label, simplificando mucho mas el código html y css, que debido a estarlos relacionando con id únicas a los input pueden ser un poco engorroso su desarrollo en estructuras muy muy complejas.
Espero que sea útil esta demo para alguien, que estén pendientes a una actualización de la demo y que me perdonen errores en la redacción o de ortografía.
Creditos:
No use directamente el código de nadie, pero la idea no salio de la nada así que gracias a KsesoCSS fue como me inspire y anchen usuario de codepen me inspiro. Pero un amigo rastreando mucho más, encontro un articulo de2010 en CSSNINJA sobre esta propuesta, por lo que no soy tan original.
No hay comentarios.:
Publicar un comentario