Rozwijane menu - jQuery.

[kajzur]

Cześć! Chciałbym funkcją .show() i .hide() zbudować takie menu. I ono mi się rozwija i zwija zaraz po zjechaniu z przycisku który jest inicjatorem wyjechania diva. Sposób w jaki to działa - rozumiem i wiem że kod poniżej właśnie tak ma działać jak napisałem - problem w tym że nie wiem jak napisać go by menu się zwijało po zjechaniu z obszaru rozwiniętego diva a nie od razu na tym obszarze:

Kod PHP:

<li>
<a onmouseover="j('#ff').show('fast');" onmouseout="j('#ff').hide('fast');" href="java script:void(0);" >Więcej</a></li>
                        <div style="display:none;position:absolute;top:35px; width:270px;background-color:#49324C;    
    color:#fff;
    text-shadow:1px 1px 2px #A0457E;
    text-decoration:none;padding:6px 20px;" id="ff">
    
    <a style="font-size:14px;" href="#">JA</a><br>

    </div> 


Proszę o pomoc.

[R_Rafalsky]

onmouseout="j('#ff').hide('fast');" daj dla diva #ff.

Powinno to tak działać, że po najechaniu na <a> pokaże się <div> jednak zniknie tylko gdy wyjedziemy z tego diva. Nie zniknie jak wogóle na niego nie najedziemy.

[Kartofelek]

E tam. Kod jest parszywy ;D
Żadnego onmouseout itp. Przecież masz bind.

Popróbuj sobie z ...

Kod:

$('a').bind({
   'mouseenter' : function() {   j('#ff').show('fast');   },
   'mouseleave' : function() {   j('#ff').hide('fast');   }
})

A nie - to nie przejdzie. Nie ma żadnego zaczepu (ujemny margin-top), przez to w twoim przypadku zawsze zjedziesz z A.
Wyjścia są 2:
1) zdarzenie robisz dla LI
2) sprawdzasz target eventu:

Kod:

$('a').bind({
   'mouseenter' : function() {   j('#ff').show('fast');   },
   'mouseleave' : function(e) {  
              if (  $(e.relatedTarget).attr('id') != 'ff'  )
                   j('#ff').hide('fast');  
              }
    }
})

Oczywiście powyższy kod pewnie nie będzie działał w 100% jak chcesz, ale ton ma cię tylko naprowadzić na sposób rozwiązania.
Bo równie dobrze możesz np taki e rzutować na obiekt jquery (jak zrobiłem powyżej), a potem zastosować jquerową "closest".
Zobacz sobie w necie na temat tego event albo tutaj, chociaż się raczej tym tekstem nie popisałem:
http://doman.art.pl/kursjs/kurs/events.html#e

[kajzur]

Hmm, a dla tego htmla napisać coś w podobie tylko że w css?

Kod:

<script type="text/javascript">
function jj()    {
if(document.getElementById('submenu').style.display == 'block' )
{
document.getElementById('submenu').style.display='none';
}
}
</script>
                       <ul >
                        <li ><span onmouseout="jj();"><a id="menu" href="javascript:void(0);" onmouseover="document.getElementById('submenu').style.display='block';" >Więcej</a></li>
                        <div style="display:none;position:absolute;top:35px; width:270px;background-color:#49324C;    
    color:#fff;
    text-shadow:1px 1px 2px #A0457E;
    text-decoration:none;padding:6px 20px;" id="submenu"  >

    <a style="font-size:14px;"href="#">FAQ</a><br>
    
    </div>
       </span>

[Kartofelek]

Tez mozna
Ogólnie:

LI : height: 20px; position:relative;
LI DIV : position:absolute; top:20px; display:none;
LI:hover DIV {display:block;}