Estructura básica del menú en HTML
<nav>
<ul>
<li><a title="Opcion 1" href="#">Opción 1</a></li>
<li><a title="Opcion 2" href="#">Opción 2</a></li>
<li><a title="Opcion 3" href="#">Opción 3</a></li>
<li><a title="Opcion 4" href="#">Opción 4</a></li>
<li><a title="Opcion 5" href="#">Opción 5</a></li>
</ul>
</nav>
Cada elemento de la lista será un enlace de navegación hacia otras páginas del mismo sitio.
Aplicando estilos con CSS3 al menú de navegación
Cuerpo:
body{
background: #3CF;
}
Etiqueta NAV : borde redondeado,radio de 10px , degradado de blanco a gris, padding de 10px y un ancho de 950px.
nav{
/*Bordes redondeados*/
border-radius:10px;/*El estandar por defecto*/
background-image: linear-gradient(top, #FFF, #CCC);/*El estandar por defecto*/
overflow:hidden;
padding:10px;
width:950px;
}
NAV es el contenedor para la lista.
Etiqueta UL:
Etiqueta UL:
nav ul{
list-style:none;
margin:0 10px 0 10px;
padding:0;
}
Elementos de la lista LI: flotar a la izquierda, margen derecho de 10px , bordes redondeados de 5px de radio, tipo de fuente, tamaño de 16px, centrado y sombras para el texto.
nav ul li{
border-radius:5px;/*Estandar por defecto*/
float:left;
font-family:Arial, Helvetica, sans-serif;
font-size:16px;
font-weight:bold;
margin-right:10px;
text-align:center;
/*Sombras para texto, los mismos parametros que box-shadow*/
text-shadow: 0px 1px 0px #FFF;
}
Pseudoclase Hover:
Al pasar el puntero sobre el elemento LI se activará el evento HOVER cambiando el fondo de este.
nav ul li:hover{
/*Degradado de fondo*/
background-image: linear-gradient(top, #FFF, #E3E3E3);/*Estandar por defecto*/
/*Sombras*/
box-shadow: 1px -1px 0px #999;/*Estandar por defecto*/
border:1px solid #E3E3E3;
}
nav ul li a{
color:#999;
display:block;
padding:10px;
text-decoration:none;
/*Transiciones*/
transition: 0.4s linear all;
}
La transición se activará al pasar el puntero, el evento HOVER de CSS que cambiara de color gris el texto a negro, esto es sobre la etiqueta A de enlace.
nav ul li a:hover {
color:#000;
}
0 comentarios:
Publicar un comentario
Ingresa tu consulta