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:
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.
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
Comentarios