Usualment, els menús són creats amb diverses imatges, la qual cosa fa una mica més complicada la codificació i la càrrega d'un lloc. Però Kailoon de Loon Design ens ensenya a crear estètics menús de botons utilitzant només una imatge, que poden ser fàcilment afegits a un blog.
Per a un menú de botons, podem usar una de les següents imatges que va crear Kailoon, o crear les pròpies que puguin ser tallades en dues parts equivalents.
L’estratègia es la següent:
Es tracta simplement d'afegir < span/ > en el link. Així, una part del botó estarà donada pel span, i una altra pel link.
Demo original Demo en blogger
El codi
CSS: Pegar abans 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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsOZQGoc9V-pf3_Xrcbf0obYjekHV3-lzWKG6C1Kdr3PRITRXJEpl6Hc5ta8Nn6xPoU0lWdXVO0BX9CSrp90UzDTMIT6_jgcO3gFbDtAhvbf4qdT1IdaXTD3cDNw2Dl2MaaqIFzTyxhKnn/s1600/menu.png) no-repeat top right;
}
ul.menu li a:hover span, ul.menu li a.current span {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsOZQGoc9V-pf3_Xrcbf0obYjekHV3-lzWKG6C1Kdr3PRITRXJEpl6Hc5ta8Nn6xPoU0lWdXVO0BX9CSrp90UzDTMIT6_jgcO3gFbDtAhvbf4qdT1IdaXTD3cDNw2Dl2MaaqIFzTyxhKnn/s1600/menu.png) no-repeat top left;
}
HTML: Pegar després d’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>
Canviar els títols de cada secció, i el nom que volem que tingui cada botó, i reemplaçar # pel link de la secció corresponent.
A la feina!
