Menu avec Jquery show() hide() - Problème de clignotement

Résolu/Fermé

jemsss Messages postés 188 Date d'inscription jeudi 28 août 2008 Statut Membre Dernière intervention 28 novembre 2019 - Modifié par jemsss le 15/05/2013 à 19:22
jemsss Messages postés 188 Date d'inscription jeudi 28 août 2008 Statut Membre Dernière intervention 28 novembre 2019 - 16 mai 2013 à 11:43

Bonjour,
Je cherche depuis des heures mais là je sèche.
J'ouvre les onglets de mon menu avec un effet Jquery. Mon problème est que lorsque je place rapidement le curseur sur les sous-rubriques, celles-ci s'ouvrent et se ferment sans cesse (voir http://www.kit74.fr/menu-test.html).
Savez-vous comment je peux résoudre ce problème?
Merci d'avance pour votre aide...

Fichier Javascript :

function menuHover() {
 $('.menu li').hover(
  function(){
   $(this).children("ul").show(1000);
  },function(){
   $(this).children("ul").hide(50);
  });
}

Fichier HTML

<head>
  <title>Test menu</title>
  <link rel="stylesheet" href="style.css" type="text/css" />
  <script src="script.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
</head>
<body>
  <script type="text/javascript">
    $(document).ready(function() { menuHover(); });
  </script>
  
  <ul class="menu">
    <li>
      <a href="#" >Lien 1</a>
      <ul>
        <li><a href="#" >Lien 1.1</a></li>
        <li><a href="#" >Lien 1.2</a>
          <ul>
            <li><a href="#" >Lien 1.2.1</a></li>
            ...
          </ul>
        </li>
      </ul>
    </li>
    ...
    <li><a href="#" >Lien 7</a></li>
  </ul>
</body>
</html>

Fichier CSS

body {
  background : #fff;
  font-family: Arial, sans-serif;
  font-size : 12px;
}
* {
  margin : 0;
  padding : 0;
}
ul, li {
  padding: 0;
  margin: 0;
  list-style: none;
}
ul.menu {
  margin: 30px auto;
  padding: 0;
  height: 20px;
  text-align: center;  
  color: #fff;
  font-weight: bold;
  background: #0085d1;
}
ul.menu a {
  color: inherit;
  text-decoration: none;
}
ul.menu li {
  position: relative;
  display: inline-block;
  width: 100px;
  line-height: 20px;
  cursor: default;
  text-transform: uppercase;
}
ul.menu li:hover{
  background: #005b8e;
}
ul.menu ul{
  position: absolute;
  font-weight: normal;  
  width: 100px;
  display: none;
  left: 0;
  background: #005b8e;
  padding-bottom: 10px;
  -moz-border-bottom-right-radius: 10px;
  -moz-border-bottom-left-radius: 10px;
  -webkit-border-right-radius: 10px;
  -webkit-border-left-radius: 10px;
  border-bottom-right-radius: 10px;
  border-bottom-left-radius: 10px;
}
ul.menu > li > ul{
  border-top: 2px #002d60 solid;
}
ul.menu ul li {
  display: block;
  line-height: 1;
  background: none;
  text-transform: none;
  border-bottom: 1px #0085d1 solid;
  padding: 5px 0;
}
ul.menu ul li:hover {
  background: #f8981c;
  color: #002d60;
}
ul.menu ul ul{
  position: absolute;
  left: 100%;
  top: 0;
  border-left: 4px solid #f8981c;
  color: #fff;
}

A voir également:

Menu avec Jquery show() hide() - Problème de clignotement
Menu déroulant excel - Guide
Telecharger usb show - Télécharger - Sauvegarde
Show key plus - Télécharger - Utilitaires
Menu démarrer windows 11 - Guide
Canon quick menu - Télécharger - Utilitaires

2 réponses

Réponse 1 / 2

jemsss Messages postés 188 Date d'inscription jeudi 28 août 2008 Statut Membre Dernière intervention 28 novembre 2019 17
16 mai 2013 à 10:34

Up svp

Réponse 2 / 2

jemsss Messages postés 188 Date d'inscription jeudi 28 août 2008 Statut Membre Dernière intervention 28 novembre 2019 17
Modifié par jemsss le 16/05/2013 à 11:46

Voici la solution que j'ai trouvée sur un tuto vidéo (https://www.youtube.com/watch?NR=1&v=hev5SoqLhwA&feature=fvwp

function menuHover() {
  $('.menu li').hover(
    function(){
      $("ul:first",this).css({visibility:"visible",display:"none"}).show(500);
    },function(){
      $("ul:first",this).css({visibility:"hidden"});
    });
}

Discussions similaires

les entrées et les sortées

arnaque show cam

Discussions similaires

Newsletters