Menu Dropdown

Me pediram no chat esse menu por isso agora estou postando, vamos la:

#É recomendado salvar o modelo que vai ser editado!

Clique em DESIGN > EDITAR HTML e procure pela linha:

]]>

E acima dela, cole o código css:

#jsddm {
margin: 0;
padding: 15px;
z-index:1000000000;
position:relative;
}

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

#jsddm li a {
display: block;
white-space: nowrap;
margin:1px 3px;
border: 1px solid #AAAAAA;
background: #cccccc;
background: -webkit-gradient(linear, left top, left bottom, from(#ebebeb), to(#cccccc));
background: -moz-linear-gradient(top, #ebebeb, #cccccc);
padding: 5px 10px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
text-shadow: #ffffff 0 1px 0;
color: #363636;
font-size: 15px;
font-family: Helvetica, Arial, Sans-Serif;
text-decoration: none;
vertical-align: middle;
}

#jsddm li a:hover { background: #C8C8C8; }

#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: #CAE8FA; }

#jsddm li ul li a:hover {
background: #A3CEE5;
}


Para adicionar o Javascript procure pela linha:


</head>
Acima dela, cole o codigo Javascript


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

Agora clique em Salvar "Template"

Clique em Elementos da Página e adicione um Gadget onde você quer que apareça o menu escolha "HTML / JavaScript", Deixe o título em branco e cole o seguinte código:


<ul id="jsddm"> <li><a href="#">Home</a> <li><a href="#">Menu 1</a> <ul> <li><a href="#">Drop 1-1</a></li> <li><a href="#">Drop 1-2</a></li> <li><a href="#">Drop 1-3</a></li> </ul> </li> <li><a href="#">Menu 2</a> <ul> <li><a href="#">Drop 2-1</a></li> <li><a href="#">Drop 2-2</a></li> </ul> </li> <li><a href="#">Menu 3</a> <ul> <li><a href="#">Drop 3-1</a></li> <li><a href="#">Drop 3-2</a></li> <li><a href="#">Drop 3-3</a></li> <li><a href="#">Drop 3-4</a></li> </ul> </li> <li><a href="#">Menu 4</a></li> <li><a href="#">Menu 5</a></li> <li><a href="#">Test</a></li> </li></ul>
Clique em Salvar e está pronto o seu menu.