@Jet:
A myślałem że spotkałem kolegę ze studiów :).
Co do rozwiązania Twojego problemu to masz na stronie jQuery, skorzystaj więc z jego dobrodziejstw. Przede wszystkim trzeba wykorzystać nie mouseover i mouseout, tylko bardzo przydatne, sztuczne zdarzenia mouseenter i mouseleave (warto zauważyć, że wymyślił je... Microsoft :) -- natywnie obsługuje je tylko IE, ale jQuery potrafi je symulować).
Napisałem Ci kod, który powinien być "samowyjaśniający". Dlatego jest taki rozwklekły -- dałoby się go skompresować do kilku linijek.
Po pierwsze, z HTML-a wywalamy niepotrzebne id i brzydkie funkcje obsługujące zdarzenia. One powinny znaleźć się w JavaScripcie, a nie w HTML-u! Dodajemy też klasę "hoverfix" dla identyfikacji elementów, które będą miały otrzymać klasy menuX_in oraz menuX_out:
<div class="hoverfix">
<ul class="topnav">
<li>
<span>BILETY</span>
<ul class="subnav">
<li><a href="#">LOTNICZE</a></li>
<li><a href="#">AUTOKAROWE</a></li>
<li><a href="#">PROMOWE</a></li>
<li><a href="#">IMPREZY</a></li>
</ul>
</li>
</ul>
</div>
<div class="hoverfix">
<ul class="topnav">
<li>
<span>WYCIECZKI</span>
<ul class="subnav">
<li><a href="#">LAST MINUTE</a></li>
<li><a href="#">FIRST MINUTE</a></li>
<li><a href="#">DOJAZD WŁASNY</a></li>
<li><a href="#">DLA RODZIN</a></li>
</ul>
</li>
</ul>
</div>
A teraz JavaScript. Nie będzie tu żadnego ukrytego evala (eval is evil!), tylko eleganckie programowanie funkcyjne. Ten kod ma się znaleźć w osobnym pliku JS. Plik ten powinien być importowany gdzieś na dole strony; od biedy może być i u góry, ale wtedy całość kodu trzeba wstawić w zdarzeniu ready. Takie małe chamstwo z mojej strony: jeśli mnie nie posłuchasz i wstawisz to w środek strony, to nie wolno Ci tego kodu używać. Taka dziwna licencja. Kod ten może być używany do woli przez każdego, ale tylko wtedy, gdy wstawi się go porządnie :). Nie wolno go używać, gdy jest dodany nieprawidłowo, tj. gdy np. opuści się atrybut type w tagu <script> w wersjach HTML-a, w których jest to niedopuszczalne. Jeśli z jakichś przyczyn naprawdę nie możesz umieścić tego kodu w osobnym pliku (co się zdarza, choć bardzo rzadko), to musisz mi to tutaj najpierw wytłumaczyć i jeśli faktycznie masz taką wyjątkową sytuację, to się zgodzę. To "małe chamstwo" ma oczywiście walory edukacyjne i jeśli już dbasz o jakość kodu, to wymagania licencyjne spełnisz naturalnie.
$('.hoverfix').each(function(i, container) {
var $container = $(container)
, $trigger = $container.find('ul.topnav > li > span:first-child')
, index = i + 1
, overClass = 'menu' + index + '_in'
, outClass = 'menu' + index + '_out'
, outTimeoutId = null
, outDelay = 570
;
$trigger.mouseenter(setOver);
$container.mouseleave(waitAndSetOut);
setOut();
function setOver() {
clearOutTimeout();
$container.addClass(overClass).removeClass(outClass);
}
function setOut() {
clearOutTimeout();
$container.removeClass(overClass).addClass(outClass);
}
function waitAndSetOut() {
outTimeoutId = setTimeout(setOut, outDelay);
}
function isOutTimeoutSet() {
return outTimeoutId !== null;
}
function clearOutTimeout() {
if (isOutTimeoutSet()) {
clearTimeout(outTimeoutId);
outTimeoutId = null;
}
}
});
Jeśli masz jakieś pytania, to wal. Mam nadzieję, że dobrze zrozumiałem o co Ci chodzi. Ten kod daje klasę menuX_in elementowi o klasie hoverfix natychmiast po najechaniu myszą na ten element (a właściwie nie na ten element, ale span będący przyciskiem menu) i utrzymuje tę klasę aż do zjechania myszą z podmenu. Wtedy odczekuje 570 ms, zdejmuję klasę -in i daje -out. Na samym początku skrypt automatycznie daje klasę menuX_out każdemu elementowi, więc nie musisz jej pisać w kodzie HTML (ale możesz).