+- Forum Webmastera, HTML, CSS, PHP, MySQL, Hosting, Domeny - Forum dla Webmasterów (https://www.webmastertalk.pl)
+-- Dział: Technologie internetowe - tworzenie stron WWW (https://www.webmastertalk.pl/forum-technologie-internetowe-tworzenie-stron-www)
+--- Dział: xHTML, CSS, JavaScript (https://www.webmastertalk.pl/forum-xhtml-css-javascript)
+--- Wątek: Rozwijane menu - jQuery. (/thread-rozwijane-menu-jquery)
Rozwijane menu - jQuery. - kajzur - 13-03-2011
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>
RE: Rozwijane menu - jQuery. - R_Rafalsky - 13-03-2011
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.
RE: Rozwijane menu - jQuery. - Kartofelek - 13-03-2011
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');
}
}
})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
RE: Rozwijane menu - jQuery. - kajzur - 14-03-2011
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>RE: Rozwijane menu - jQuery. - Kartofelek - 15-03-2011
Tez mozna
Ogólnie:
LI : height: 20px; position:relative;
LI DIV : position:absolute; top:20px; display:none;
LI:hover DIV {display:block;}