viernes, 13 de junio de 2014

Ejemplo de un menú de navegación interactivo



1. Objetivo

Vamos a crear un menú muy sencillo, con dos transiciones que van a intervenir cuando se pase el ratón sobre los vínculos: 
  • el color del fondo va a cambiar progresivamente de amarillo a azul. 
  • el color del texto va a cambiar progresivamente de negro a blanco.


2. El diseño del formulario

Cree un menú de navegación con una lista <ul>.

<ul id="menu">
<li><a href="#">Inicio</a></li>
<li><a href="#">Referencias</a></li>
<li><a href="#">Contacto</a></li>
</ul>

Cree los estilos CSS para aplicarle un diseño a su menú:

#menu li {
list-style: none;
}
#menu a {
display: block;
float: left;
width: 100px;
padding: 3px;
margin-right: 20px;
border: 1px solid #333;
background-color: lightyellow;
text-align: center;
color: black;
text-decoration: none;
}

El fondo de los vínculos a es de color amarillo claro: background-color: lightyellow.

El texto de los vínculos a es de color negro: color: black.

Este será el resultado visual:


3. Las transiciones

En el estilo de los vínculos #menu a, especifique las dos transiciones que queremos aplicar, separándolas con una coma.

#menu a {
display: block;
float: left;
width: 100px;
padding: 3px;
margin-right: 20px;
border: 1px solid #333;
background-color: lightyellow;
text-align: center;
color: black;
text-decoration: none;
/* Las transiciones */
-moz-transition: background-color 1s linear,
color 1s linear;
-webkit-transition: background-color 1s linear,
color 1s linear;
-o-transition: background-color 1s linear,
color 1s linear;
transition: background-color 1s linear,
color 1s linear;
}

A continuación, especifique el evento de pasar el cursor (:hover) sobre los vínculos a:

#menu a:hover {
background-color: darkblue;
color: white;
}

El color de fondo de los vínculos a pasará a azul oscuro: background-color: darkblue.

El color del texto de los vínculos a pasará a blanco: color: white.


4. La visualización

Cuando el cursor del ratón no se encuentre sobre ningún vínculo, el evento:hover no habrá sido detectado, así que no pasará nada.


Cuando pase el cursor sobre un vínculo, el fondo de su caja cambiará a azul oscuro y el texto del vínculo cambiará a blanco.



Espero haber ayudado en algo. Hasta la próxima oportunidad!







No hay comentarios:

Publicar un comentario en la entrada