codigo menu drop down
Autor: Rodrigo samurai | Publicado: 2010-11-21T10:43:00-08:00

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º parte: Aplicar estilos ao seu Menu Drop Down:
Vá em design &gt;&gt; Editar HTML &gt;&gt; Expandir modelos de widgets.Copie o código abaixo e coloque-o antes de ]]&gt;&lt;/b:skin&gt;
/* 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;
 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;
 display: block;
 font-size: 16px;
 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;
 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;
 width: 150px;
 color: #FFF;
 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;
 color: #FFF;
 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º parte: Instalar o Menu Drop Down:
Volte em design &gt;&gt; Editar HTML &gt;&gt; não precisa clicar em 'Expandir modelos de widgets', e procure pelo trecho abaixo:
&lt;div id='header-wrapper'&gt;
&lt;b:section class='header' id='header' maxwidgets='1' showaddelement='no'&gt;

&lt;-----restante do código----&gt;

&lt;/b:section&gt;
 &lt;/div&gt;
E cole ABAIXO dele:
&lt;div id='NavbarMenu'&gt;
&lt;div id='NavbarMenuleft'&gt;
&lt;ul id='nav'&gt;
&lt;li&gt;&lt;a expr:href='data:blog.homepageUrl'&gt;Home&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;
 &lt;a href='ENDEREÇO DO SEU LINK AQUI'&gt;Link 1&lt;/a&gt;
&lt;ul&gt;
 &lt;li&gt;&lt;a href='ENDEREÇO DO SEU SUBLINK AQUI'&gt;Sub Link #1.1&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href='ENDEREÇO DO SEU SUBLINK AQUI'&gt;Sub Link #1.2&lt;/a&gt;&lt;/li&gt;
 &lt;li&gt;&lt;a href='ENDEREÇO DO SEU SUBLINK AQUI'&gt;Sub Link #1.3&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href='ENDEREÇO DO SEU SUBLINK AQUI'&gt;Sub Link #1.4&lt;/a&gt;&lt;/li&gt;
 &lt;li&gt;&lt;a href='ENDEREÇO DO SEU SUBLINK AQUI'&gt;Sub Link #1.5&lt;/a&gt;&lt;/li&gt;
 &lt;/ul&gt;
 &lt;/li&gt;
&lt;li&gt;&lt;a href='ENDEREÇO DO SEU LINK AQUI'&gt;Link 2&lt;/a&gt;
&lt;ul&gt;
 &lt;li&gt;&lt;a href='ENDEREÇO DO SEU SUBLINK AQUI'&gt;Sub Link #2.1&lt;/a&gt;&lt;/li&gt;
 &lt;li&gt;&lt;a href='ENDEREÇO DO SEU SUBLINK AQUI'&gt;Sub Link #2.2&lt;/a&gt;&lt;/li&gt;
 &lt;li&gt;&lt;a href='ENDEREÇO DO SEU SUBLINK AQUI'&gt;Sub Link #2.3&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href='ENDEREÇO DO SEU SUBLINK AQUI'&gt;Sub Link #2.4&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href='ENDEREÇO DO SEU SUBLINK AQUI'&gt;Sub Link #2.5&lt;/a&gt;&lt;/li&gt;
 &lt;/ul&gt;
&lt;/li&gt;
 &lt;li&gt;&lt;a href='ENDEREÇO DO SEU LINK AQUI'&gt;Link 3&lt;/a&gt;
&lt;ul&gt;
 &lt;li&gt;&lt;a href='ENDEREÇO DO SEU SUBLINK AQUI'&gt;Sub Link #3.1&lt;/a&gt;&lt;/li&gt;
 &lt;li&gt;&lt;a href='ENDEREÇO DO SEU SUBLINK AQUI'&gt;Sub Link #3.2&lt;/a&gt;&lt;/li&gt;
 &lt;li&gt;&lt;a href='ENDEREÇO DO SEU SUBLINK AQUI'&gt;Sub Link #3.3&lt;/a&gt;&lt;/li&gt;
 &lt;li&gt;&lt;a href='ENDEREÇO DO SEU SUBLINK AQUI'&gt;Sub Link #3.4&lt;/a&gt;&lt;/li&gt;
 &lt;li&gt;&lt;a href='ENDEREÇO DO SEU SUBLINK AQUI'&gt;Sub Link #3.5&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;&lt;a href='ENDEREÇO DO SEU LINK AQUI'&gt;Link 4&lt;/a&gt;
&lt;ul&gt;
&lt;li&gt;&lt;a href='ENDEREÇO DO SEU SUBLINK AQUI'&gt;Sub Link #4.1&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href='ENDEREÇO DO SEU SUBLINK AQUI'&gt;Sub Link #4.2&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href='ENDEREÇO DO SEU SUBLINK AQUI'&gt;Sub Link #4.3&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href='ENDEREÇO DO SEU SUBLINK AQUI'&gt;Sub Link #4.4&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href='ENDEREÇO DO SEU SUBLINK AQUI'&gt;Sub Link #4.5&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
 &lt;/ul&gt;
&lt;/div&gt;
   &lt;/div&gt;
 &lt;div style='clear:both;'/&gt;
O menu ficará abaixo do cabeçalho do seu blog.Salve as modificações.Pronto! Agora é só editar os links e nome dos botões no menu, nos locais indicados.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.)