Menu dropdown
Autor: LokeCross | Publicado: 2012-07-05T11:09:00-07:00

Boa-tarde galera! Venho com um tutorial muito útil e simples, trata-se do menu dropdown. Este menu, para quem não conhece é o mesmo que uso no topo do site. Sem bla bla bla, vamos lá.

Procure por
&lt;/head&gt;Copie e cole este código acima da tag encotrada
&lt;script src='http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.js' type='text/javascript'/&gt;
&nbsp; &lt;script type='text/javascript'&gt;
&nbsp; //&lt;![CDATA[

var timeout &nbsp; &nbsp;= 500;
&nbsp; var closetimer = 0;
&nbsp; var ddmenuitem = 0;

function jsddm_open()
&nbsp; { &nbsp;jsddm_canceltimer();
&nbsp; jsddm_close();
&nbsp; ddmenuitem = $(this).find('ul').css('visibility', 'visible');}

function jsddm_close()
&nbsp; { &nbsp;if(ddmenuitem) ddmenuitem.css('visibility', 'hidden');}

function jsddm_timer()
&nbsp; { &nbsp;closetimer = window.setTimeout(jsddm_close, timeout);}

function jsddm_canceltimer()
&nbsp; { &nbsp;if(closetimer)
&nbsp; { &nbsp;window.clearTimeout(closetimer);
&nbsp; closetimer = null;}}

$(document).ready(function()
&nbsp; { &nbsp;$('#jsddm &gt; li').bind('mouseover', jsddm_open)
&nbsp; $('#jsddm &gt; li').bind('mouseout', &nbsp;jsddm_timer)});

document.onclick = jsddm_close;
&nbsp; //]]&gt;
&nbsp; &lt;/script&gt;
Agora procure por
]]&gt;&lt;/b:skin&gt;depois de encontrado, este código acima à tag encontrada
#jsddm {
margin: 0;
padding: 15px;
z-index:1000000000;
position:relative;
}

#jsddm li {
float: left;
list-style: none;
font: 12px Tahoma, Arial;
}

#jsddm li a {
white-space: nowrap;
margin:1px 3px;
color:#002a37;
text-shadow:#7eb8ca 1px 1px 0px;
background: -webkit-gradient(linear, left top, left bottom, from(#1a7796), to(#40a0bb));
background: -moz-linear-gradient(top, #1a7796, #40a0bb);
border-left: 1px solid #18596f;
border-right: 1px solid #18596f;
border-bottom: 1px solid #18596f;
border-top: 1px solid #68b4c9;
padding: 1px 6px;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
font-size: 11px;
font-family: Helvetica, Arial, Sans-Serif;
vertical-align: middle;
}

#jsddm li a:hover {
background: -webkit-gradient(linear, left top, left bottom, from(#161616), to(#202020));
background: -moz-linear-gradient(top, #161616, #202020);
border-left: 1px solid #161616;
border-right: 1px solid #161616;
border-bottom: 1px solid #161616;
border-top: 1px solid #343434;
box-shadow: #000 0px 0px 1px solid;
color:#fff;
text-shadow:#000 1px 1px 2px;
text-decoration:underline;
}

#jsddm li ul {
margin-top:5px;
padding: 2px 0px 2px 0px;
position: absolute;
visibility: hidden;
float:left;
background: #fff;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
border: 1px solid #f1f1f1;
}

#jsddm li ul li {
float: none;
display: inline;
}

#jsddm li ul li a {
width: auto;
background: -webkit-gradient(linear, left top, left bottom, from(#40a0bb), to(#1a7796));
background: -moz-linear-gradient(top, #40a0bb, #1a7796);
border-left: 1px solid #18596f;
border-right: 1px solid #18596f;
border-bottom: 1px solid #18596f;
border-top: 1px solid #68b4c9;
transition:none;
-webkit-transition:none;
-moz-transition:none;
-o-transition:none;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
color:#002a37;
text-shadow:#7eb8ca 1px 1px 0px;
float:left;
}

#jsddm li ul li a:hover {
background: -webkit-gradient(linear, left top, left bottom, from(#fdebae), to(#fdebae));
background: -moz-linear-gradient(top, #fdebae, #fdebae);
border:1px solid #585245;
text-shadow: #fff8e0 1px 1px 0px;
color: #9e660d;
transition:none;
-webkit-transition:none;
-moz-transition:none;
-o-transition:none;
}Salve o modelo. Após terminar, use o código abaixo para adicionar o menu onde deseje
&lt;ul id='jsddm'&gt;
&lt;li&gt;&lt;a href='/#home'&gt;Home&lt;/a&gt;
&lt;li&gt;&lt;a href=''&gt;Menu Principal&lt;/a&gt;
&lt;ul&gt;
&lt;li&gt;&lt;a href='/#'&gt;Teste 1&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href='/#'&gt;Teste 2&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href='/#'&gt;Teste 3&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href='/#'&gt;Teste 4&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;&lt;li&gt;&lt;a href=''&gt;Teste 3&lt;/a&gt;
&lt;ul&gt;
&lt;li&gt;&lt;a href='/#'&gt;Teste 1&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href='/#'&gt;Teste 2&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href='/#'&gt;Teste 3&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href='/#'&gt;Teste 4&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;/ul&gt;