Crear un menú de botones con una sola imagen

Blogger, Tutoriales Publicado por Claudia en diciembre 18, 2008

Usualmente, los menús son creados con varias imágenes, lo que hace algo más complicada la codificación y la carga de un sitio. Pero Kailoon de Loon Design nos enseña a crear estéticos menús de botones utilizando sólo una imagen, que pueden ser fácilmente añadidos a un blog.

Para un menú de botones, podemos usar una de las siguientes imágenes que creó Kailoon, o crear las propias que puedan ser cortadas en dos partes equivalentes.




La estrategia es la siguiente:

Se trata simplemente de añadir < span/ > en el link. Así, una parte del botón va a estar dada por el span, y otra por el link.

Demo originalDemo en Blogger.

El código

CSS: Pegar antes de ]]>< /b:skin >

ul.menu {
	padding: 5px;
	margin: 10px 0;
	list-style: none;
	float: left;
}
 
ul.menu li {
	float: left;
}
 
ul.menu li a {
	float: left;
	text-decoration: none;
	color: #ccc;
	padding: 4px 15px 0 0;
	margin-right: 8px;
	font: 900 14px 'Arial', Helvetica, sans-serif;
}
 
 
ul.menu li a span {
	float: left;
	padding-right: 15px;
	display: block;
	margin-top: -4px;
	height: 24px;
}
 
 
ul.menu li a:hover, ul.menu li a.current {
 	color: #0d5f83;
	background: url(http://3.bp.blogspot.com/_XxWhaC4o7dE/SUmyHOi3JXI/AAAAAAAAALA/IrZrkoFRbzI/s1600/menu.png) no-repeat top right;
}
 
ul.menu li a:hover span, ul.menu li a.current span {
	background: url(http://3.bp.blogspot.com/_XxWhaC4o7dE/SUmyHOi3JXI/AAAAAAAAALA/IrZrkoFRbzI/s1600/menu.png) no-repeat top left;
}

HTML: Pegar después de header-wrapper.

<ul class='menu'>
<li><a class='current' href='#' title='home'><span></span>home</a></li>
<li><a href='#' title='products'><span/>products</a></li>
<li><a href='#' title='blog'><span/>blog</a></li>
<li><a href='#' title='contact'><span/>contact</a></li>
</ul>

Cambiar los títulos de cada sección, y el nombre que queremos que tenga cada botón, y reemplazar # por el link de la sección correspondiente.

Alternativa

También podemos hacer una leve modificación en el código CSS, para utilizar botones de dos colores (Ver demo):

ul.menu {
	padding: 5px;
	margin: 10px 0;
	list-style: none;
	float: left;
}
 
ul.menu li {
	float: left;
}
 
ul.menu li a {
	float: left;
	text-decoration: none;
	color: #527C27;
	padding: 4px 15px 0 0;
	margin-right: 7px;
        background: url(http://2.bp.blogspot.com/_XxWhaC4o7dE/SUm3XNh6vBI/AAAAAAAAALI/LV9-HrDLEFU/s1600/green.png)no-repeat top right;
	font: 900 14px 'Arial', Helvetica, sans-serif;
}
 
 
ul.menu li a span {
	float: left;
	padding-right: 15px;
	display: block;
        background: url(http://2.bp.blogspot.com/_XxWhaC4o7dE/SUm3XNh6vBI/AAAAAAAAALI/LV9-HrDLEFU/s1600/green.png)no-repeat top left;
	margin-top: -4px;
	height: 24px;
}
 
 
ul.menu li a:hover, ul.menu li a.current {
 	color: #0d5f83;
	background: url(http://3.bp.blogspot.com/_XxWhaC4o7dE/SUmyHOi3JXI/AAAAAAAAALA/IrZrkoFRbzI/s1600/menu.png) no-repeat top right;
}
 
ul.menu li a:hover span, ul.menu li a.current span {
	background: url(http://3.bp.blogspot.com/_XxWhaC4o7dE/SUmyHOi3JXI/AAAAAAAAALA/IrZrkoFRbzI/s1600/menu.png) no-repeat top left;
}

Todas las imágenes están almacenadas en Blogger. Adapté el tutorial a Blogger para probarlo yo misma y darle una mejor utilidad. Sin embargo, el menú puede ser añadido a cualquier plataforma que permita la edición de HTML.
El packete original con imágenes y el archivo *.psd del menú pueden ser descargados desde el blog de Kailoon (ver link arriba).

Tags:
Compártelo!
9 Comentarios en Crear un menú de botones con una sola imagen
  1. Viry dice:

    Excelente herramienta 🙂
    Gracias!

  2. abel dice:

    Hola, tengo una consulta, los titulos o nombres de cada entrada en mi blog solo son hechas con texto, pero como hago para enmarcarlas con una imagen?, no me refiero al titulo del blog, sino al nombre o texto de cada entrada o de cada publicacion, esto quisiera hacerlo para que destaque del resto de texto, saludos.

  3. Mohzgo dice:

    en algunos caso debe ser poner el htlm despues de
    por que mi error era ponerlo despues #header-wrapper y al hacerlo no me aparecian los menus, y si lo pongo exantamente despues del wrapper se me descuadraba el blog.

    Mil gracias Chicablogger 😀

  4. Maro dice:

    No se me centra el texto de cada caja; ¿Tienes idea de que puede ser?

  5. Claudia dice:

    Prueba agregando la propiedad “text-align: center” al selector “ul.menu li” 😉

    ul.menu li {
    text-align-center;
    }

  6. Juan antonio dice:

    No me sale para toda la caja del li, sólo para el a de los artículos relacionados

  7. PABLO dice:

    oye como centro todo el menu de botones ?¿?¿

  8. PABLO dice:

    repuesta porfa……

  9. karla dice:

    Me urge su ayuda necesito un código html. Deseo crear una imagen que contenga el botones que me diriga a Inicio, archivos de blog, u otros botones. Les dejo un ejemplo de este blog:

    http://beatrizpereiraw.blogspot.com/

    muchas gracias espero pronta respuesta.

Deja tu comentario
Tu Comentario