Menu horizontal De Botones
Este es un menu de botones hecho con html y css con imagen como base.
El menu tiene varias opciones de configuracion y dependiendo de tu gusto o necesidad lo podras utilizar.
En las imagenes a continuacion veran las como queda de una forma o de otra, mas adelante les mostrare las opciones de configuracion.
Estas son las imagenes de como queda el menu dependiendo de la opcion:
1.Menu con fondo negro
Haz clic en la imagen para vizualizarla en tamaño real
2.Menu con fondo blanco
Como puedes ver el de fondo negro se extiende al ancho de la pagina y el de fondo blanco solo se muestran los botones, solo es cambiarle el color al codigo.
Estas son las imagenes que utilizaremos para el menu, tendras que subirla a tu servidor o a picasa y obtener la url de la imagen.
Empecemos por el codigo css, solo copia y pegalo en la pantilla de tu blog antes de ]]></b:skin>.
Codigo CSS
#MainMenu {
height:37px;
background:#111;
border:0;
margin:0;
width:800px;
}
#tab {
top:0;
height:0;
background:repeat-x top;
margin:0;
}
#tab ul {
list-style:none;
float:left;
margin:0;
padding:0;
}
#tab li {
display:inline;
float:left;
margin:0;
padding:0;
}
#tab a {
background:url(images/right.gif) no-repeat right top;
text-decoration:none;
border:0;
display:block;
float:left;
margin:0;
padding:0;
}
#tab a span {
display:block;
background:url(images/left.gif) no-repeat left top;
font-family:Arial, Helvetica, sans-serif;
font-size:11px;
color:#FFF;
font-weight:700;
line-height:37px;
padding:0 25px;
}
#tab a:hover,#tab li.item_active a {
background-position:right bottom;
}
#tab a:hover span,#tab li.item_active a span {
background-position:left bottom;
color:#000;
font-weight:700;
font-style:normal;
text-decoration:none;
}
Para insertar el código siguiente tendras que ubicar el div donde esta la palabra inicio o home y sustituir la lista que haiga por la siguiente.
Esta suele encontrarse debajo del body en el div del header que es la parte de la cabeza de la plantilla.
Codigo HTML
<div id="MainMenu">
<div id="tab">
<ul>
<li class="item_active"><a href="##"><span>Inicio</span></a></li>
<li><a href="##"><span>Link</span></a></li>
<li><a href="##"><span>Link</span></a></li>
<li><a href="##"><span>Link</span></a></li>
<li><a href="##"><span>RSS</span></a></li>
<li><a href="contact.html"><span>Contacto</span></a></li>
</ul>
</div>
</div>
En esta parte del css podras quitar o poner fondo al menu, cambia el valor de background por #fff y tendras el fondo blanco como en la imagen 2 de arriba.
#MainMenu {
height:37px;
background:#111;
border:0;
margin:0;
width:800px;
}
En estas otras partes de codigo son donde van las url de las imagenes. solo tendra que remplazar el texto que hay dentro de las ( ) por las url, pon atencion al poner la url que estan marcadas cada una con su imagen correspondiente left y right.
#tab a {
background:url(images/right.gif) no-repeat right top;
text-decoration:none;
border:0;
display:block;
float:left;
margin:0;
padding:0;
}
#tab a span {
display:block;
background:url(images/left.gif) no-repeat left top;
font-family:Arial, Helvetica, sans-serif;
font-size:11px;
color:#FFF;
font-weight:700;
line-height:37px;
padding:0 25px;
}
Subir
Entradas
