Bueno, vamos a crear un exelente menú con HTML y CSS, empecemos!
Comenzamos con el HTML:
Comenzamos con el HTML:
<div id="navlist">
<ul>
<li><a href="#" class="active">Ejemplo 1</a></li>
<li><a href="#">Ejemplo 2</a></li>
<li><a href="#">Ejemplo 3</a></li>
<li><a href="#">Ejemplo 4</a></li>
</ul>
</div>
Nos quedaría algo 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:
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í:
DEMO | DESCARGA
Y nos quedaría algo así:
DEMO | DESCARGA