este blog ofrece mayor información recopilada con derechos de autor encontrarás tutoriales programas trucos juegos ocio internet noticias redes sociales artículos entretenimiento videos los mejores post de todas las redes información como ganar dinero
Si ya eres usuario veterano del sitio o del canal de FalconMasters en Youtube seguramente ya sabrás como hacer menús de navegación, pero hoy vamos a aprender a hacer otro tipo de menú de navegación, un menú de navegación diferente, ya que vamos a utilizar animaciones CSS 3 que nos permitirán darle increíbles efectos a nuestro menú.
Para hacer este menú de navegación vamos a utilizar tanto iconos, como colores flat, dándole una apariencia muy sencilla pero bonita, elegante y amigable al usuario.
Como hacer un menú de navegación desplegable con Animaciones CSS3
Solución al problema de visualización en Google Chrome:
En el video puedes ver como queda completo el menú de navegación, pero hay un problema, y es queno se visualiza correctamente el sub menu en Google Chrome, asi que aquí pongo la solución y la explicación de cada propiedad.
El problema de nuestro menu se encuentra en el selector de header, nav y en nav > ul, comencemos corrigiendo desde nav > ul y el error radica en que pusimos un overflow:hidden; para que lo que sobrara del sub menu no se mostrara, pero esto nos hace que al querer mostrar el sub menu no lo tenemos visible gracias a esa propiedad, asi que la vamos a quitar, quedándonos el código asi.
1
2
3
4
5
6
7
nav>ul{
display:table;
/*Quitamos el overflow:hidden; que teníamos aquí*/
width:100%;
background:#000;
position:relative;
}
Este cambio anterior en el código nos permite mostrar el submenu cuando pasamos el mouse por encima, pero aun tenemos un error y es que nuestro menu se ve asi:
Para resolver ahora este problema vamos a agregar algunas propiedades en el selector header y en nav.En el header tenemos solamente un width de un 100%, lo que haremos sera agregarle un alto fijo y ocultar todo lo que salga de este contenedor, también vamos a agregar unas propiedades extras, aquí te dejo el código y una explicación en cada una de ellas.
1
2
3
4
5
6
7
header{
margin-top:10px;/*Simplemente agregamos un margen*/
width:100%;
height:150px;/*Le damos un alto fijo al menu*/
overflow:hidden;/*Agregamos un overflow hidden para que no se muestren elementos que sobrepasen los 150px de alto*/
position:relative;/*Convertimos el menu en posición relativa porque mas adelante en el header > nav pondremos una posición absoluta*/
}
Después modificamos la regla css en donde trabajamos con el nav, en esta parte lo que hacemos es convertir nuestro menú en posición absoluta, el problema es como nuestro header abarca el 100% tendremos que centrarlo con un pequeño truco.
CSS
1
2
3
4
5
6
7
8
9
10
nav {
top:-20px;/*Le damos una separación superior*/
position:absolute;/*Convertimos el contenedor en posición absoluta*/
left:0;/*Con left:0; y right:0; centramos el contenedor*/
right:0;
margin:20pxauto;
max-width:1000px;
width:90%;
}
El código a continuación ya esta corregido, asi que puedes copiarlo de mi anterior explicación o directamente desde el código CSS completo.
Para resolver ahora este problema vamos a agregar algunas propiedades en el selector header y en nav.En el header tenemos solamente un width de un 100%, lo que haremos sera agregarle un alto fijo y ocultar todo lo que salga de este contenedor, también vamos a agregar unas propiedades extras, aquí te dejo el código y una explicación en cada una de ellas.
No hay comentarios :
Publicar un comentario