Crear un menú de botones con una sola imagen
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 original – Demo 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).
Posts relacionados
Compártelo!
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 original – Demo 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).
5 Comentarios
Excelente herramienta
Gracias!
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.
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
No se me centra el texto de cada caja; ¿Tienes idea de que puede ser?
Prueba agregando la propiedad “text-align: center” al selector “ul.menu li”
ul.menu li {
text-align-center;
}