Menu Vertical Simples


Esse é um menu bem simples, que não usa script, é todo em CSS. Veja abaixo:




Vá em Layout => Adicionar um Gadget => HTML/JavaScript








<center>
<style>
#button {
width: 12em;
border-right: 1px solid #f39999 ; /* cor da borda esquerda*/
padding: 0 0 1em 0;
margin-bottom: 1em;
font-family: 'Trebuchet MS', 'Lucida Grande', Verdana, Arial, sans-serif; /* tipo da fonte */
background-color: #f39999; /* cor de fundo externo*/
}
#button ul {
list-style: none;
margin: 0;
padding: 0;
border: none;
}
#button li {
border-bottom: 1px solid #f39999; /* cor da borda inferior */
margin: 0;
list-style: none;
list-style-image: none;
}
#button li a {
display: block;
padding: 5px 5px 5px 0.5em;
border-left: 10px solid #f8c7c7; /* cor da borda direita */
border-right: 10px solid #f8c7c7; /* cor da borda esquerda */
background-color: #f5adad; /* cor de fundo interno */
color: #000; /*cor da fonte */
text-decoration: none;
width: 100%;
}
html>body #button li a {
width: auto;
}
#button li a:hover {
border-left: 10px solid #f8c7c7; /* cor da borda direita com efeito hover */
border-right: 10px solid #f8c7c7; /* cor da borda esquerda com efeito hover */
background-color: #da8989; /* cor de fundo em estado hover */
color: #000; /* cor da fonte em estado hover */
}
</style>
<div id="button">
  <ul>
    <li><a href="Endereço do Link">Título</a></li>
    <li><a href="Endereço do Link">Título</a></li>
    <li><a href="Endereço do Link">Título</a></li>
    <li><a href="Endereço do Link">Título</a></li>
    <li><a href="Endereço do Link">Título</a></li>
    <li><a href="Endereço do Link">Título</a></li>
    <li><a href="Endereço do Link">Título</a></li>
    <li><a href="Endereço do Link">Título</a></li>
  </ul>
</div></center>

Tudo que estiver em negrito pode ser substituído. 

Coloque a cor que adequar-se melhor ao seu blog. 

Tabela de cores AQUI

Onde estiver: "Endereço do Link" , colocar endereço para onde o link deve ser direcionado

Onde estiver: "Título" colocar nome dos Marcadores

***Créditos: Elaine Gaspareto

Nenhum comentário:

Postar um comentário