menu css vertical domingo, 1 de abril de 2012

Neste tutorial vou mostrar as técnicas CSS para construção de menus de navegação verticais com efeitos rollover de cor.
Vá em EDITAR HTML e procure pela linha:

]]></b:skin>

Acima dela cole o codigo abaixo:

#button {
 width: 12em;
 border-right: 1px solid #000;
 padding: 0 0 1em 0;
 margin-bottom: 1em;
 font-family: 'Trebuchet MS', 'Lucida Grande', Verdana, Arial, sans-serif;
 background-color: #90bade;
 color: #333;
}

#button ul {
 list-style: none;
 margin: 0;
 padding: 0;
 border: none;
}
 
#button li {
 border-bottom: 1px solid #90bade;
 margin: 0;
 list-style: none;
 list-style-image: none;
}
 
#button li a {
 display: block;
 padding: 5px 5px 5px 0.5em;
 border-left: 10px solid #1958b7;
 border-right: 10px solid #508fc4;
 background-color: #2175bc;
 color: #fff;
 text-decoration: none;
 width: 100%;
}

html>body #button li a {
 width: auto;
}

#button li a:hover {
 border-left: 10px solid #1c64d1;
 border-right: 10px solid #5ba3e0;
 background-color: #2586d7;
 color: #fff;
}

salve e crie um widget HTML/JAVASCRIPT e cole o código abaixo:

<div id="button">
  <ul>
    <li><a href="#">Inicio</a></li>
    <li><a href="#">Publicidade</a></li>
    <li><a href="#">Equipe</a></li>
    <li><a href="#">Contato</a></li>
    <li><a href="#">Twitter</a></li>
    <li><a href="#">Orkut</a></li>
  </ul>
</div>

Ao final seu menu estará parecido com o da imagem: