javascript in navigacija

4 naročniki

Pri spodnji kodi imam en problemček.. gre za drop-down navigacijo. Skripta najde class elementa v navigaciji #nav (čez katerega greš z miško) in odpre-"zaslajda" istoimenski class znotraj diva #sub-nav. Vse deluje kot mora, le ena pomankljivost je.. ko greš z miško preko sub-menuja se le ta zapre, kar se nebi smel. Kaj delam narobe?

var timer = [];
    $("#nav li").hover(
        function () {
            var id = jQuery.data(this);
            var className = $(this).attr('class');
            var submenu = '#sub-nav .'+className;

            $(this).addClass('selected');

            timer[id] = setTimeout(function() {
                $(submenu).slideDown(300);
                timer[id] = "";
            }, 300);
        },
        function () {
            $(this).removeClass('selected');

            var id = jQuery.data(this);
            var className = $(this).attr('class');
            var submenu = '#sub-nav .'+className;

            if (timer[id] != "") {
                clearTimeout(timer[id]);
            } else {
                $(submenu).slideUp(300);
            }
        }
    );

Hvala za pomoč in Lp!

Pokaži še HTML kodo..

Evo html:

<div id="nav">
        <ul>
            <li class="home"><a href="#" title="Home">Home<p>Home is d'best</p></a></li>
            <li class="gallery"><a href="#" title="Gallery">Gallery<p>Content is King!</p></a></li>
            <li class="forum"><a href="#" title="Forum">Forum<p>Showcase Component</p></a></li>
            <li class="articles"><a href="#" title="Articles">Articles<p>Component</p></a></li>
            <li class="other"><a href="#" title="Other">Other<p>Sample Other</p></a></li>
        </ul>
</div>

<div id="sub-nav">
    <div class="home">
        <ul>
            <li><a href="#" title="Poll">Poll</a></li>
            <li><a href="#" title="Search">Search</a></li>
            <li><a href="#" title="Wrapper">Wrapper</a></li>
            <li><a href="#" title="Weblinks">Weblinks</a></li>
            <li><a href="#" title="Joomla">Joomla! Overview</a></li>
            <li><a href="#" title="Contacts">Contacts</a></li>
            <li><a href="#" title="News feeds">News feeds</a></li>
        </ul>
    </div>
    <div class="gallery">
        <ul>
            <li><a href="#" title="Poll">Poll</a></li>
            <li><a href="#" title="Search">Search</a></li>
            <li><a href="#" title="Wrapper">Wrapper</a></li>
            <li><a href="#" title="Weblinks">Weblinks</a></li>
            <li><a href="#" title="Joomla">Joomla! Overview</a></li>
            <li><a href="#" title="Contacts">Contacts</a></li>
            <li><a href="#" title="News feeds">News feeds</a></li>
        </ul>
    </div>
    <div class="forum">
        <ul>
            <li><a href="#" title="Poll">Poll</a></li>
            <li><a href="#" title="Search">Search</a></li>
            <li><a href="#" title="Wrapper">Wrapper</a></li>
            <li><a href="#" title="Weblinks">Weblinks</a></li>
            <li><a href="#" title="Joomla">Joomla! Overview</a></li>
            <li><a href="#" title="Contacts">Contacts</a></li>
            <li><a href="#" title="News feeds">News feeds</a></li>
        </ul>
    </div>
    <div class="articles">
        <ul>
            <li><a href="#" title="Poll">Poll</a></li>
            <li><a href="#" title="Search">Search</a></li>
            <li><a href="#" title="Wrapper">Wrapper</a></li>
            <li><a href="#" title="Weblinks">Weblinks</a></li>
            <li><a href="#" title="Joomla">Joomla! Overview</a></li>
            <li><a href="#" title="Contacts">Contacts</a></li>
            <li><a href="#" title="News feeds">News feeds</a></li>
        </ul>
    </div>
    <div class="other">
        <ul>
            <li><a href="#" title="Poll">Poll</a></li>
            <li><a href="#" title="Search">Search</a></li>
            <li><a href="#" title="Wrapper">Wrapper</a></li>
            <li><a href="#" title="Weblinks">Weblinks</a></li>
            <li><a href="#" title="Joomla">Joomla! Overview</a></li>
            <li><a href="#" title="Contacts">Contacts</a></li>
            <li><a href="#" title="News feeds">News feeds</a></li>
        </ul>
    </div>
</div>

Submenuje bi moral imeti vgnezdene v li-je glavne navigacije, na katere tudi bindaš hover action. Če se ti ne da zajebavat pa si poglej jquery superfish menu. Ne znam povedat bolj po domače:)
da ne pozabim... Ie6 na li-jih ne zazna hover eventa.

Hm.. to sem opazil pri drugih podobnih drop-down menujih, da bi moral submenu biti v li (logično), ampak raje imam simpl in nazorno kodo, zato sem delal na tak način. Očitno bom res mogo v li dat, da se nebom preveč zafrkaval. Hm.. čudno v IE-testerju mi hover event deluje normalno.

IE-tester ni vedno 100% zanesljiv, 100% zanesljivost dobiš samo z Windows XP , ki ima native IE6.

Sicer pa lahko naložiš whatever:hover in bo tudi IE6 podpiral :hover na vseh elementih.

Kot so ti že omenili, najlepše in najlažje ti bo, če zadevo gnezdiš znotraj <li>-ja.
Tutorial in tutorial