Menu avec Jquery show() hide() - Problème de clignotement
Résolu
jemsss
Messages postés
188
Date d'inscription
Statut
Membre
Dernière intervention
-
jemsss Messages postés 188 Date d'inscription Statut Membre Dernière intervention -
jemsss Messages postés 188 Date d'inscription Statut Membre Dernière intervention -
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 :
Fichier HTML
Fichier CSS
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
- Usb show - Télécharger - Sauvegarde
- Menu déroulant excel - Guide
- Show key plus - Télécharger - Utilitaires
- Canon quick menu - Télécharger - Utilitaires
- Windows 11 menu contextuel classique - Guide
2 réponses
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"});
});
}