Ejemplo de un menú de navegación interactivo

Regresar al índice

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!

Regresar al índice

Twittear