Sujet Précédent Sujet Suivant

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:

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
0
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"});
    });
}
0

Discussions similaires

les entrées et les sortées
oussman -
MarsuGL -

2 réponses
Comment retrouver le bouton menu de Tv Tcl
Guy -
MPMP10 -

1 réponse
menu caché
laurent -
ChariduP -

7 réponses
Déblocage du mode hôtel Philips 20HF5234/10
Jo_3 -
TRAORE_2505 -

7 réponses