11540 sujets

JavaScript, DOM et API Web HTML5

Menu sur plusieurs niveaux

Bonjour,
Je suis actuellement bloqué sur un tout petit problème, j'ai créé un menu sur plusieurs niveaux, c'est à dire une ligne de lien, et quand on survole un lien une nouvelle ligne apparait mais en relative, pas en absolute. Et, tout marche le problème c'est quand on quitte la zone survolable le menu ne disparait pas.
voici le html :
<div id="tabs-container">
        <ul class="tabs">
            <li class="active"><a href="#">Section one</a></li>
            <li><a href="#">Section two</a></li>
            <li><a href="#">Section three</a></li>
            <li><a href="#">Section four</a></li>
        </ul>
    </div>

    <!-- defining top menu -->
    <div id="nav-container">
        <ul class="nav" id="1">
            <!-- defining top menu elements -->
            <li><a href="http://www.script-tutorials.com/">Home</a></li>
            
            <li><a href="#">Menus s#3</a>
            </li>
        </ul>


        <ul class="nav" id="2" style="display:none;">
            <li><a href="#">Menus #5</a></li>
            <li><a href="#">Menus #6</a></li>
            <li><a href="#">Menus #7</a></li>
        </ul>
        <ul class="nav" id="3" style="display:none;">
            <li><a href="#">Menus #8</a></li>
            <li><a href="#">Menus #9</a></li>
            <li><a href="#">Menus #10</a></li>
        </ul>
        <ul class="nav" id="4" style="display:none;">
            <li><a href="#">Menus #11</a></li>
            <li><a href="#">Menus #12</a></li>
        </ul>
    </div>


le javascript : 
$(document).ready(function(){
    $('.tabs li a').hover(function () {
      $('.tabs li').removeClass('active');
      $(this).parent().addClass('active');

      $('.nav').hide();
      var index = $('.tabs li a').index(this);
      $('.nav').eq(index).show();
      return false;
    });

    $('.nav li').has('ul').hover(function(){
        $(this).addClass('current').children('ul').fadeIn();
    }, function() {
        $(this).removeClass('current').children('ul').hide();
    });
});


Je vous remercie d'avance de votre aide
Modifié par gatinho1 (20 Nov 2012 - 12:22)
Sujet clos
Aller à