Share
Recientemente, publicamos un excelente tutorial que convirtió el menú de navegación vertical de Orman Clark en un acordeón flexible con jQuery. En realidad, es posible hacer que todo funcione sin apoyarse en jQuery, y es la oportunidad perfecta para jugar con el selector de objetivos CSS:.
Vamos a olvidarnos de jQuery y usaremos el CSS. :objetivo pseudo selector para hacer que nuestro menú de acordeón se expanda y se contraiga.
Como recordatorio, aquí está la demostración original de jQuery, luego está el enfoque puramente CSS.
Accentsconagua
:objetivo Selector PseudoSin duda, estará familiarizado con las URL que se ven así: http://www.w3.org/TR/selectors/#target-pseudo. Termina con un signo # y un ID de elemento, que se utiliza para llevar el navegador directamente a ese elemento. Esta URL en particular es el ejemplo perfecto: te lleva al encabezado con un ID de # objetivo-pseudo (siéntete libre de ir y leer).
Cuando se cose al final de una URL, esta identificación se conoce como un identificador de fragmento. No solo se usa para llevar el navegador a una ubicación en la página, también se puede usar a través de CSS para identificar el elemento en cuestión.
En breve; usamos :objetivo Seleccionar y manipular el elemento en el identificador del fragmento..
Comencemos descargando los archivos fuente originales del primer tutorial. El estilo ya está hecho para nosotros, así que no tiene mucho sentido reinventar la rueda.
Comience abriendo index.html, en la línea 10 verá que se hace referencia a jQuery. No necesitaremos eso, así que deshazte de eso..
Menú de navegación vertical: CSS3 codificado
Luego, al pie del documento, encontrará la función que hace funcionar el acordeón jQuery. Deshazte de todo eso también.
Excelente. Ahora tenemos una base mucho más limpia.
Como se mencionó anteriormente, la :objetivo El selector apuntará a cualquier elemento al que se haga referencia en el identificador de fragmento. Por lo tanto, debemos asegurarnos de que todos nuestros elementos de la lista principal tengan ID únicos, y que los anclajes dentro de ellos tengan enlaces correspondientes:
Ahora, cuando haga clic en los enlaces, verá que aparece un identificador de fragmento en la url:
Actualmente, habiendo eliminado todos los bits y bobinas de jQuery, el acordeón se expandirá completamente. Necesitamos que su estado inicial se contraiga, de modo que podamos revelar cada subsección cuando se hace clic en los enlaces.
Dirígete al archivo CSS existente, vamos a agregar algunas reglas a la parte inferior:
/ * estilos adicionales * / .menu> li> ul altura: 0; desbordamiento: oculto;
Estamos apuntando a nuestros submenús aquí; Cualquier descendiente directo de los elementos de la lista .menu. Estamos diciendo que su altura inicial es 0, y que cualquier desbordamiento está oculto para evitar que el contenido se abra paso a la vista. Ahora tenemos todo colapsado. Y así seguirá siendo a menos que hagamos algo al respecto ...
Queremos que se amplíe cada submenú, pero solo cuando hayamos hecho clic en su enlace principal. Vamos a usar :objetivo para seleccionarlos:
.menu> li: target> ul height: auto;
En pocas palabras, esto dice: "¿Ves ese li que se menciona en la url? Bueno, cambia la altura de la ul dentro de ella a auto". Una vez que haga clic en otro lugar y la ID ya no aparezca en la URL, el submenú se colapsará nuevamente. Intentalo!
Visualmente, hay un par de cosas por hacer. JQuery ya no asigna el estado activo, por lo que debemos asegurarnos de que nuestros: elementos de la lista de objetivos estén en azul. Estos ya no existen:
.menu> li> a.active
.menu> li a.active span
Así que canjéalos por estos:
.menu> li: target> a
.menu> li: target> a span
También agregaremos un borde en la parte inferior de nuestros submenús expandidos:
.menu> li: target> ul height: auto; borde inferior: 1px sólido # 51555a;
Ok, Orman estará feliz con eso :) Mira lo que tenemos hasta ahora.
Lo sé. Estas gritando en la pantalla "¿Qué pasa con las transiciones suaves?" Me temo que te vas a decepcionar. A menos que especifiquemos una altura definida para los submenús, no podemos usar las transiciones CSS para expandir y contraer suavemente nuestro acordeón. Las transiciones no se jugarán bien con altura: auto. Por supuesto tú podría especifique una altura definida:
.menu> li: target> ul altura: 7.9em; borde inferior: 1px sólido # 51555a;
y luego aplicar transiciones:
.menu> li> ul altura: 0; desbordamiento: oculto; -webkit-transición: altura 0.3s facilidad de entrada-salida; -moz-transición: altura 0,3 s facilidad de entrada; -o-transición: altura 0,3s facilidad de entrada-salida; -ms-transición: altura 0,3s facilidad de entrada-salida; transición: altura 0,3 s facilidad de entrada;
… Pero su menú ya no será 100% flexible. Estará restringido a un número específico (3) de elementos del submenú. Echa un vistazo a la demo.
Lo que nosotros podría Hacer, solo para suavizar las cosas, es agregar una transición a otra propiedad. No podemos tener la transición de altura, así que nos conformaremos con una transición de opacidad:
.menu> li> ul altura: 0; desbordamiento: oculto; opacidad: 0; filtro: alfa (opacidad = 0); / * IE6-IE8 * / -webkit-transition: opacidad 0.9s eas-in-out; -moz-transición: opacidad 0.9s facilidad de entrada-salida; -o-transición: opacidad 0.9s facilidad de entrada-salida; -ms-transición: opacidad 0.9s facilidad de entrada-salida; transición: opacidad 0.9s facilidad de entrada; .menu> li: target> ul altura: auto; borde inferior: 1px sólido # 51555a; opacidad: 1; filtro: alfa (opacidad = 100); / * IE6-IE8 * /
Lo que hemos hecho es establecer la opacidad predeterminada del submenú en 0; No solo tiene una altura de 0, ahora también es transparente. Luego, también establecemos las transiciones en el estado predeterminado. En el estado de desplazamiento, todavía se abre de par en par, pero luego el contenido se desvanece a la vista. Un poco mas facil en el ojo.
Otro problema es el hecho de que :objetivo no es reconocido por los navegadores más antiguos (Internet Explorer 8 y anteriores), por lo que nuestro menú contraído se vuelve inútil en esos navegadores. Apliquemos un par de métodos alternativos, que al menos harán que la navegación sea accesible..
En primer lugar, agregaremos un comentario condicional (después de nuestra solicitud de CSS inicial) para transportar un archivo CSS secundario si el navegador es Internet Explorer 8 o anterior:
Luego, en ese archivo simplemente repetimos las reglas en las que acabamos de trabajar, pero en lugar de usar :objetivo, usamos :flotar.
.menu> li: hover> ul altura: 7.9em; borde inferior: 1px sólido # 51555a;
Una vez más, echa un vistazo a la demostración. No es exactamente lo que buscábamos, pero al menos es una navegación accesible y compatible con versiones anteriores..
Dada la elección, es probable que aún optes por el enfoque jQuery; es igualmente aceptado en todos los navegadores (siempre que JavaScript esté habilitado) y el efecto es más suave. Sin embargo, si usted no estaba al tanto de la :objetivo selector, este Consejo rápido le habrá dado una idea de más potencial CSS.
