Menu Horizontal DropDown

Atendendo ao pedido do Wallac, que enviou uma sugestão de artigo, neste tutorial você vai aprender a instalar um Menu Drop Down no seu blog. Este menu é bem fácil de instalar.

Para quem não sabe, Menu Drop Down, é aquele que quando passamos o mouse em cima de um determinado botão do menu, logo abaixo dele, se abrem varios sub-menus.

DEMO
Lembre-se: Salve o seu template antes de começar.
Nunca deixe de fazer um backup do seu Template para evitar transtornos.

1º passo: Aplicar estilos ao seu Menu Drop Down:

Vá em Editar HTML >> Expandir modelos de widgets.
Copie o código abaixo e coloque-o antes de ]]></b:skin>

/* NavbarMenu
--------------------------- */
#NavbarMenu {
background: #555 url(http://2.bp.blogspot.com/_kMUpUqMmduA/SVU82PLeYMI/AAAAAAAAA6c/R8Ip5ZMFIh8/s1600/navbar.png);
width: 100%;height: 35px;
font-size: 12px;
font-family: Arial, Tahoma, Verdana;
color: #FFF;/*--cor do link--*/
font-weight: bold;margin: 0;padding: 0;text-transform: capitalize;
}
#NavbarMenuleft {
width: 100%;float: left;margin: 0;padding: 0;
}
#nav {
margin: 0;
padding: 0;
}
#nav ul {
float: left;list-style: none;margin: 0;padding: 0;
}
#nav li {
list-style: none;margin: 0;padding: 0;
}
#nav li a, #nav li a:link, #nav li a:visited {
color: #FFF; /*--edite cor do link--*/
display: block;
font-size: 16px;/*--tamanho da fonte do link--*/
font-family: Georgia, Times New Roman;font-weight: normal;text-transform: capitalize;
margin: 0;padding: 9px 15px 8px;border-right: 1px solid #fff;
}
#nav li a:hover, #nav li a:active {
background: #555 url(http://1.bp.blogspot.com/_kMUpUqMmduA/SVU-vl5H-bI/AAAAAAAAA68/U4rkLsg0HqE/s1600/navhov.png);
color: #FFF;  /*--edite cor do link hover--*/
margin: 0;padding: 9px 15px 8px;text-decoration: none;
}
#nav li li a, #nav li li a:link, #nav li li a:visited {
background: #555;/*--cor de fundo--*/
width: 150px;
color: #FFF; /*--cor do link--*/
font-size: 14px;font-family: Georgia, Times New Roman;font-weight: normal;text-transform: capitalize;
float: none;margin: 0;padding: 7px 10px;border-bottom: 1px solid #FFF;border-left: 1px solid #FFF;border-right: 1px solid #FFF;
}
#nav li li a:hover, #nav li li a:active {
background: #777;/*--cor de fundo hover--*/
color: #FFF; /*--cor do link--*/
padding: 7px 10px;
}
#nav li {float: left;padding: 0;
}
#nav li ul {z-index: 9999;position: absolute;left: -999em;height: auto;width: 170px;margin: 0;padding: 0;
}
#nav li ul a {width: 140px;
}
#nav li ul ul {margin: -32px 0 0 171px;}
#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {
left: -999em;}
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul {left: auto;}
#nav li:hover, #nav li.sfhover {position: static;}

Salve e sigamos para a 2ª parte da instalação.

2º passo: Instalar o Menu Drop Down:

Antes de prosseguir é importante que você saiba que:

  1. Você que deverá escolher o local mais adequado para instalar o seu menu no template.
  2. Não há como eu informar precisamente onde instalar o menu, a escolha do local deverá ficar por sua conta, até porque cada template é diferente um do outro.

Acesse o painel do Blogger, e vá até o menu “Modelo“, clique no botão “Editar HTML” , não precisa clicar em ‘Expandir modelos de widgets’, e procure pelo trecho referente ao código do cabeçalho.

Localizado o trecho referente a tag do cabeçalho no seu template, cole ABAIXO dela o código html do menu:

<div id='NavbarMenu'>
<div id='NavbarMenuleft'>
<ul id='nav'>
<li><a expr:href='data:blog.homepageUrl'>Home</a></li>
<li>
<a href='SEU LINK AQUI'>Nome do Link 1</a>
<ul>
<li><a href='SEU LINK AQUI'>Nome do Link </a></li>
<li><a href='SEU LINK AQUI'>Nome do Link</a></li>
<li><a href='SEU LINK AQUI'>Nome do Link</a></li>
<li><a href='SEU LINK AQUI'>Nome do Link</a></li>
<li><a href='SEU LINK AQUI'>Nome do Link</a></li>
</ul>
</li>
<li><a href='SEU LINK AQUI'>Link 2</a>
<ul>
<li><a href='SEU LINK AQUI'>Nome do Link </a></li>
<li><a href='SEU LINK AQUI'>Nome do Link</a></li>
<li><a href='SEU LINK AQUI'>Nome do Link</a></li>
<li><a href='SEU LINK AQUI'>Nome do Link</a></li>
<li><a href='SEU LINK AQUI'>Nome do Link</a></li>
</ul>
</li>
<li><a href='SEU LINK AQUI'>Link 3</a>
<ul>
<li><a href='SEU LINK AQUI'>Nome do Link </a></li>
<li><a href='SEU LINK AQUI'>Nome do Link</a></li>
<li><a href='SEU LINK AQUI'>Nome do Link</a></li>
<li><a href='SEU LINK AQUI'>Nome do Link</a></li>
<li><a href='SEU LINK AQUI'>Nome do Link</a></li>
</ul>
</li>
<li><a href='SEU LINK AQUI'>Link 4</a>
<ul>
<li><a href='SEU LINK AQUI'>Nome do Link </a></li>
<li><a href='SEU LINK AQUI'>Nome do Link</a></li>
<li><a href='SEU LINK AQUI'>Nome do Link</a></li>
<li><a href='SEU LINK AQUI'>Nome do Link</a></li>
<li><a href='SEU LINK AQUI'>Nome do Link</a></li>
</ul>
</li>
</ul>
</div>
</div>
<div style='clear:both;'/>

Salve as modificações.
Pronto! Agora é só editar os links e nome dos botões no menu, nos locais indicados.
O trecho destacado na cor azul correspondem aos sublinks.
O trecho em vermelho corresponde ao link principal.

Abaixo seguem algumas dicas para localizar o trecho referente ao código do cabeçalho.

Designer de Modelo:
Se você quiser colocar o menu 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 visível acima da barra de cabeçalho, cole o código do menu acima do código referente ao cabeçalho.
Se estiver usando algum modelo de template do “designer de modelo do blogger”,a tag referente ao cabeçalho é: <header>
Caso queira que o menu fique acima do cabeçalho, basta instalar o código acima da tag: <header>
Se quiser que o menu fique abaixo do cabeçalho, instale o código do 2º passo abaixo da tag: </header>

Templates mínima:
Se estiver usando algum modelo do template minima, a tag referente ao cabeçalho é: <div id=’header-wrapper’>
Caso queira que o menu fique acima do cabeçalho, basta instalar o código acima da tag <div id=’header-wrapper’>

Você pode editar as cores do seu menu, se quiser, para isto basta alterar os códigos referentes as cores no código da 1º parte deste tutorial.
Se quiser, verifique os códigos das cores nesta Tabela de Cores HTML.
(Dica: só edite cores se você for um usuário no nível intermediário ou avançado, pois requer conhecimento maior em css.)

Artigo atualizado em 26/05/2012.

Fundadora do Mundo Blogger. Autodidata que adora internet, que se encantou com blogs, seus códigos e templates, desde 2009, e por conta disso começou a "brincar" com web design nas horas vagas, até que resolveu criar o Mundo Blogger para compartilhar o que aprendeu com você através dos tutoriais publicados aqui.

Tags:
Comentários
  1. Mari Souza
    • Vanessa
  2. 7
    • Filipa
      • 7
  3. Filipa
  4. Batista
  5. Carlos
    • Carlos
      • Filipa
  6. Dies Irae
  7. Batista
  8. Isaias
  9. Priscilla
    • Vanessa
      • Priscilla
  10. flavio
  11. walison
  12. nielson
  13. Davi Farias
    • Marília
  14. pop
  15. ProcureAqui
  16. REgina
  17. Joao
  18. Gessica
    • Vanessa
  19. Pop
    • Vanessa
  20. samuel
    • Vanessa
  21. gustavo
    • Vanessa
  22. Angelo
  23. ~riineko~
  24. M@noP3
  25. Angelo
  26. .:: Nessa ::.
  27. Angelo
  28. Marcos
  29. .:: Nessa ::.
  30. Juliane
  31. .:: Nessa ::.
  32. Mayara Sousa
  33. GermanoCWB
  34. Marcos Vinicius Mello
  35. Verdedesing
  36. Waldemar Luz
  37. One For All English School
  38. Júnnyor Grigolo
  39. Rogério Almeida Pereira
  40. Ferreira_F10
  41. Profº Roberto Sabino
  42. .:: Nessa ::.
  43. Englas Viperino
  44. Raphaela
  45. .:: Clau ::.
  46. René Gustavo
  47. Priscilla
  48. .:: Clau ::.
  49. Priscilla
  50. o Clérigo
  51. Gabi Gomes
  52. Natália
  53. Jeizon Eustáquio de Paula
  54. Fabio
  55. .:: Clau ::.
  56. Daniele
  57. Ney
  58. Olívia Vargas
  59. Xande
  60. Carol D.
  61. ? yaa
  62. JeyDrummer
  63. ? yaa
  64. Eli'sVanity
  65. Raphael B. de Sousa
  66. Andson
  67. Mariana Borges
  68. .:: Clau ::.
  69. Carla Blackhawk
  70. .:: Clau ::.
  71. Karine Ribeiro
  72. .:: Clau ::.
  73. Bogos
  74. .:: Clau ::.
  75. Bogos
  76. .:: Clau ::.
  77. Maah
  78. .:: Clau ::.
  79. fabio melo
  80. Robson
  81. home
  82. .:: Clau ::.
  83. Zaraki
  84. .:: Clau ::.
  85. Bauru
  86. .:: Clau ::.
  87. Frederico
  88. Avelino
  89. Sacerdote I.R.Cí
  90. Leonardo
  91. abner
  92. .:: Clau ::.
  93. Bruno Arita
  94. .:: Clau ::.
  95. fabio vilson couto
  96. M!riam
  97. .:: Clau ::.
  98. M!riam
  99. andraD
  100. M!riam
  101. .:: Clau ::.
  102. Lia
  103. .:: Clau ::.
  104. ?lëx S.M.
  105. Schalke 04
  106. Marcos Danilo
  107. ? Lucy Sem Fronteiras ?
  108. WolfMoon
  109. ::Clau::
  110. WolfMoon
  111. WolfMoon
  112. DiogoDantas
  113. C45510
  114. Marcos Danilo
  115. ::Clau::
  116. admin
  117. ::Clau::
  118. Néka
  119. Arthur
  120. ::Clau::
  121. Dudu.win7
  122. Dudu.win7
  123. fabio melo
  124. ::Clau::
  125. Bruno
  126. ::Clau::
  127. allex
  128. ::Clau::
  129. Marcos Danilo
  130. ? PSYCHO CRAZY ?
  131. Rafael
  132. Kakashi
  133. ::Clau::
  134. dj allex mix da t.f