CSS avanzado: 12 trucos

Navegación con desplegables y tercer nivel de submenús

¡Prueba gratis durante 10 días

nuestros 1240 cursos !

Prueba gratis Mostrar modalidades de suscripción
Un menú de tres niveles de navegación siempre se termina haciendo complicado. En este vídeo vamos a aprender cómo hacer un menú de tres niveles fácilmente y sin complicaciones, recordando que menos es más.

Transcripción

Vamos a ver cómo poder trabajar un menú de navegación con hasta tres niveles de navegación. Todo ello generado por CSS, sin utilizar ningún tipo de JavaScript. Teniendo en cuenta el diseño que tenemos, nos vamos a nuestro HTML, donde podemos observar por un lado un primer nivel. Dentro de ese primer nivel, tendríamos la segunda opción y dentro de ella vamos a tener nuestra tercera opción. Con los CSS definidos para un primer nivel y un segundo nivel, nos vamos a ir al navegador y vamos a ver cómo queda. Aquí tenemos nuestro primer nivel distribuido igual que el diseño. Nuestro segundo nivel de navegación, que lo hemos colocado con posiciones absolutas para que funcione. Hemos dejado un pequeño espaciado por la derecha. Como nota, os diré que para poder calcular el tamaño correcto de nuestro 'width', para que siga siendo el 100 % de nuestra opción superior –si os fijáis, es exactamente igual de grande– pero no afecte ese espacio que estamos dejando por la izquierda, he utilizado 'calc'. Este atributo nos ayuda a poder calcular automáticamente cuánto tenemos que restarle. En este caso tenemos el 100 % menos los 10 píxeles que le he puesto de espacio por la izquierda y él automáticamente calcula cuánto tiene que ser. Si nos vamos a nuestro 'nav', veremos como el 'width' está calculado automáticamente. Si nos fijamos dentro de nuestro 'nav', tenemos aquí el tercer nivel de navegación, lo que vamos a hacer es colocarlo estéticamente para que se vea igual que este. Nos vamos a nuestro CSS, voy a esconder esto, para que luego veáis cómo funciona, le decimos dónde lo queremos, en este caso nos interesa que esté a la derecha de donde estamos. Además de eso, nuestro texto tendrá otro color distinto y distintos tamaños también. Como ayuda, os comentaré que este piquito que está aquí lógicamente solo va a aparecer en los menús que estén seleccionados de tercer nivel. Podríamos colocárselo a la opción que está activa, pero entonces ya tendremos que andar gestionando mediante JavaScript una clase que ponga y quite ese triángulo. Sin embargo, si se lo ponemos al menú de tercer nivel de navegación, ópticamente va a quedar exactamente igual, pero nos va a ayudar a no tener que utilizar JavaScript. Así que se lo colocamos con la propiedad 'after'. Es un triangulito –un cuadrado, mejor dicho– que estéticamente parece un triángulo, pero es porque lo he rotado. ¿Veis? Si yo le quito esta propiedad de CSS, podéis observar cómo es el cuadrado. Además de esto, tenemos las opciones de menú. Hemos puesto borde, color... Nos interesa que la última opción del menú no tenga borde, así que utilizamos el pseudoelemento 'last-child'. Además de eso, queremos que cuando hagamos 'hover' en nuestro enlace, se marque en negrita, igual que aquí, y además le vamos a decir, como hereda del padre de arriba, que no queremos 'after'. De esta manera, tenemos nuestro menú. Además de eso, tenemos que conseguir que este 'nav' ocupe el 100 % de nuestra opción de menú y esta de aquí también. Para eso nos vamos al código, miramos el 'width' del 'subnavbar'. En este caso es donde hemos puesto el 'calc' –no me había dado cuenta, para que veáis que yo también me equivoco–. Esto es importante, que no esté separado, ¿vale? Ahí está, ahora sí. Y también hemos hecho que lo estén alineados los elementos a la izquierda, en el centro... izquierda y centro. Como vemos, ya tenemos ese 'hover' incluso dentro de ellos. Ahora nos queda ocultar estos menús. Vamos a ocultar el primero, ahí está, y el segundo, ahí está. Y con las clases: en el 'hover' del 'li' del 'subnavbar' y en el 'hover' del 'li' del 'subnavbar' propio, que el tercer menú de navegación se vea. Nos vamos a nuestro navegador: tenemos la primera opción de menú y cuando hacemos aquí, ¿veis?, queda mucho mejor si el piquito está dentro del tercer nivel de navegación y ya tenemos nuestro menú desplegable.

CSS avanzado: 12 trucos

Descubre con estos 12 ejemplos cómo abordar los diseños y plantearlos para construir estructuras estándares de HTML5 con efectos CSS3 útiles en nuestro día a día como maquetadores.

1:04 horas (15 Videos)
Actualmente no hay comentarios.
 
Software:
Fecha de publicación:6/09/2016
Duración:1:04 horas (15 Videos)

Este curso video2brain está disponible como descarga y para ser visualizado online. ¡Pero no hace falta que decidas entre las dos opciones! Al comprar el curso, disfrutarás de ambas posibilidades.

La descarga te permite ver las lecciones sin estar conectado/a a internet y supone una navegación fácil y ágil entre capítulo y capítulo. Si vas a trabajar en diferentes ordenadores o si no quieres descargarte el curso completo, entra en la web con tus datos de acceso y disfruta directamente de tus vídeos online. Te deseamos que disfrutes de este curso y te resulte de mucha utilidad.

Estamos a tu disposición si tienes cualquier tipo de duda o pregunta.