Cómo rollOver la barra de navegación horizontal

Al pasar el cursor del ratón sobre la barra de navegación de un sitio web puede hacer que los botones de menú o enlaces que cambian de color o se despliegan para mostrar los submenús. Codificación del efecto de rollover es bastante sencillo. Crear un menú que se extiende una línea de botones en la parte superior de su sitio web y, cuando un visitante pasa su cursor sobre un botón en el menú, el color del botón cambiará tonalidades debido a la función de vuelco aplicado.

Instrucciones

1 Abra el archivo HTML en el Bloc de notas o su editor de texto sin formato preferido. Añadir este código en su hoja de estilo en cascada que pasa los controles a su menú:

navcontainer ul

{

padding-left: 0;

margin-left: 0;

background-color: # 036333;

color blanco;

flotador izquierdo;

width: 100%;

font-family: Arial, Helvetica, sans-serif;

}

navcontainer ul li {display: inline; Navcontainer} ul li a

{

padding: 0.2em 1 em;

background-color: # 036333;

color blanco;

text-decoration: none;

flotador izquierdo;

border-right: #fff sólido 1px;

}

navcontainer ul li a: hover

{

background-color: # 369888;

Color: #fff;

}

2 Cambie las dos instancias de "036333" con el código de color que desee para la barra de menús y botones cuando nadie está pasando el ratón sobre ellos. Reemplazar "369888" con el código de color deseado para los botones para cambiar a cuando un mouses visitantes más de ellos (ver Recursos para la carta de color hexadecimal). Reemplazar el color "blanco" con el color que desee el texto del botón que sea. Reemplazar "Arial, Helvetica, sans-serif" con el nombre de la fuente deseada.

3 Añadir este código entre las etiquetas del cuerpo de su documento HTML:

<Div id = "navcontainer">

<Ul id = "navlist">

<Li id = "activa"> <a href="http://www.itemonelink.com" id="current"> Punto Primero </a> </ li>

<Li> <a href="Item"> http://www.itemtwolink.com "> Artículo Dos </a> </ li>

<Li> <a href="Item"> http://www.itemthreelink.com "> Artículo Tres </a> </ li>

<Li> <a href="Item"> http://www.itemfourlink.com "> Punto Cuarto </a> </ li>

<Li> <a href="Item"> http://www.itemfivelink.com "> Punto Quinto </a> </ li>

</ Ul>

</ Div>

4 Reemplazar el "Punto Uno", "Punto Segundo", etc., con los nombres de cada botón. Vuelva a colocar cada una de las direcciones URL en la misma línea que los nombres de los elementos con el enlace específico en el que desea que los visitantes dirigidos al hacer clic en ese botón.

5 Guardar y cargar el archivo HTML.