[Resolvido] Menu dropdown com mouseover e mouseout

[marcelo2605 10]

Preciso de um menu vertical com dois níveis que se expanda com mouseover e se contraia com mouseout. Todos que eu encontrei não aceitam o mouseout.

 

Alguém conhece algum?

[William Bruno 1501]

todos os menus dropdown funcionam assim.

 

tente fazer um, apartir do html. O aprendizado é muito valioso.

te ajudaremos no processo.

[marcelo2605 10]

William, comecei a trabalhar com esse

 

Alterei o revealtype para mouseover, mas não encontro como colocar um mouseout para fechar. Tentei collapse: "mouseleave", mas não adiantou.

 

ddaccordion.init({
headerclass: "submenuheader", //Shared CSS class name of headers group
contentclass: "submenu", //Shared CSS class name of contents group
revealtype: "mouseover", //Reveal content when user clicks or onmouseover the header? Valid value: "click", "clickgo", or "mouseover"
colapsetype: "mouseleave",
mouseoverdelay: 200, //if revealtype="mouseover", set delay in milliseconds before header expands onMouseover
collapseprev: false, //Collapse previous content (so only one open at any time)? true/false 
defaultexpanded: [], //index of content(s) open by default [index1, index2, etc] [] denotes no content
onemustopen: false, //Specify whether at least one header should be open always (so never all headers closed)
animatedefault: false, //Should contents open by default be animated into view?
persiststate: false, //persist state of opened contents within browser session?
toggleclass: ["", ""], //Two CSS classes to be applied to the header when it's collapsed and expanded, respectively ["class1", "class2"]
togglehtml: ["suffix", "", ""], //Additional HTML added to the header when it's collapsed and expanded, respectively  ["position", "html1", "html2"] (see docs)
animatespeed: "slow", //speed of animation: integer in milliseconds (ie: 200), or keywords "fast", "normal", or "slow"
oninit:function(headers, expandedindices){ //custom code to run when headers have initalized
	//do nothing
},
onopenclose:function(header, index, state, isuseractivated){ //custom code to run whenever a header is opened or closed
	//do nothing
}
})

[William Bruno 1501]

isso ai é um accordion, e não um dropdown.

 

até dei uma olhada no código fonte, já q não achei documentação...

acredito que você tenha q mudar o collapseprev: para true

[marcelo2605 10]

William, mudei para true e não deu certo. Vou tentar procurar um menu. Obrigado

[marcelo2605 10]

William, segui o seu conselho e começei do zero. Aí vai:

 

html

<ul id="main">
<li>item 1</li>
   <li id="submenu">item 2</li>
	<ul id="sub">
       	<li>sub 1</li>
       	<li>sub 2</li>
       	<li>sub 3</li>
       	<li>sub 4</li>
       	<li>sub 5</li>
       	<li>sub 6</li>
       </ul>
   <li>item 3</li>
   <li>item 4</li>
   <li>item 5</li>
   <li>item 6</li>
</ul>

 

coloquei display:none para #sub

 

O jquery

 

<script type="text/javascript">
$(function(){

	$('#submenu').hover (function(){
		$('#sub').slideDown('normal');
	});

	$('#submenu').mouseout(function(){
		$('#sub').slideUp('normal');
	});

});
</script>

 

Minha dúvida: no atual estado, o submenu se recolhe quando tiro o mouse do #submenu. Como faço para o submenu se recolher somente quando o mouse sair do #submenu e do #sub?

[William Bruno 1501]

o html deveria ser assim:

<li id="submenu">item 2
       <ul id="sub">
               <li>sub 1</li>
               <li>sub 2</li>
               <li>sub 3</li>
               <li>sub 4</li>
               <li>sub 5</li>
               <li>sub 6</li>
       </ul>
</li>

apenas isso.

 

o código js continua o mesmo.

[marcelo2605 10]

mas se eu coloco assim, o submenu fica indo e voltando.

 

E se na hora do hover eu adicionasse uma classe para o #sub e #submenu. Então faria o mouseout para essa classe, ao invés de fazer para o #submenu. Será que dá certo?

[William Bruno 1501]

o HTML certo é oq mostrei. Deixe dessa forma.

E altere a sua função para:

 

 

$('#submenu').hover (function(){
    $('#sub').slideDown('normal');
}, function(){
    $('#sub').slideUp('normal');
});

[marcelo2605 10]

William, agora parece que funcionou, mas porque não posso colocar <ul> no menu principal?

[William Bruno 1501]

lógico q pode.

 

o unico detalhe, é q o UL do submenu, deve ser filho do LI:

 

<ul id="main">
   <li>item 1</li>
   <li id="submenu">item 2
       <ul id="sub">
               <li>sub 1</li>
               <li>sub 2</li>
               <li>sub 3</li>
               <li>sub 4</li>
               <li>sub 5</li>
               <li>sub 6</li>
       </ul>
   </li>
   <li>item 3</li>
   <li>item 4</li>
   <li>item 5</li>
   <li>item 6</li>
</ul>

entendeu ?

[marcelo2605 10]

mas se eu faço dessa forma, o submenu fica por trás do menu principal. Os itens abaixos do item 2 não acompanham

[William Bruno 1501]

então você tem um erro de css, corrija.

 

o teu LI não pode ter height definido.

[marcelo2605 10]

cara você acertou!

 

Só mais uma coisa: existe alguma forma de evitar que o submenu fique se abrindo e fechando quando o usuário passa o mouse por ele várias vezes?

[William Bruno 1501]

função .stop()

 

http://api.jquery.com/stop/

[marcelo2605 10]

William, mais uma vez obrigado!

[marcelo2605 10]

Uma contribuição: este Plug-in melhora a ação de expandir e recolher o submenu.

 

hoverIntent