Crear un menú de botones con una sola imagen
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).
