Witam wszystkich
Od razu na wstępie poproszę o wyrozumiałość. Jestem kompletnym laikiem jeżeli chodzi o język javascript. Modyfikuję gotowy template strony. Na samym wstępie pojawił się problem z polskimi znakami. Na formatce były wykorzystywane fonty z skryptem Cufona. Po wygenerowaniu nowego fontu z polskimi znakami i podmianie plików wszystko działa ok....ale:( Na jednej z podstron przestała poprawnie działać animacja wyboru menu. Żeby przedstawić to obrazowo standardowo tło od przycisku jest czarne+biały tekst, natomiast po najechaniu kursorem myszki tło zmienia się na białe a tekst na czarny. Na głównej stronie animacja działa prawidłowo jednak po wejściu na podstronę po najechaniu kursorem na przycisk podświetlenie zmienia się na białe jednak tekst nie zmienia się na czarny (pojawia się jedynie biały prostokąt). Próbowałem nawet kombinować z stylami CSS i widać że po najechaniu myszka na przycisk tekst zmienia na moment kolor, jednak finalnie wszystko zostaje zakryte białym podświetleniem. Kod tego co prawdopodobnie zarządza tą animacją znajduje się poniżej:
tabs = {
init : function(){
$('.tabs').each(function(){
var th=$(this),
tContent=$('.tab-content',th),
navA=$('.nav a',th)
tContent.not(tContent.eq(0)).hide()
navA.click(function(){
var th=$(this),
tmp=th.attr('href')
tContent.not($(tmp.slice(tmp.indexOf('#'))).fadeIn(1000)).hide()
$(th).parent().addClass('selected').siblings().removeClass('selected').find('span').stop().animate({opacity:'0'},600);
Cufon.refresh();
return false;
});
});
}
}
Część na stronie która zajmuje się sterowaniem menu:
<div class="col1">
<h2>Kategorie</h2>
<ul class="nav">
<li class="selected"><a href="#Fashion"><span></span><strong>Fashion</strong></a></li>
<li><a href="#Objects"><span></span><strong>3D Objects</strong></a></li>
<li><ahref="#Wedding"><span></span><strong>Wedding</strong></a></li>
<li><ahref="#Reportage"><span></span><strong>Reportage</strong></a></li>
<li><ahref="#Advertising"><span></span><strong>Advertising</strong></a></li>
<li><ahref="#Portrait"><span></span><strong>Portrait</strong></a></li>
</ul>
</div>
CSS do styli
.tabs .nav {padding-top:5px}
.tabs .nav li {line-height:28px;padding-bottom:2px}
.tabs .nav li a {position:relative;font-size:16px;letter-spacing:-1px;text-transform:uppercase;text-decoration:none;height:28px;line-height:26px;padding:0 39px 0 9px;color:#fff;background:#000;display:inline-block}
.tabs .nav li a span {display:block;position:absolute;top:0;left:0;width:100%;height:100%;background:#fff}
.tabs .nav li a strong {font-weight:400}
.tabs .nav li a:hover, .tabs .nav .selected a {color:#000}
.tab-content figure {padding-bottom:15px}
.tab-content figure.marg_right1 {margin-right:20px}
Dziękuję za wszelką pomoc. Może ktoś życzliwy pomoże;)
Pozdrawiam