Witam,
Chciałem zrobić płynnego hover na moje menu, ale za chiny nie wiem jak to w Googlu nazwać wpisywałem już kilkanaście fraz ale nie znalazłem nic co by było związane z tym co chce zrobić.
O co chodzi; active i hover to są zwykłe podkreślenia tekstu; np: zakładka start jest active i pod jej nazwą jest podkreślenie, a gdy zacznę jeździć po menu to ta linia albo jakaś nowa linia będzie płynne przechodzić pod nazwami menu, nie tak jak normalnie jest, że znika z pod tego tekstu i się pojawia obok, tylko płynnie przesuwa się z jednej zakładki do tej, na której mam aktualnie myszkę.
Chociaż link bym poprosił jak ktoś się już spotkał z takim rozwiązaniem.
Pozdrawiam
Pełna wersja: Płynne przechodzenie podkreślenia w menu
Dzięki, bardzo mi pomogłeś 
Właśnie przerobiłem to menu i mam tylko mały problem z kolorem tej linii, która się przesuwa. W css nie ma koloru tej linii więc musi być tylko w bibliotece js, ja się zabardzo na tym nie znam po za tym skołowało mnie, że jak szukałem koloru #0000FF albo blue nic mi nie znalazło, kod bibliotek, które są używane:
jquery.lavalamp.min.js
jquery.easing.min.js
Do tego dochodzi standardowa biblioteka jquery-1.1.3.1.min.js
Stawiam że ten kolor jest jakiś domyślny ale nie wiem ja go zmienić
Pozdrawiam
Właśnie przerobiłem to menu i mam tylko mały problem z kolorem tej linii, która się przesuwa. W css nie ma koloru tej linii więc musi być tylko w bibliotece js, ja się zabardzo na tym nie znam po za tym skołowało mnie, że jak szukałem koloru #0000FF albo blue nic mi nie znalazło, kod bibliotek, które są używane:
jquery.lavalamp.min.js
Kod
(function($){$.fn.lavaLamp=function(o){o=$.extend({fx:"linear",speed:500,click:function(){}},o||{});return this.each(function(){var b=$(this),noop=function(){},$back=$('<li class="back"><div class="left"></div></li>').appendTo(b),$li=$("li",this),curr=$("li.current",this)[0]||$($li[0]).addClass("current")[0];$li.not(".back").hover(function(){move(this)},noop);$(this).hover(noop,function(){move(curr)});$li.click(function(e){setCurr(this);return o.click.apply(this,[e,this])});setCurr(curr);function setCurr(a){$back.css({"left":a.offsetLeft+"px","width":a.offsetWidth+"px"});curr=a};function move(a){$back.each(function(){$.dequeue(this,"fx")}).animate({width:a.offsetWidth,left:a.offsetLeft},o.speed,o.fx)}})}})(jQuery);
jquery.easing.min.js
Kod
jQuery.easing={easein:function(x,t,b,c,d){return c*(t/=d)*t+b},easeinout:function(x,t,b,c,d){if(t<d/2)return 2*c*t*t/(d*d)+b;var a=t-d/2;return-2*c*a*a/(d*d)+2*c*a/d+c/2+b},easeout:function(x,t,b,c,d){return-c*t*t/(d*d)+2*c*t/d+b},expoin:function(x,t,b,c,d){var a=1;if(c<0){a*=-1;c*=-1}return a*(Math.exp(Math.log(c)/d*t))+b},expoout:function(x,t,b,c,d){var a=1;if(c<0){a*=-1;c*=-1}return a*(-Math.exp(-Math.log(c)/d*(t-d))+c+1)+b},expoinout:function(x,t,b,c,d){var a=1;if(c<0){a*=-1;c*=-1}if(t<d/2)return a*(Math.exp(Math.log(c/2)/(d/2)*t))+b;return a*(-Math.exp(-2*Math.log(c/2)/d*(t-d))+c+1)+b},bouncein:function(x,t,b,c,d){return c-jQuery.easing['bounceout'](x,d-t,0,c,d)+b},bounceout:function(x,t,b,c,d){if((t/=d)<(1/2.75)){return c*(7.5625*t*t)+b}else if(t<(2/2.75)){return c*(7.5625*(t-=(1.5/2.75))*t+.75)+b}else if(t<(2.5/2.75)){return c*(7.5625*(t-=(2.25/2.75))*t+.9375)+b}else{return c*(7.5625*(t-=(2.625/2.75))*t+.984375)+b}},bounceinout:function(x,t,b,c,d){if(t<d/2)return jQuery.easing['bouncein'](x,t*2,0,c,d)*.5+b;return jQuery.easing['bounceout'](x,t*2-d,0,c,d)*.5+c*.5+b},elasin:function(x,t,b,c,d){var s=1.70158;var p=0;var a=c;if(t==0)return b;if((t/=d)==1)return b+c;if(!p)p=d*.3;if(a<Math.abs(c)){a=c;var s=p/4}else var s=p/(2*Math.PI)*Math.asin(c/a);return-(a*Math.pow(2,10*(t-=1))*Math.sin((t*d-s)*(2*Math.PI)/p))+b},elasout:function(x,t,b,c,d){var s=1.70158;var p=0;var a=c;if(t==0)return b;if((t/=d)==1)return b+c;if(!p)p=d*.3;if(a<Math.abs(c)){a=c;var s=p/4}else var s=p/(2*Math.PI)*Math.asin(c/a);return a*Math.pow(2,-10*t)*Math.sin((t*d-s)*(2*Math.PI)/p)+c+b},elasinout:function(x,t,b,c,d){var s=1.70158;var p=0;var a=c;if(t==0)return b;if((t/=d/2)==2)return b+c;if(!p)p=d*(.3*1.5);if(a<Math.abs(c)){a=c;var s=p/4}else var s=p/(2*Math.PI)*Math.asin(c/a);if(t<1)return-.5*(a*Math.pow(2,10*(t-=1))*Math.sin((t*d-s)*(2*Math.PI)/p))+b;return a*Math.pow(2,-10*(t-=1))*Math.sin((t*d-s)*(2*Math.PI)/p)*.5+c+b},backin:function(x,t,b,c,d){var s=1.70158;return c*(t/=d)*t*((s+1)*t-s)+b},backout:function(x,t,b,c,d){var s=1.70158;return c*((t=t/d-1)*t*((s+1)*t+s)+1)+b},backinout:function(x,t,b,c,d){var s=1.70158;if((t/=d/2)<1)return c/2*(t*t*(((s*=(1.525))+1)*t-s))+b;return c/2*((t-=2)*t*(((s*=(1.525))+1)*t+s)+2)+b},linear:function(x,t,b,c,d){return c*t/d+b}};
Do tego dochodzi standardowa biblioteka jquery-1.1.3.1.min.js
Stawiam że ten kolor jest jakiś domyślny ale nie wiem ja go zmienić
Pozdrawiam
Przypadkiem to nie jest jakiś obrazek ?
Zapomniałem dopisać, obrazek też nie, na stronę przeniosłem tylko kod z css i zaincludowałem biblioteki js head oraz dodałem menu jako ul li itp
P.S
CSS
Znalazłem W css był a cssa badałem firebugimem i nic mi nie pokazywał, dzięki za pomoc :*
BTW to to menu nie działa
nie przechodzi do linków które się poda, nic się nie dzieje jak klikam, pokazduje mi adres, a jak kliknę otwórz w nowej karcie to mi otworzy.
P.S
CSS
Kod
.lavaLampBottomStyle {
position: relative;
height: 29px;
width: 421px;
background-color: white;
padding: 15px;
margin: 10px 0;
overflow: hidden;
border: 1px solid gray;
}
.lavaLampBottomStyle li {
float: left;
list-style: none;
}
.lavaLampBottomStyle li.back {
border-bottom: 5px solid blue;
width: 9px;
height: 30px;
z-index: 8;
position: absolute;
}
.lavaLampBottomStyle li a {
font: bold 14px arial;
text-decoration: none;
color: #000;
outline: none;
text-align: center;
top: 7px;
text-transform: uppercase;
letter-spacing: 0;
z-index: 10;
display: block;
float: left;
height: 30px;
position: relative;
overflow: hidden;
margin: auto 10px;
}
.lavaLampBottomStyle li a:hover, .lavaLampBottomStyle li a:active, .lavaLampBottomStyle li a:visited {
border: none;
}
position: relative;
height: 29px;
width: 421px;
background-color: white;
padding: 15px;
margin: 10px 0;
overflow: hidden;
border: 1px solid gray;
}
.lavaLampBottomStyle li {
float: left;
list-style: none;
}
.lavaLampBottomStyle li.back {
border-bottom: 5px solid blue;
width: 9px;
height: 30px;
z-index: 8;
position: absolute;
}
.lavaLampBottomStyle li a {
font: bold 14px arial;
text-decoration: none;
color: #000;
outline: none;
text-align: center;
top: 7px;
text-transform: uppercase;
letter-spacing: 0;
z-index: 10;
display: block;
float: left;
height: 30px;
position: relative;
overflow: hidden;
margin: auto 10px;
}
.lavaLampBottomStyle li a:hover, .lavaLampBottomStyle li a:active, .lavaLampBottomStyle li a:visited {
border: none;
}
Znalazłem
W css był a cssa badałem firebugimem i nic mi nie pokazywał, dzięki za pomoc :*BTW to to menu nie działa
nie przechodzi do linków które się poda, nic się nie dzieje jak klikam, pokazduje mi adres, a jak kliknę otwórz w nowej karcie to mi otworzy.
Witaj ponownie Kleryk.
Skrypt działa tylko że jest przystosowany raczej do kotwic na stronie niż do zwykłych linków.
Tu masz rozwiązanie:
1. W pliku html, gdzie załączasz skrypty .js, zamiast załączyć
to załącz
2.Otwórz skrypt jquery.lavalamp.js i usuń z niego linie od 73 do 76.
Można usunąć więcej niepotrzebnych rzeczy, ale to wystarczy, aby linki zaczęły działać.
Pamiętaj, że stałe podświetlenie będzie aktywne dla elemenu <li class="current">.
Pozdrawiam.
Skrypt działa tylko że jest przystosowany raczej do kotwic na stronie niż do zwykłych linków.
Tu masz rozwiązanie:
1. W pliku html, gdzie załączasz skrypty .js, zamiast załączyć
to załącz
2.Otwórz skrypt jquery.lavalamp.js i usuń z niego linie od 73 do 76.
Można usunąć więcej niepotrzebnych rzeczy, ale to wystarczy, aby linki zaczęły działać.
Pamiętaj, że stałe podświetlenie będzie aktywne dla elemenu <li class="current">.
Pozdrawiam.
Dziki wielkie :* Działa
Cytat(tolomei @ 10.04.2012, 16:05:07 ) 
Witaj ponownie Kleryk.
Skrypt działa tylko że jest przystosowany raczej do kotwic na stronie niż do zwykłych linków.
Tu masz rozwiązanie:
1. W pliku html, gdzie załączasz skrypty .js, zamiast załączyć
to załącz
2.Otwórz skrypt jquery.lavalamp.js i usuń z niego linie od 73 do 76.
Można usunąć więcej niepotrzebnych rzeczy, ale to wystarczy, aby linki zaczęły działać.
Pamiętaj, że stałe podświetlenie będzie aktywne dla elemenu <li class="current">.
Pozdrawiam.
Skrypt działa tylko że jest przystosowany raczej do kotwic na stronie niż do zwykłych linków.
Tu masz rozwiązanie:
1. W pliku html, gdzie załączasz skrypty .js, zamiast załączyć
to załącz
2.Otwórz skrypt jquery.lavalamp.js i usuń z niego linie od 73 do 76.
Można usunąć więcej niepotrzebnych rzeczy, ale to wystarczy, aby linki zaczęły działać.
Pamiętaj, że stałe podświetlenie będzie aktywne dla elemenu <li class="current">.
Pozdrawiam.
Zrobiłem tak jak napisałeś, czyli usunąłem to:
$li.click(function(e) {
setCurr(this);
return o.click.apply(this, [e, this]);
});
i działa ale jak zrobić aby po kliknięciu w dany element podkreślenie zostało, a nie wracało na pierwszy?
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.