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
plik jQuery myLavaLamp.js
CODE
(function($){ $.fn.myLavaLamp = function(param){ var defaults = { speed: 300, effect: 'linear' } var options = $.extend(defaults, param); return this.each(function(){ var $lis = $('> li', this); var current = $lis.filter('.active').get(0) || $lis[0]; $lis.each(function(){ if($(this).has('ul.submenu').size() > 0){ $('ul.submenu', this) .css('width', $(this).css('width')) .hide(); $(this) .children('a') .addClass('hasSubmenu') .end() .mouseenter(function(){ if($('ul.submenu', this).css('display') == 'block') return; $('ul.submenu', this).slideDown("fast"); //////////// $('li.highlight') .myCorners("0 bl br") .children() .andSelf() .css('border-bottom', '0px'); }) .mouseleave(function(){ if($('ul.submenu', this).css('display') == 'none') return; $('ul.submenu', this).slideUp("fast"); //////////// $('li.highlight') .myCorners() .css('border-bottom', '1px solid #7cb763'); }); } }); $lis.not('.highlight').mouseover(function(){ move(this); }); $lis.click(function(){ setCurrent(this); }); $(this).hover(function(){}, function(){ move(current); }); setCurrent(current); function setCurrent(element){ $highlight.css({ 'left': element.offsetLeft, 'width': element.offsetWidth }); current = element; } function move(element){ $highlight.animate({ 'width': element.offsetWidth, 'left': element.offsetLeft }, { queue: false, duration: options.speed, easing: options.effect }) } }); } })(jQuery)
plik scripts.js
CODE
$(document).ready(function(){ $('#top #menu ul.lavaLamp').myLavaLamp({ speed: 200, effect: 'easeOutQuad' }); });
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.