Forum PHP.pl

Cześć,

Chciałem zrobić menu a ponieważ będzie miało dużo odnośników chciałem aby było rozsuwane. Ale tu już napotkałem już 1 problem.

[HTML] pobierz, plaintext 
<script type='text/javascript'>
function show_menu(cat) {
			$('#'+cat).slideDown(200);
}
 
function hide_menu(cat) {
			$('#'+cat).slideUp(200);
}
 
</script>
<div id='ext'>
<div id='menu'>
<div class='category' onmouseover="show_menu('cat1');" onmouseout="hide_menu('cat1');">Kategoria 1</div>
<ul id='cat1'>
<li>Odnosnik1 cat1</li>
<li>Odnosnik2 cat1</li>
<li>Odnosnik3 cat1</li>
</ul>
<div class='category' onmouseover="show_menu('cat2');" onmouseout="hide_menu('cat2');">Kategoria 2</div>
<ul id='cat2'>
<li>Odnosnik1 cat2</li>
<li>Odnosnik2 cat2</li>
<li>Odnosnik3 cat2</li>
</ul>
<div class='category' onmouseover="show_menu('cat3');" onmouseout="hide_menu('cat3');">Kategoria 3</div>
<ul id='cat3'>
<li>Odnosnik1 cat3</li>
<li>Odnosnik2 cat3</li>
<li>Odnosnik3 cat3</li>
</ul>
[HTML] pobierz, plaintext 

Chodzi o to, że menu próbuje się rozwinąć ale po chwili wraca i nic z tego. jak zmieniłem ul na div było ok, ale to nie ten efekt chcę uzyskać. Próbowałem też z toggle, ale mam ten sam efekt.

Ten post edytował GoOx 9.07.2013, 17:04:17

Jak już używasz jQuery to nie zaśmiecaj kodu HTML, tylko wszelkie akcje dla elementów przypisuj poprzez skrypt. To po pierwsze. Po drugie, daj mouseleave, a nie out i przypisz do ul, a nie do div, bo to nie ma żadnego sensu, zjedziesz z diva żeby kliknąć, a się menu zsunie.

Piszesz tak jakbym wiedział co mam zrobić.

$('ul#'+cat).slideUp(200);

Jak zrobię tak to już wgl nie działa. Zamiast wytłumaczyć to dyktujesz mi co mam zrobić. a odpowiedź mam sobie wyczarować?

Ten post edytował GoOx 9.07.2013, 19:03:13

Myślałem, że wiesz co robisz? I że moja odpowiedź nieco rozjaśni Ci sprawę.

[HTML] pobierz, plaintext 
<script type='text/javascript'>
$(function() {
  $('.category').mouseenter(function(){
    $(this).children('ul').slideDown(200);
  });
  $('ul').mouseleave(function(){
    $(this).slideUp(200);
  });
});
 
</script>
 
<div id='ext'>
<div id='menu'>
<div class='category'>Kategoria 1</div>
<ul id='cat1'>
<li>Odnosnik1 cat1</li>
<li>Odnosnik2 cat1</li>
<li>Odnosnik3 cat1</li>
</ul>
<div class='category'>Kategoria 2</div>
<ul id='cat2'>
<li>Odnosnik1 cat2</li>
<li>Odnosnik2 cat2</li>
<li>Odnosnik3 cat2</li>
</ul>
<div class='category'>Kategoria 3</div>
<ul id='cat3'>
<li>Odnosnik1 cat3</li>
<li>Odnosnik2 cat3</li>
<li>Odnosnik3 cat3</li>
</ul>
[HTML] pobierz, plaintext 

Czy to się okazało bardziej pomocne i obrazowe?

W ten sposób już próbowałem, i z niewiadomych powodów dawało efekt taki że nic nie działało.

Już niby na parwiłem, ale nie jest tak jak być powinno ul dałem w div i nazwałem id niby działa.

Ten post edytował GoOx 10.07.2013, 17:10:16