Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

> Menu się zacina jQuery
adamantd
post 28.09.2012, 17:05:33
Post #1





Grupa: Zarejestrowani
Postów: 228
Pomógł: 7
Dołączył: 15.08.2012
Skąd: Rzeszów

Ostrzeżenie: (0%)
-----


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

  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.  


pozmieniałem nazewnictwo na potrzebę tego tematu

  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.  




  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.  



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ąć...............

Ten post edytował adamantd 28.09.2012, 17:06:14
Go to the top of the page
+Quote Post

Posty w temacie


Reply to this topicStart new topic
1 Użytkowników czyta ten temat (1 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 



RSS Wersja Lo-Fi Aktualny czas: 20.06.2025 - 20:54