Como eu guardo todos os códigos que eu uso o já usei, estava passando pelo meu computador e vi esse menu bastante interessante e resolvi colocar aqui para você também poder usar.
O código é bastante simples:)
<style>
#filmes {
width: 200px;
margin: 1px;
}
#filmes li a {
voice-family: "\"}\"";
voice-family: inherit;
height: 20px;
text-decoration: none;
}
#filmes li a:link, #filmes li a:visited {
color: #ffffff;
display: block;
background: url(http://img512.imageshack.us/img512/6848/menujf.png);
padding: 3px 0 0 10px;
}
#filmes li a:hover {
color: #cccccc;
background: url(http://i35.tinypic.com/30ii461.gif); 0 -32px;
padding: 3px 0 0 10px;
}</style>
<div id="filmes">
<ul>
<li><a href="Seu link aqui" target="_self">Editar1</a> </li>
<li><a href="Seu link aqui" target="_self">Editar2</a> </li>
<li><a href="Seu link aqui" target="_self">Editar3</a> </li>
</ul>
</div>
Agora é só explicar o código!
- Onde está em cinza é a cor da fonte o do menu.
- Onde está em vermelho é a imagem do menu
- E onde está em verde é o “conteúdo do menu” onde colocar editar1 você coloca oque você quiser, e onde está seu link você coloca o link da pagina.
Veja como vai ficar o menu.
Espero que tenham gostado!
0 comentários:
Postar um comentário