Menu drop down com efeito jquery em seu blog.
Autor: Lucas Lima | Publicado: 2012-01-24T05:16:00-08:00

&nbsp;&nbsp;Olá pessoal estarei mostrando a vocês como colocar um menu drop down com jquery em seu blog.É sempre bom ter um menu com varias opções em blogs de muito conteúdo ai já deixa seu blog com uma boa navegação para seus leitores, Vamos lá.1º &nbsp;Entre em seu blog vá em design depois em editar Html procure por:&lt;/head&gt;2º quando encontrar cole o seguinte código logo acima dessa tag&amp;lt;script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js' type='text/javascript'/&amp;gt;&lt;script src='http://spiceupyourblogextras.googlecode.com/files/cloud-zoom.1.0.2.js' type='text/javascript'/&gt;&lt;!--start drop menu--&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: #0033CC; /*MENU MAIN BACKGROUND COLOR*/-moz-border-radius: 6px;-webkit-border-radius: 6px;padding: 5px 12px;text-decoration: none;border-right: 1px solid white;width: 70px;color: #EAFFED; /*MENU LINK COLOR*/white-space: nowrap}#jsddm li a:hover{ background: #24313C /*MENU HOVER BACKGROUND COLOR*/;&nbsp;-moz-border-radius: 6px;-webkit-border-radius: 6px;}#jsddm li ul{ margin: 0;padding: 0;position: absolute;z-index:100;visibility: hidden;border-top: 1px solid white}#jsddm li ul li{ float: none;display: inline}#jsddm li ul li a{ width: auto;background: #BFCFFE; /*MENU DROP DOWN BACKGROUND COLOR*/color: #24313C /*MENU DROP DOWN LINK COLOR*/}#jsddm li ul li a:hover{ background: #809FFE /*MENU DROP DOWN HOVER BACKGROUND COLOR*/}&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 type='text/javascript'&gt;var timeout = 500;var closetimer = 0;var ddmenuitem = 0;function jsddm_open(){ jsddm_canceltimer();jsddm_close();ddmenuitem = $(this).find(&amp;#39;ul&amp;#39;).eq(0).css(&amp;#39;visibility&amp;#39;, &amp;#39;visible&amp;#39;);}function jsddm_close(){ if(ddmenuitem) ddmenuitem.css(&amp;#39;visibility&amp;#39;, &amp;#39;hidden&amp;#39;);}function jsddm_timer(){ closetimer = window.setTimeout(jsddm_close, timeout);}function jsddm_canceltimer(){ if(closetimer){ window.clearTimeout(closetimer);closetimer = null;}}$(document).ready(function(){ $(&amp;#39;#jsddm &amp;gt; li&amp;#39;).bind(&amp;#39;mouseover&amp;#39;, jsddm_open);$(&amp;#39;#jsddm &amp;gt; li&amp;#39;).bind(&amp;#39;mouseout&amp;#39;, jsddm_timer);});document.onclick = jsddm_close;&lt;/script&gt;&lt;!--end menu code--&gt;&nbsp;3° Salve o modelo, Vá em design Adicionar um Gadget Html/javascript e cole o seguinte código lá&lt;ul id="jsddm"&gt;&lt;li&gt;&lt;a href="/"&gt;Home&lt;/a&gt;&lt;li&gt;&lt;a href="#"&gt;Link 1&lt;/a&gt;&lt;ul&gt;&lt;li&gt;&lt;a href="#"&gt;Link Submenu 1.1&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href="#"&gt;Link Submenu 1.2&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href="#"&gt;Link Submenu 1.3&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;&lt;/li&gt;&lt;li&gt;&lt;a href="#"&gt;Link 2&lt;/a&gt;&lt;ul&gt;&lt;li&gt;&lt;a href="#"&gt;Link Submenu 2.1 &lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href="#"&gt;Link Submenu 2.2&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href="#"&gt;Link Submenu 2.3&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href="#"&gt;Link Submenu 2.4&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href="#"&gt;Link Submenu 2.5&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;&lt;/li&gt;&lt;li&gt;&lt;a href="#"&gt;Link 3&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href="#"&gt;Link 4&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href="#"&gt;Link 5&lt;/a&gt;&lt;/li&gt;&lt;/li&gt;&lt;/ul&gt;Alterações&nbsp;é importante saber que nesse ultimo código as alterações a serem feitas são faceis de serem feitas só é preciso alterar as seguintes linhas:&nbsp;&lt;li&gt;&lt;a href="#"&gt;Link 5&lt;/a&gt;&lt;/li&gt;onde está escrito&nbsp;&lt;li&gt;&lt;a href="#"&gt;altere a &nbsp;#&nbsp;pelo link de onde você quiser e onde está escrito&nbsp;&gt;Link 1&lt; &nbsp;altere a parte onde está escrito Link por o nome do link exemplo:&nbsp;Download&nbsp;Já onde está escrito&nbsp;Link Submenu 2.1&nbsp;esse já é o sub menu altere as opções de acordo com sua vontade.