Como Fazer Menu Drop Down

Hoje, mostrarei como fazer um menu que possui guias, isto é, sub-abas em seus links. Para começar, copie tudo do link abaixo e cole em um gadget de HTML/JavaScript no lugar em que o menu ficará. Acompanhe:






Agora nessas onde estão escritas: Home - Sem sub-menu 01 - Sem sub-menu 02 você irá colocar as páginas que não terão guias embaixo (Parceria - Equipe etc.). Para adicionar mais páginas que não têm guias internas, copie a tag destacada abaixo e cole-as na linha de baixo.


E em Menu dropdown 01, substiuta pelo nome da página que terá guias embaixo. E em: Sub-menu 01 - Sub-menu 02 - Sub-menu 03 ponha o nome das guias internas. Ex.: (Quadros > Você Aprendeu - Fonte Mania). Para adicionar outra página com guias internas copia isso e ponha no fim a tag: </li>



Tente compreender mais ou menos como funciona esse código e vá modificando do seu jeito. Agora vamos para o HTML do blog (css).

Primeiramente, vá para a aba 'Design' e depois 'Editar HTML'.
Então, aperte 'ctrl+f' e procure por : "]]></b:skin>" (sem aspas) e logo abaixo coloque o seguinte código:

<!--jquery-DD-Menu-Starts-->

<style type="text/css">

/* menu styles */
#jsddm
{ margin: 0;
padding: 0;}
#jsddm li
{ float: left;
list-style: none;
font: 12px Tahoma, Arial;}
#jsddm li a
{ display: block;
background: #FFFFFF /* Cor numero 1 */;
padding: 5px 12px;
text-decoration: none;
border-right: 1px solid white;
width: auto;
color: #FFFFFF; /* Cor Fonte */
white-space: nowrap;}
#jsddm li a:hover
{ background: #FFFFFF /* Cor numero 2 */;}
#jsddm li ul
{ margin: 0;
padding: 0;
position: absolute;
visibility: hidden;
border-top: 1px solid white;}
#jsddm li ul li
{ float: none;
display: inline;}
#jsddm li ul li a
{ width: auto;
background: #FFFFFF /* Cor numero 3 */;
color: #FFFFFF;  /* Cor Fonte 2*/
}
#jsddm li ul li a:hover
{ background: #FFFFFF /* Cor numero 4 */;}
</style>

<!-- script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js" type="text/javascript"></script -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
var timeout = 500;
var closetimer = 0;
var ddmenuitem = 0;
function jsddm_open()
{ jsddm_canceltimer();
jsddm_close();
ddmenuitem = $(this).find('ul').eq(0).css('visibility', 'visible');}
function jsddm_close()
{ if(ddmenuitem) ddmenuitem.css('visibility', 'hidden');}
function jsddm_timer()
{ closetimer = window.setTimeout(jsddm_close, timeout);}
function jsddm_canceltimer()
{ if(closetimer)
{ window.clearTimeout(closetimer);
closetimer = null;}}
$(document).ready(function()
{ $('#jsddm > li').bind('mouseover', jsddm_open);
$('#jsddm > li').bind('mouseout', jsddm_timer);});
document.onclick = jsddm_close;
</script>
<!--jquery-DD-Menu-Stops-http://bloggerstop.net-->

Vamos às edições!
Primeiro, aperte 'ctrl+f ' e procure por "Cor numero 1" (sem aspas). Lá, você colocará, no lugar de #FFFFFF, o código da cor que você deseja para o menu .
Depois, aperte 'ctrl+f ' novamente, e procure por "Cor numero 2" (sem aspas). Lá, você colocará no lugar de #FFFFFF, o código da cor que você deseja para o menu em estado hover (quando alguem passar o mouse).
Aperte 'ctr+f ' novamente, e procure por "Cor numero 3" (sem aspas). No lugar de #FFFFFF, coloque o mesmo código da Cor numero 1.
Aperte 'ctrl+f ' outra vez (eu sei que é cansativo) e procure por "Cor numero 4" (sem aspas). No lugar de #FFFFFF, coloque o mesmo código da Cor numero 2.

Certo, seu menu já está com a cor desejada. Porém, pode ocorrer uma "incompatibilidade" entre a cor da letra e a cor do menu. Como resolver isso? É Muito fácil!
Aperte 'ctrl+f ' novamente, e procure por "Cor Fonte" (sem aspas). No lugar de #FFFFFF, coloque o código da cor desejada.
Aperte 'ctrl+f ' mais uma vez, e procure por "Cor Fonte 2" (sem aspas). No lugar de #FFFFFF, coloque o código da "Cor Fonte".

Pode ser que seu menu não esteja com a largura desejada. Como arrumar isso?
Primeiramente, você deve tentar descobrir qual a ID do gadget do menu. Para isso, vá até a aba 'Design' e dê um nome ao gadget do menu como por exemplo "TodoDiaMenu". Em seguida, vá até a aba "Editar HTML" (dentro da aba Design) e procure por "Todo dia Menu". Haverá um código, semelhante a este:
<b:widget id='HTML8' locked='false' title='TodoDiaMenu' type='HTML'/>
Copie o que se localiza entre id='' (no meu caso, HTML8).

Agora, aperte 'ctrl+f ' e procure por "]]></b:skin>" (sem aspas). Logo acima deste código, coloque este outro código:

#IDdoMenu {
width: larguradesejada (em pixels);
background-color:cordesejada;
margin-left:0px;
}
Salve e visualize.

Obs.: Para botar link você deve ir ao gadget do menu e onde está < a href="#" > substituir o # pelo Link.

~Lanx

Nenhum comentário:

Postar um comentário