Como Fazer um Menu Drop Down (JQuery)
Autor: Conrado 8 | Publicado: 2012-07-08T11:30:00-07:00

Olá, pessoal!

Irei ensinar como fazer um Menu Drop Down, assim como o do blog. O Lanx iria postar isso, mas como sumiu, eu mesmo vou mostrar.
Bom, ele fez dois vídeos para ensinar isso, porém irei ensinar por escrito também, para que não haja dúvidas. Primeiro, os vídeos:

Primeira Parte


Segunda Parte



Os Links mencionados no vídeo estão na descrição do 1º vídeo!


Agora vou fazer um tutorial escrito, para quem não entendeu (recomendo que todos leiam o tutorial escrito, pois está mais explicado):


Para começar, copie tudo deste link e cole em um gadget de HTML/JavaScript no lugar em que o menu ficará. Acompanhe:
Link:&nbsp;http://pastebin.com/5Xb7Y26A




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 &gt; Você Aprendeu - Fonte Mania). Para adicionar outra página com guias internas copia isso e ponha no fim a tag: &lt;/li&gt;


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'.
Segundamente, aperte 'ctrl+f' e procure por : "]]&gt;&lt;/b:skin&gt;" (sem aspas) e logo abaixo coloque o seguinte código :
&lt;!--jquery-DD-Menu-Starts--&gt;&lt;style type="text/css"&gt;/* 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; &nbsp;/* Cor Fonte 2*/}#jsddm li ul li a:hover{ background: #FFFFFF /* Cor numero 4 */;}&lt;/style&gt;
&lt;!-- script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js" type="text/javascript"&gt;&lt;/script --&gt;&lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js" type="text/javascript"&gt;&lt;/script&gt;&lt;script type="text/javascript"&gt;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 &gt; li').bind('mouseover', jsddm_open);$('#jsddm &gt; li').bind('mouseout', jsddm_timer);});document.onclick = jsddm_close;&lt;/script&gt;&lt;!--jquery-DD-Menu-Stops-http://bloggerstop.net--&gt;
ATENÇÃO: USE ESTE CÓDIGO, NÃO O CÓDIGO PRESENTE NA DESCRIÇÃO DO VÍDEO !&nbsp;

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 :
&lt;b:widget id='HTML8' locked='false' title='TodoDiaMenu' type='HTML'/&gt;Copie o que se localiza entre id='' (no meu caso, HTML8).

Agora, aperte 'ctrl+f ' e procure por "]]&gt;&lt;/b:skin&gt;" (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.
E então, o que achou ?
Conseguiu fazer o menu? Comente !
Qualquer duvida, contato pelo Chat com "Lanx" ou "Conrado".
~Lanx
(Não sei se vocês perceberam, mas o conrado começou a postagem e eu terminei a mesma)