JMiur [E]

Usando CSS es muy sencillo crear botones de cualquier tipo, en este caso, las explicaciones son de vanseodesign y se aplican a un menú pero, podría hacerse con cualquier otra parte.


El HTML básico de un menú es algo así:
<div id="miMenu">
<ul id="listaMenu">
<li><a href="URL_enlace1">Enlace 1</a></li>
<li><a href="URL_enlace2">Enlace 2</a></li>
<li><a href="URL_enlace3">Enlace 3</a></li>
<li><a href="URL_enlace4">Enlace 4</a></li>
</ul>
</div>
¿Cuales son las propiedades a tener en cuenta?
/* primero que nada, el contenedor, el rectángulo donde se mostrará el menú
#miMenu {
/* si es necesario, aquí podemos definir anchos, márgenes o fondos /*
}

/* luego, las definiciones de la lista */
ul#listaMenu1 {
/* reseteamos las propiedades por defecto /*
list-style: none;
margin: 0;
padding: 0;
/* y podemos agregar propiedades para las fuentes de los textos */
}

/* cada item de la lista */
ul#listaMenu1 li {
/* las mostraremos una al lado de la otra */
display: inline;
}

/* y la clave es definir los enlaces como bloques que floten; de ese modo, podemos agregarles porpiedades gráficas con facilidad */
ul#listaMenu1 li a {
display: block; /* esto, transforma el enlace en un rectángulo al que podemos dimensionar */
float: left; /* son bloques pero flotan, los veremos uno al lado del otro */
text-align: center; /* centramos el texto */
text-decoration: none; /* para que no se subrayen los enlaces */
margin-right: 2px; /* en este ejemplo, cada botón se separa un poco del adyacente */
/*
el tamaño podemos definirlo de varias formas, por ejemplo
height: 20px;
line-height: 20px;
width: 100px;
otra forma es usar padding y de ese modo, su tamaño es dinámico, varia según el texto */
padding: 5px 20px;
*/
padding: 5px 20px;
/* por último, los colores y los bordes */
background: #5F3222;
border-top: 2px solid #815444;
border-right: 2px solid #3D1000;
border-bottom: 2px solid #3D1000;
border-left: 2px solid #815444;
color: #EEE;
}
/* y el efecto hover donde simplemente, cambiamos esos colores */
ul#listaMenu1 li a:hover {
background: #A37666;
color: #000;
border-top: 2px solid #815444;
border-right: 2px solid #C59888;
border-bottom: 2px solid #C59888;
border-left: 2px solid #815444;
}

12 comentarios:

Manfenix  

Gracias por compartir.
Guardando en la caja de herramientas. :)

Responder
Graciela  

Muy lindo Sr. Jmiur, me he quedado pensando 'podrían hacerse con cualquier parte'
Buen lunes :)

Responder
Gem@  

Buenísimo y perfecto con Explorer :D

Responder
Amador López Criado  

Gracias por tus explicaciones maestro. Supone una gran lección con total claridad para la gente que, como yo, estamos intentando aprender un poco de CSS.

Responder
Music  

Hola, me parece muy interesante, pero quisiera saber cómo ponerlo vertical y no horizontal. se puede? Gracias

Responder
JMiur  

Para eso debes quitar el float:left de ul#listaMenu2 li a {} y allí ponerle un anchocon width.

Responder
Rocio Mella  

Y para ponerle la info? C:

JMiur  

¿Qué info?

Responder
Vlady ochoa  

Hola, que tal? un pregunta, por q al minimizar mi pagina web el botón del menú se baja? Gracias. Excelente pagina!!

JMiur  

No sé cuál es el sitio al que haces referencia.

Vlady ochoa  

Perdón no me explique bien, es que estoy creando un sitio web y cuando aplico el zoom a mi pagina web, al momento que llega al 65% uno de los botones de mi menú se baja, utilice 4 botones que tienen 10px de alto y 90 px de ancho.

JMiur  

Sin verlo en el contexto donde están, es imposible responder.

Responder

¿Quiere dejar un comentario?

recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...

Todos los archivos y demos alojados en Fileden han sido redireccionados y deberían estar funcionando correctamente.
De todos modos, también puede accederse a ellos a través de SkyDrive

Nota: sólo los miembros de este blog pueden publicar comentarios.

Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.

Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...

 
CERRAR