Sobre o Blog

MamanunesO Dicas e Templates Mamanunes nasceu da minha necessidade de registrar as descobertas que faço enquanto aprendo a desenhar templates para a plataforma Blogger. Compartilho aqui alguns truques, templates e informações que considero úteis para blogueiros e curiosos. Entre e fique a vontade.

Info

22.9.10

imageVamos 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


image




É isso ai! Beijo da Mama ♥

12 comentários

Mastermix

Muito bom.
valeu!

Unknown

10000

Anônimo

cade o download mano?? q adianta postar se o download dele pronto para os novato como eu fazer o download e testar, q adianta, mano????... pooo =(

Feeh

/\ Meu deus --'

que download cara ? aff

Aleksander.L

Oi mama, pereciso da tua ajuda, quero deixar os comentarios igual o teu com essa sombra de efeito e o balazinho, e fazer um menu abra as aba, pode , tipo quando clicar num item aparece outros dentro do mesmo.

Se puder agradeço abraços

Roger

muito boa suas explicações mama, valeu...

Anônimo

Olá, Gostaria de saber se eu teria a possibilidade de adicionar um menu drop down em um menu já pronto? Pois tentei adaptar suas informações ao meu menu mais não obtive sucesso.

Anônimo

@Anônimo

Recebe a parada de graça e ainda chora otario!

Anônimo

tenho um site em caminhamento IDEIAVIVA.ONMBL.COM mais preciso de codigos legais.....

Anônimo

?

Matheus

Não consegui fazer funcionar.. Coloquei os códigos nas tags corretas mas não apareceu o menu..

Anônimo

DA HORA ESSE CODIGO... BAIXE JOGOS IRADOS NO SITE: WWW.MARKET.OOLS.MOBI .. DISPONIVEL NA VERSÃO WAP... PARA ANDROIDS.

Postar um comentário

Caso queira informações mais detalhadas, ou encomendar um template personalizado, use o Formulário de Contato ou meu Email. Responderei o mais breve possível.
Obrigada.