Tras una primera introducción a PureCSS en la entrada anterior, donde expuse porqué este projecto me encanta, es hora de mostrar qué se puede hacer con él.
Menus
La estética de los menús se basa en un conjunto de items dentro de una lista desordenada, donde el CSS se encarga de ponerlo bonito. La lista ordenada es esta:
<ul> <li><a href="plantilla_purecss.html">Plantilla</a></li> <li><a href="purecss_botones.html">Botones</a></li> <li><a href="purecss_form0.html">Formulario Paso 0</a></li> </ul>
Preparando el menu
Los menus son por defecto verticales, y se ajustan al ancho del elemento DIV que los contiene. Así, con las clases pure-menu y pure-menu-open ya lo tenemos:
Menu vertical
Si queremos resaltar una de las opciones, podemos usar la clase pure-menu-selected, que pone el texto más negro.
Para crear el menú horizontal, es necesario agregar tres clases: pure-menu, pure-menu-open y pure-menu-horizontal. Además, se pueden crear cabeceras de los menús añadiendo la clase pure-menu-heading, consiguiendo el resultado:
Menu horizontal
Aquí podeis verlo, y además, el código está disponible en GitHub.
Paginadores
Una alternativa al menú es los paginadores, que se consiguen con la clase pure-paginator aplicada al elemento <ul>. Los distintos elementos <li> de la lista ordenada recibirán la clase pure-button (que veremos en otra entrada con más detalle).
Paginator
Un poco defraudado …
Personalmente, la creación de menús me ha defraudado un poco, y aquí sí creo que hay mejores posibilidades. Para empezar, casi que los menús quedan limitados a un solo nivel. Además, no me aporta mucho la clase pure-menu-heading, salvo que el usuario incluya alguna personalización vía CSS que provoque alguna diferenciación mayor, y la alternativa que ofrecen para la creación de menús con desplegables es el uso de YUI, con Javascript, complicándose la cosa.
Como podeis imaginar, los paginadores tampoco me han convencido.
Seguramente, muchos de vosotros también lo esteis, pero … que esta parte no sea perfecta no implica que otras no funcionen!
… bueno, espera …
Sorprendido por esto, visito la web del proyecto en GitHub, y compruebo que hay un proyecto complementario llamado pure-dropdown-menu (NOTA: Este projecto NO es oficial de PureCSS), que incluye nuevo código CSS y que ahora sí que permite hacer menús horizontales con cascada, bastante chulos. Yo, el código CSS lo he copiado a manejandodatos_css.css. Sin embargo, es necesario utilizar nuevas clases para que funcione.
La base es empezar de un menú horizontal, tal cual se ha comentado arriba. Además, es obligatorio seguir las siguientes reglas a aplicar:
- Las listas desordenadas <ul> deben incluir la clase pure-menu-children
- El elemento <li> que vaya a tener un nuevo nivel debe incluir la clase pure-menu-can-have-children
- Para que aparezca la flechita indicando que hay un nuevo nivel, hay que incluir la clase pure-menu-label
Y el resultado:
Menu horizontal con dropdown
Espero que tu decepción haya sido … un poco menos, como la mía! Además, …
todo es CSS … ni na sola línea de Javascript!
Buen dia!