Witam
Stworzyłem menu LavaLamp według kursu jQuery W Praktyce. Wszystko działa ładnie do czasu wstawienia właściwych odnośników np.:
<li><a href="kontakt.php">Kontakt</a></li>

zamiast domyślnych:
<li><a href="#">Kontakt</a></li>

Po kliknięciu ładuje się strona, ale podświetlane pole zamiast pozostać na wybranym odnośniku np. "Kontakt" wraca na odnośnik domyślny "About us". Przypominam ze na ustawieniach domyślnych href="#" wszystko śmiga dobrze.

kod HTML
CODE
  1. <ul class="lavaLamp">
  2. <li><a href="index_en.php">About us</a></li>
  3. <li><a href="rehabilitation.php">Rehabilitation</a>
  4. <ul class="submenu">
  5. <li><a href="#">Kinezoteraphy</a></li>
  6. <li><a href="#">dr Ackermann Method</a></li>
  7. </ul>
  8. </li>
  9. <li><a href="massage.php"> Massage </a>
  10. <ul class="submenu">
  11. <li><a href="#">Klasyczny</a></li>
  12. <li><a href="#">Leczniczy</a></li>
  13. <li><a href="#">Wyszczuplający</a></li>
  14. <li><a href="#">Relaksacyjny</a></li>
  15. </ul>
  16. </li>
  17. <li><a href="#">Cennik</a></li>
  18. <li><a href="kontakt.php">Kontakt</a></li>
  19. </ul>


plik jQuery myLavaLamp.js
CODE
  1. (function($){
  2. $.fn.myLavaLamp = function(param){
  3. var defaults = {
  4. speed: 300,
  5. effect: 'linear'
  6.  
  7. }
  8. var options = $.extend(defaults, param);
  9.  
  10. return this.each(function(){
  11. var $lis = $('> li', this);
  12. var $highlight = $('<li class="highlight"><div class="inner"></div></li>').appendTo($(this));
  13. var current = $lis.filter('.active').get(0) || $lis[0];
  14.  
  15.  
  16. $lis.each(function(){
  17. if($(this).has('ul.submenu').size() > 0){
  18. $('ul.submenu', this)
  19. .css('width', $(this).css('width'))
  20. .hide();
  21. $(this)
  22. .children('a')
  23. .addClass('hasSubmenu')
  24. .end()
  25. .mouseenter(function(){
  26. if($('ul.submenu', this).css('display') == 'block') return;
  27.  
  28. $('ul.submenu', this).slideDown("fast");
  29. ////////////
  30. $('li.highlight')
  31. .myCorners("0 bl br")
  32. .children()
  33. .andSelf()
  34. .css('border-bottom', '0px');
  35. })
  36. .mouseleave(function(){
  37. if($('ul.submenu', this).css('display') == 'none') return;
  38.  
  39. $('ul.submenu', this).slideUp("fast");
  40. ////////////
  41. $('li.highlight')
  42. .myCorners()
  43. .css('border-bottom', '1px solid #7cb763');
  44. });
  45. }
  46. });
  47.  
  48.  
  49. $lis.not('.highlight').mouseover(function(){
  50. move(this);
  51. });
  52.  
  53. $lis.click(function(){
  54. setCurrent(this);
  55.  
  56. });
  57.  
  58. $(this).hover(function(){},
  59. function(){
  60. move(current);
  61. });
  62.  
  63. setCurrent(current);
  64. function setCurrent(element){
  65. $highlight.css({
  66. 'left': element.offsetLeft,
  67. 'width': element.offsetWidth
  68. });
  69. current = element;
  70. }
  71.  
  72.  
  73. function move(element){
  74. $highlight.animate({
  75. 'width': element.offsetWidth,
  76. 'left': element.offsetLeft
  77. }, {
  78. queue: false,
  79. duration: options.speed,
  80. easing: options.effect
  81. })
  82. }
  83. });
  84. }
  85. })(jQuery)


plik scripts.js
CODE
  1. $(document).ready(function(){
  2.  
  3. $('#top #menu ul.lavaLamp').myLavaLamp({
  4. speed: 200,
  5. effect: 'easeOutQuad'
  6. });
  7. });


Naprawdę brak mi już pomysłu, na to co jest nie tak. Myślę że może coś w kodzie myLavaLamp.js ale ja jestem początkujący w temacie jQuery i błędu tam nie widzę. Nie daje mi cały czas spokoju myśl dlaczego gdy w odnośniku <a href="#"></a></li> jest "#" wszystko działa poprawnie.