Como Añadir CSS3 efecto de transición a un menú desplegable


Como Añadir CSS3 efecto de transición a un menú desplegable
Desde que el World Wide Web Consortium (W3C) presentó CSS3 y HTML5, sitios web, sistemas de gestión de contenidos y herramientas en línea web tomaron una forma totalmente nueva, y hoy en día jugamos con las propiedades de estilo bien desarrollados para controlar mejor la posición de los objetos. En nuestro post anterior nos enteramos de cómo agregar una lista desplegable de menú a un menú horizontal, y en otro post también publicamos cómo crear menús y usted ya aprendió hacer todos estos temas, pero hoy vamos a jugar con la estructura que hemos creado y añadiremos algo interesante como Ease- in-out efectos.  

Ease- in-out efecto, es una propiedad interesante que le permite controlar la pantalla mediante un temporizador. Esto, junto con algunos otros atributos hizo posible la animación en CSS3. Con Ease- in-out podemos añadir un suave efecto llamado "hover" a los menús de navegación. Ya sea que usted sea un usuario de Blogger o Wordpress, toda esta información le dará un nuevo aspecto a su menú.

Usted podrá observar con solo pasar su mouse sobre el menú y podrá ver que su efecto es en cámara lenta. Normalmente, los menús sólo cambian el color de fondo cuando pasan el ratón  o mouse por encima, pero el tutorial de hoy, y los mensajes que vienen le ayudará a crear efectos que se moverán de un tirón por así decirlo, también se mostrara como opaco y oscilante.

CSS3 usando transiciones con Ease- in-out

Por favor, lea las primeras dos partes, especialmente la parte # 2 si usted todavía no ha podido comprender este tipo de efectos al utilizar Ease- in-out.

La transición CSS3 tiene la siguiente sintaxis: 


-webkit-transition: all .2s ease-in-out;
-moz-transition: all .2s ease-in-out;
-ms-transition: all .2s ease-in-out;
-o-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;

Para garantizar que funciona la transición por igual, en todos los principales navegadores como Chrome, Mozilla, Microsoft Internet Explorer y Opera, se ha incluido la sintaxis para que sea visible para todos los navegadores antes mencionado. Ease- in-out  ha sido programada para 0,2 segundos, y si usted quiere que tenga más tiempo se puede aumentar o disminuir, ya todo depende al gusto de usted.

Si quieren añadir a la parte del menú que controla el estilo del menú cuando un usuario visita su página y pone su cursor sobre las pestañas de enlace y le da un toque único a su página lo podrá realizar con la siguiente sintaxis similar a la de la clase: 

#navigation li a:hover {
.........
.........
}

#navigation li li a{
.............
............
............

}

La primera clase con el nombre de navigation li : hover, controla el roll over sobre el estilo de las pestañas del menú principal y el segundo son de la lista desplegable.

Tenga en cuenta que el nombre de la clase,
Navigation, será diferente en su caso. Hemos hablado de esto en la parte N º 2. Las líneas punteadas indican estilos aleatorios que usted puede encontrar en el menú, como simiplicity, les recuerdo que todos ellos son puntos para centrarse en la parte principal. Ahora debe identificar las anteriores dos clases dentro del código para el menú y luego añadir los siguientes estilos de la siguiente manera:

#navigation li a:hover {
.........
.........

-webkit-transition: all .2s ease-in-out;
-moz-transition: all .2s ease-in-out;
-ms-transition: all .2s ease-in-out;
-o-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
}
#navigation li li a{
.............
............
............
-webkit-transition: all .2s ease-in-out;
-moz-transition: all .2s ease-in-out;
-ms-transition: all .2s ease-in-out;
-o-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
box-shadow: #333 0px 1px 3px;
}

Ahora guarde su menú y visite su sitio web para que pueda ver sus nuevos cambios y pase su mouse o ratón sobre el menú y podrá ver los efectos suaves en su menú, ya que todo esto le da un toque fascinante a la navegación.

Usted puede controlar el tiempo durante el cual el fondo del menú pueda desvanecerse y desaparecer.

Un menú de navegación le dará un gran dominio sobre la creación de excelentes páginas diseñadas como, alinear objetos, comprender las propiedades como relleno, márgenes, el estilo de posicionamiento de enlaces, estilo de lista y las operaciones de cursor del mouse.

No se olvide de realizar la práctica y aplicar este código en sus menús. 

Por favor, no dude en hacer preguntas, ya que nos encantaría responder sus inquietudes!



Recuerda suscribirte:

Obtenga nuestro boletín de noticias diario | Suscríbete gratuitamente SUSCRIBIRSE
¿Te ha resultado útil este artículo, recomiendanos?
Si



Share:

Luis Chávez

Soy el fundador del sitio web Ayudadeblogger.com - Considerado un Pro Blogger profesional, Consultor SEO y desarrollador Web adicto, ejecuto una serie de sitios web desde mi Oficina Quito-Ecuador.

Related post

Comentarios