Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: Menu się zacina jQuery
Forum PHP.pl > Forum > Po stronie przeglądarki
adamantd
28.09.2012, 17:05:33
Witam mam mały problem z menu samo w sobie działa bez zarzutów po najechaniu wysuwa mi się rozwijana lista w dół w poszczególnych zakładkach ale kiedy chcę rozwinąć kolejne podmenu po raz któryś to nie chce się rozwinąć... jeżeli wszystko robię powoli to działa ale jeśli na którąś z głównych zakładek najadę myszką i zjadę kilka razy szybko i menu nie zdąży się rowinąć całe lub całe zwinąć to najbardziej zagnieżdżone sub-menu już nie chce się rozwijać.. nie wiem czy odpowiednio to wytłumaczyłem ;P wkleję html, css i jquery może któś będzie w stanie mi pomóc

[HTML] pobierz, plaintext 
  1. <div id="menu">
  2.                 	<ul>
  3.                     	<li><a href="#&">Home</a></li>
  4.                         <li><a href="#&">Przyklad1</a></li>
  5.                         <li class="sub-menu"><a href="#&">Przyklad2</a>
  6. 								<ul>
  7. 									<li><a href="#&">Przyklad3</a></li>
  8. 									<li><a href="#&">Przyklad4</a></li>
  9. 								</ul>
  10.  
  11. 						</li>
  12.                         <li class="sub-menu"><a href="#&">Przyklad5</a>
  13. 								<ul>
  14. 									<li><a href="#&">Przyklad6</a></li>
  15. 									<li><a href="#&">Przyklad7</a></li>
  16. 									<li><a href="#&">Przyklad8</a></li>
  17. 								</ul>
  18. 						</li>
  19.                         <li class="sub-menu"><a href="#&">Przyklad9</a>
  20. 								<ul>
  21. 									<li><a href="#&">Przyklad10</a></li>
  22. 									<li><a href="#&">Przyklad11</a></li>
  23. 								</ul>
  24. 						</li>
  25. 						<li class="sub-menu"><a href="#&">Przyklad12</a>
  26. 								<ul>
  27. 									<li><a href="#&">Przyklad13</a></li>
  28. 									<li><a href="#&">Przyklad14</a></li>
  29. 								</ul>
  30.  
  31. 						</li>
  32. 						<li class="sub-menu"><a href="#&">Przyklad15</a>
  33. 								<ul>
  34. 									<li><a href="#&">Przyklad16</a></li>
  35. 									<li><a href="#&">Przyklad17</a></li>
  36. 								</ul>
  37.  
  38. 						</li>
  39.                         <li class="sub-menu"><a href="#&">Przyklad18</a>
  40. 							<ul>
  41. 									<li><a href="index.php?action=przyklad">Przyklad19</a></li>
  42. 									<li><a href="index.php?action=przyklad">Przyklad20</a></li>
  43. 									<li><a href="index.php?action=przyklad">Przyklad21</a></li>
  44. 									<li><a href="index.php?action=przyklad">Przyklad22</a></li>
  45. 									<li><a href="index.php?action=przyklad">Przyklad23</a></li>
  46. 									<li class="sub-menu"><a href="#&">Przyklad24</a>
  47. 										<ul>
  48. 											<li><a href="index.php?action=przyklad">Przyklad25</a>
  49. 											<li><a href="index.php?action=przyklad">Przyklad26</a>
  50. 										</ul>
  51. 									</li>
  52. 								</ul>
  53. 						</li>
  54. 						<li><a href="#">Przyklad500</a></li>
  55.                     </ul>
  56.                	 </div>
  57.  
[HTML] pobierz, plaintext


pozmieniałem nazewnictwo na potrzebę tego tematu

[HTML] pobierz, plaintext 
  1. /* MENU*/		 
  2. #menu {border-bottom: 1px solid #F2EBD5; width: 1004px;  height: 28px; background: #b8b2e7 url(../images/tlo_menu.jpg); z-index:8999;}
  3. #menu > ul li { display: block; height: 28px; float: left;  width: 90px; position: relative;}
  4. #menu > ul li a { display: block; text-decoration: none; width: auto; padding: 8px 0; font: 12px Verdana, Geneva, sans-serif; text-align: center; color: #33323a; }
  5.  
  6. /* SUBMENU */
  7. #menu ul li.sub-menu ul {  position: absolute;  top: 28px; display: none;  background-color: #705D4A; z-index: 9000; }
  8. #menu ul li.sub-menu ul li { width: 90px; height: 28px;} 
  9. #menu ul li.sub-menu ul li a {font-size: 9px; text-align: left; padding: 8px 7px; color: #fff;}
  10.  
[HTML] pobierz, plaintext 




[PHP] pobierz, plaintext 
  1. /*
  2. MENU GŁÓWNE POZIOME GÓRA
  3. */
  4. $('#menu ul > li').not('.sub-menu').hover(function(){
  5. 	$(this).css('background','url(images/tlo_menu_hover.jpg) repeat-x');
  6. 	}, function(){
  7. 		$(this).css('background','none');
  8. 		});
  9.  
  10. $('#menu ul li.sub-menu').each(function(){
  11.  
  12. 	$(this).hover(function(){
  13.  
  14. 		$(this).css('background','url(images/tlo_menu_hover.jpg) repeat-x');
  15. 		var szerUlWys = parseInt($(this).children('ul:first').css('width'));//szer ul wysuwanego pierwszego sub-menu
  16. 		$(this).children('ul').slideDown(200);//dla pierwszej listy sub-menu
  17. 		$(this).children('ul').children('li').each(function(){//dla każdego li w sub-menu
  18. 			$(this).hover(function(){
  19. 				$(this).css('background','url(images/tlo_submenu_hover.jpg) repeat-x').children('a').css('color','#333');//podłożenie tła dla submenu li
  20. 				$(this).each(function(){//sprawdzenie które z li mają klasę sub-menu
  21. 					if($(this).has('sub-menu')){
  22. 					$(this).nextAll('li.sub-menu').mouseover(function(){
  23. 					$(this).children('ul').css({
  24. 					'left':szerUlWys+'px',
  25. 					'top':0
  26. 					}).slideDown(200);
  27. 					});
  28. 					$(this).nextAll('li.sub-menu').mouseout(function(){
  29. 						if($(this).children('ul').is(':focus')){
  30. 						$(this).children('ul').stop().slideUp(200);
  31. 						}
  32. 						});
  33.  
  34. 				}
  35. 					})
  36.  
  37. 			}, function(){
  38. 				$(this).css('background','none').children('a').css('color','#fff');
  39. 				});
  40. 			});
  41. 		}, function(){
  42. 			var $thy = $(this);
  43. 			$(this).children('ul').stop().slideUp(200, function(){
  44. 				$thy.css('background','none');
  45. 				});
  46.  
  47. 			});
  48. 	});
  49.  
[PHP] pobierz, plaintext



siedzę już nad tym kilka godzin a nie mam tyle czasu żeby siedzieć kolejne kilka nad jQuery (może to tylko jakiś błachy błąd)
z góry dzięki

problem konkretnie jest w "przykład 24" kiedy najadę kilka razy za szybko zabierając myszę z powrotem z zakładki np przykład "18" to cała reszta poniżej przykład18 jużnie chce się wysunąć...............
viking
28.09.2012, 17:08:44
Dzieje się tak ponieważ akcja cały czas jest wykonywana i po jej zakończeniu skrypt wykonuje nową dla danego zdarzenia. Musisz zadbać o to, żeby albo akcje kolejkować (odradzane) albo przerwać jej wykonywanie gdy ma miejsce nowe zdarzenie.
adamantd
28.09.2012, 17:17:27
Ok ale wrzuciłem stop() przed slideUp dla obu pod-menu co jeszcze mogę zrobić w tej kwestji? podaj mi jak możesz jakiś prosty przykład to powinienem załapać
viking
28.09.2012, 17:23:40
Wstaw jakąś flagę isAnimating = true i wykonuj tylko jeśli warunek sprawdzony. To w drugą stronę podejście czyli pozwolić dokończyć akcję. Swoją drogą pierwszy z brzegu przykład http://www.red-team-design.com/wp-content/...-menu-demo.html
Nie rozumiem czemu ludzie mając nowe przeglądarki, nowe technologie lubią tak bardzo zwalać wszystko na JS.
adamantd
28.09.2012, 17:51:51 
[PHP] pobierz, plaintext 
  1. $('#menu ul li.sub-menu').each(function(){
  2. 	var isAnim = false;////////////////////////////////////na początku false
  3. 	$(this).hover(function(){
  4.  
  5. 		$(this).css('background','url(images/tlo_menu_hover.jpg) repeat-x');
  6. 		var szerUlWys = parseInt($(this).children('ul:first').css('width'));//szer ul wysuwanego pierwszego sub-menu
  7. 		if(!isAnim){//////////////////////////////////////////////////////sprawdzenie czy jest animowane czy nie
  8. 		$(this).children('ul').slideDown(200);//dla pierwszej listy sub-menu
  9.  
  10. 		isAnim = true;//////////////////////////////przypisanie true na czas wykonywania akcji
  11.  
  12. 		$(this).children('ul').children('li').each(function(){//dla każdego li w sub-menu
  13. 			$(this).hover(function(){
  14. 				$(this).css('background','url(images/tlo_submenu_hover.jpg) repeat-x').children('a').css('color','#333');//podłożenie tła dla submenu li
  15. 				$(this).each(function(){//sprawdzenie które z li mają klasę sub-menu
  16. 					if($(this).has('sub-menu')){
  17. 					$(this).nextAll('li.sub-menu').mouseover(function(){
  18. 					$(this).children('ul').css({
  19. 					'left':szerUlWys+'px',
  20. 					'top':0
  21. 					}).slideDown(200).mouseout(function(){
  22. 						if($(this).children('ul').is(':focus')){
  23. 						$(this).children('ul').slideUp(200);
  24. 						}
  25. 					});
  26. 						});
  27.  
  28. 				}
  29. 					})
  30.  
  31. 			}, function(){
  32. 				$(this).css('background','none').children('a').css('color','#fff');
  33. 				});
  34. 			});
  35. 		}
  36. 		}, function(){
  37. 			var $thy = $(this);
  38. 			$(this).children('ul').slideUp(200, function(){
  39. 				$thy.css('background','none');
  40. 				isAnim = false;//////////////////////////////////////////////////przypisane false po ukończeniu animacji ukrywającej
  41. 				});
  42.  
  43. 			});
  44. 	});
  45.  
  46.  
  47.  
[PHP] pobierz, plaintext





dodałem w taki sposób -czy to miałeś na myśli? działa lepiej tylko chyba dlatego, że wywaliłem stop() który bardzo mi z jednej strony pomagał ale z drugiej strony powodował problemy
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.