Bueno, vamos a crear un excelente menú con HTML y CSS, empecemos!
Comenzamos con el HTML:
Nos quedaría así
Básicamente lo que hicimos acá fue crear un div, darle un id llamado navlist. Dentro de este div le agregamos una lista con el texto que queremos darle a este menú.
Seguimos con el CSS:
body{
background-color:#222;
margin:0px;
padding:0px;
font-family: Verdana, Arial, sans-serif;
font-size: 12px;
}
a{
text-decoration:none;
}
#navlist {
float: left;
width: 170px;
margin-top: 30px;
margin-left: 5px;
}
#navlist ul {
list-style: none;
}
#navlist li a{
display: block;
height: 25px;
width: 100px;
padding: 9px;
margin: 5px;
background: inherit;
border-right: 4px solid #444;
color: #999;
text-transform: lowercase;
font-size: 0.9em;
}
#navlist li a:hover {
color: #f4f4f4;
background: #333;
border-right: 4px solid #98cb00;
}
#navlist li .active {
color: #999;
background: #333;
border-right: 4px solid #444;
}
Bueno, acá le dimos estilos al body, un fondo y el tipo de fuente. Al navlist le dimos forma, un ancho, un alto, hover, active y varias cosas más.
Y nos quedaría algo así:
No hay comentarios:
Publicar un comentario