Em um dos meus blogs de teste eu instalei este menu criado por Soh do site SohTanaka e que tem um efeito bastante interessante. Você pode conferir o demo aqui.
Me pediram para explicar como colocar este menu no Blogger, então lá vai:
Me pediram para explicar como colocar este menu no Blogger, então lá vai:
Primeiro você deve criar uma imagem com 80px de altura onde metade de cima dela (40px) aparecerá quando o menu estiver em estado normal e a metade de baixo no estado hover (quando passa o mouse por cima), como neste exemplo:
Hospede a imagem (pode ser no próprio Blogger) e guarde o link. Agora vá em Editar HTML e cole no código do seu template, abaixo de]]>
<script src=’http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js’ type=’text/javascript’/>
depois, no HTML ( após a tag ) coloque o seguinte trecho, antes ou depois de
….
:No meu exemplo, os códigos foram colocados abaixo de header, assim:
em container, determinamos as dimensões ocupadas pelo menu, bem como sua posição na página:
.container {
width: 520px;
height: 100px;
position: absolute;
top: 10%; left: 60%;
margin: 0px 0 0 -80px;
overflow: hidden;
}
width: 520px;
height: 100px;
position: absolute;
top: 10%; left: 60%;
margin: 0px 0 0 -80px;
overflow: hidden;
}
width: largura total ocupada pela div que contém o menu.
note que em ul#topnav o valor se repete (width: 520px)
top: 10% – distância do menu para o topo da página
left: 60% - distância do menu para o lado esquerdo da página
com margin você também controla a posição do menu. Veja que o menu está a 60% da esquerda da página menos 80px. Vá alterando os valores para que melhor se encaixe no seu layout.
Coloque a url da sua imagem hospedada (no Blogger ou em outro site) onde está indicado no código CSS em negrito. Substitua os # no HTML do menu pelos links que desejar.
note que em ul#topnav o valor se repete (width: 520px)
top: 10% – distância do menu para o topo da página
left: 60% - distância do menu para o lado esquerdo da página
com margin você também controla a posição do menu. Veja que o menu está a 60% da esquerda da página menos 80px. Vá alterando os valores para que melhor se encaixe no seu layout.
Coloque a url da sua imagem hospedada (no Blogger ou em outro site) onde está indicado no código CSS em negrito. Substitua os # no HTML do menu pelos links que desejar.
 |
| resultado |
0 comentários:
Postar um comentário