Créditos : mundobloggerEm outro artigo eu publiquei um modelo de Menu Horizontal Dropdown que funciona a base de puro CSS.
Neste tutorial, veremos um outro tipo de menu no estilo dropdown, que tem um efeito bastante interessante, que foi desenvolvido por Soh, do siteSohTanaka.
Neste tutorial, veremos um outro tipo de menu no estilo dropdown, que tem um efeito bastante interessante, que foi desenvolvido por Soh, do siteSohTanaka.
1º Aplicar estilos CSS
Vá na aba "design", entre na edição HTML do seu template, não precisa clicar em "expandir modelos de widgets" e procure pela tag ]]>
e cole o seguinte código logo ACIMA dela:
e cole o seguinte código logo ACIMA dela:
Obs: Todos os trechos editáveis já estão identificados e destacados no código.
Este script funciona em conjunto com a biblioteca do JQuery na versão 1.4.2, caso você já tenha esta biblioteca instalada em seu blog, não será necessário repetir a chamada dela( linha destacada na cor azul no código)
Volte na aba "design >> editar html" e procure pela tag
e cole o seguinte código logo ABAIXO dela:
Volte na aba "design >> editar html" e procure pela tag
e cole o seguinte código logo ABAIXO dela:
3º insirir o codigo HTML
Agora você deve inserir o código html do menu para que ele fique visível no blog.
Agora é só editar os links e nome dos botões no menu, nos locais indicados.
Os trechos destacados na cor verde se referem aos item do submenu.
Caso queira adicionar mais links no submenu, basta repetir o código.
Os trechos destacados na cor azul se referem aos itens do menu principal.
Caso queira adicionar mais links, basta repetir o código.
Lembrando que: você deve tomar cuidado na quantidade de links que irá adicionar no menu, para evitar que ultrapasse a largura total do menu.
Os trechos destacados na cor verde se referem aos item do submenu.
Caso queira adicionar mais links no submenu, basta repetir o código.
Os trechos destacados na cor azul se referem aos itens do menu principal.
Caso queira adicionar mais links, basta repetir o código.
Lembrando que: você deve tomar cuidado na quantidade de links que irá adicionar no menu, para evitar que ultrapasse a largura total do menu.
4º Escolha o local do menu
Escolha o local mais adequado para instalar o seu menu no template.
Se quiser colocar abaixo do cabeçalho, procure o trecho referente ao código do cabeçalho e cole o código html do menu logo após o final do código referente ao cabeçalho.
Se quiser que o menu fique acima da barra de cabeçalho, cole o código do menu acima do código referente ao cabeçalho.
Se quiser colocar abaixo do cabeçalho, procure o trecho referente ao código do cabeçalho e cole o código html do menu logo após o final do código referente ao cabeçalho.
Se quiser que o menu fique acima da barra de cabeçalho, cole o código do menu acima do código referente ao cabeçalho.
Obrigad COMENTEM !
0 comentários:
Postar um comentário