Con el uso de los selectores hover y active de CSS3 podemos construir menús muy atractivos sin necesidad de usar JavaScript.
Con a:hover definimos el estilo cuando el puntero del ratón pasa por encima de un hipervínculo.
Con a:active definimos el estilo cuando el vínculo está seleccionado. Botón izquierdo del ratón pulsado.
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Ejemplo de menú</title>
<style>
a {
width: 150px;
height: 25px;
background-color:#0CF;
border-bottom: 1px solid #666;
display:inline-block;
padding: 5px 5px 5px 5px;
text-decoration:none;
text-align:center;
font-family:Verdana, Geneva, sans-serif;
font-size:24px;
}
a:hover {
background:#F00;
}
a:active {
background: #9F0;
}
</style>
</head>
<body>
<nav>
<a href="#">Lunes</a>
<a href="#">Martes</a>
<a href="#">Miércoles</a>
<a href="#">Jueves</a>
<a href="#">Viernes</a>
</nav>
</body>
</HTML>
No hay comentarios:
Publicar un comentario