CSS avanzado: 12 trucos

Ejemplos de navegación simple: botonera con desplegables

¡Prueba gratis durante 10 días

nuestros 1271 cursos !

Prueba gratis Mostrar modalidades de suscripción
Evaluaremos un diseño ya realizado donde aparece un menú con navegación simple, es decir de dos niveles de navegación. Aprenderemos cómo poder realizar los desplegables únicamente con CSS y HTML sin necesidad de utilizar JavaScript.

Transcripción

En este ejercicio, vamos a realizar un menú de navegación con su desplegable. Todo ello sin utilizar JavaScript, única y exclusivamente con HTML y CSS. Lo primero que tenemos que hacer es mirar el comportamiento del menú. En este caso, está bastante claro y es que cuando pongamos el ratón encima se nos va a desplegar este menú. Nos vamos a ir a nuestro código. Tenemos, por un lado nuestro 'nav'. Os aconsejo que cuando utilicemos menús desplegables, utilicemos 'ul'. Aunque no soy partidaria de utilizar el 'ul' cuando estamos usando el 'nav', pero considero que para tener una mayor potestad sobre el HTML y sobre nuestro DOM, cuando realicemos menús desplegables, nos será más sencillo poder darles estilos si estos están dentro de listados, Por lo que tenemos un 'li' con clase activo, que será nuestro primer elemento de navegación, el enlace el submenú –que como veis, aquí ya no estoy utilizano 'ul'– que es este de aquí, y el resto de opciones. Si nos vamos a nuestro navegador, teniendo en cuenta las CSS que tenemos dadas de alta. Y en este caso, tenemos las CSS del 'navbar', con su color de fondo; el 'ul' para que funcione a modo de 'flex' con su altura y su disposición, para que calcule automáticamente el tamaño; cada uno de los 'li' con una posición relativa y también que automáticamente gestione el espacio que tiene entre todo y también para dotarlo de 'flex', para poder alinear tanto horizontal como verticalmente las opciones; nuestros enlaces, con los estilos propios de un enlace; y por último el 'after' dentro del activo de 'li', para colocar nuestra barrita azul en la parte de abajo. Como podemos observar, mediante firebug, tenemos nuestro 'li', el activo, con un menú. Lógicamente, nuestro menú está aquí metido, que podéis ver como va generando todas estas opciones de aquí. Pero a nosotros lo que nos interesa es que ese 'nav' tenga este aspecto. Nos vamos a ir a nuestras CSS y lo primero que vamos a hacer es dotar de estilos a nuestro 'navbar'. Voy a comentar esto, para que podéis ver lo que estoy haciendo. Si lo colocamos así, lo que le estoy diciendo es que el color es el azul oscuro. Lo he posicionado de forma absoluta respecto a este 'li', por eso el 'li' tiene un 'postition relative'. Y lo he posicionado, respecto de arriba, a 61 píxeles, porque yo he especificado que el alto de mi 'ul' son 60. Como quiero que me quede un píxel entremedias de mi submenú y la opción, por eso 61. Si yo quisiera que me quedara junto, sería tan sencillo como ponerle 60. Nos quedamos con 61. Recordaros que cuando utilizamos 'position absolute', hay que especificar el 'width'. Si no lo hacemos, corremos el riesgo de que nuestro elemento HTML solamente tenga el tamaño de aquello que lo contiene. Hemos especificado el ancho, ahora lo que vamos a hacer es que nuestras acciones se parezcan a nuestro diseño. Por ello, nos vamos aquí. Lo tengo ya preparado. Ahí podemos ver como se adapta cada uno de nuestros elementos alineado a la derecha con su bordecito. Nos quedaría la opción activa, que es esta de aquí. Vamos a seguir utilizando la propiedad 'after'. Aquí tenemos nuestra opción activa y ahora lo que nos quedaría sería que se visualizara cuando hacemos 'hover' encima del menú. Lo primero que tenemos que hacer es ocultar el menú por CSS, para que no nos aparezca. Y ahora lo que nos quedaría sería que al poner el ratón encima de nuestra primera opción, saliera. Si miramos el DOM, lo que vamos a hacer es que cuando hagamos 'hover' dentro del 'li', se muestre el 'nav' que hay dentro. Es decir, cuando hagamos 'hover' dentro de nuestro 'li', el 'nav' que hay dentro, en este caso el submenú, tenga un 'display-block' y así sobrescribimos su propiedad. Si nos vamos al navegador, aquí podemos ver como el firebug nos lo marca como que no está y cuando ponemos el ratón encima, tenemos nuestro menú.

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

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.