Daisy Lea na propaganda
da 138 Water (+18) - FireLink
Um jantar sensual e outros quadrinhos
sem vergonha de GreenTeaNeko (+18)
5 Danadinhas
do Instagram #4
Sites que vocês adultos
Vão Gostar - Link Fixo

Incrível Menu Vertical Deslizante (Dropdown) Apenas Com CSS/HTML

Neste tutorial irei mostrar como adicionar o menu no seu blog. Esse menu é bem interessante, pois, chama atenção com seus diferentes efeitos.

                  

Faça login ► Clique em “Layout” e depois ► “Editar HTML”.




Procure pela tag
</head>

Cole o código ACIMA da tag
<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_da_imagem_icone) 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_da_imagem_icone) 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>

As partes destacadas em AZUL no código é a cor de fundo do menu.

Pode Salvar.


Agora vamos ao HTML:

Vá em Layout e clique em Adicionar um Gadget do tipo HTML/JavaScript e cole o seguinte código:

<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>

Em azul o endereço para direcionamento;
Em negrito o nome do link;
Em vermelho, o texto que se aparecerá ao passar o mouse.


Faça as alterações, salve e pronto!!!

Cursos 24 Horas

Cursos Online
Incrível Menu Vertical Deslizante (Dropdown) Apenas Com CSS/HTML Incrível Menu Vertical Deslizante (Dropdown) Apenas Com CSS/HTML Reviewed by Muca on 9/07/2013 11:23:00 AM Rating: 5