Menu sur plusieurs niveaux

Fermé
lunagato Messages postés 229 Date d'inscription mercredi 31 octobre 2007 Statut Membre Dernière intervention 2 avril 2013 - 20 nov. 2012 à 12:26
NDOUKI Messages postés 110 Date d'inscription mardi 29 juillet 2008 Statut Membre Dernière intervention 4 novembre 2013 - 21 nov. 2012 à 13:29
Bonjour,
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="https://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
A voir également:

1 réponse

NDOUKI Messages postés 110 Date d'inscription mardi 29 juillet 2008 Statut Membre Dernière intervention 4 novembre 2013 12
21 nov. 2012 à 13:29
SLT,
voici la syntaxe de la fonction hover()

$('selecteur').hover( function1(){},function2(){});


function1 est le survol
function2 est le non-survol

bon courage!
0