Menu Vertical Deslizante (Dropdown) Apenas com CSS/HTML

Vamos aprender a criar um belo menu deslizante, também chamado  de “Acordeom” ou “Drop-down menu”. Publicado por SOHtanaka e por JMiur (Vagabundia). Muito simples de montar, sem usar nenhum script, apenas  “truques” de CSS. Ideal para economizar espaço na sidebar.
Modelo criado por JMiur





Faça login ► Clique em  “Design” e depois ► “Editar HTML”
O código CSS deve ser colado acima da tag </head>:

<style type="text/css">
ul.sidenav {
  /* el rectángulo contenedor */
  list-style: none;
  margin: 0 auto;
  padding: 0;
  width: 250px;
  /* propiedades optativas */
  background-color: #CD853F;
  border: 1px solid #300;
  outline: 1px solid #FFF;
}
ul.sidenav li a {
  /* el enlace de cada item */
  display: block;
  text-decoration: none;
  /* propiedades optativas */
  background: transparent url(URL_imagen_icono) no-repeat 5px 7px;
  border-bottom: 1px solid #AD651F;
  border-top: 1px solid #300;
  color: #FFF;
  font-size: 18px;
  padding: 15px 10px 10px 45px;
  width: 195px;
}
ul.sidenav li a:hover {
  /* propiedades optativas */
  background: #CD853F url(URL_imagen_icono) no-repeat 5px 7px;
  border-top:1px solid #300;
}
ul.sidenav li span {
  /* el contenido permanece oculto por defecto */
  display:  none;
}
ul.sidenav li a:hover span {
  /* el contenido se muestra al pasar el cursor encima */
  display: block;
  /* propiedades optativas */
  font-size: 12px;
  padding: 10px 0;
  margin: 0 0 0 -30px;
}
</style>

Você poderá alterar o tamanho e cor do box, cor das letras e os ícones.

Agora vamos ao HTML que pode ser colocado em um elemento de página (dentro da página Design)

<ul class.="sidenav">
<li>
<a ref.="URL_DO_O_LINK">Home <spam> 
Blandit turpis patria euismod at iaceo appellatio, </spam> </a>
</li>
<li>
<a ref.="URL_DO_O_LINK">Blog <spam> 
Blandit turpis patria euismod at iaceo appellatio, 
</spam> </a>
</li>
<li>
<a ref.="URL_DO_O_LINK">Tutorial <spam>
Blandit turpis patria euismod at iaceo appellatio,.</spam> </a>
</li>
<li>
<a ref.="URL_DO_O_LINK">Arquivo<spam> 
Blandit turpis patria euismod at iaceo appellatio, </spam> </a>
</li>
</ul>

1. Em azul o endereço para direcionamento
2. Em negrito o nome do link
3. Em vermelho, o texto que se desprende ao passar o mouse

Se quiser acrescentar mais abas, repita o trecho abaixo colando sempre ANTES de </ul>

<li> <a ref.="URL_DO_O_LINK">TÍTULO <span>Blandit turpis patria euismod at iaceo appellatio, demoveo esse. Cátion utrum utrum abigo demoveo immitto aliquam sino aliquip. </spam> </a> </li>

Veja o modelo publicado por SOHTanaka







É isso ai! Beijo da Mama ♥