Voila, je suis en train de faire un menu déroulant (rubrique et sous-rubrique) et je ne souhaite pas utiliser l'attribut hover. Je souhaite afficher les sous rubriques grâce à jquery (javascript).
Par défaut tout les dd sont cachés grâce à du css. (display:none).
Dans l'exécution de la page, lorsque je serais sur une balise dt, j'affiche le bon sous menu, en indiquant une nouvelle propriété style, (display:block).
Donc voici le code javascript que j'utilise actuellement.
$(document).ready(function() {
//bloque les click sur les menus présentant des sous-menus
$("#menu dl dt.desactive").click(function(event){
event.preventDefault();
});
//apparition du sous menu
$("#menu dt.desactive").mouseover(function(){
//cache tous les sous menu (dd)
$("dd").css('display','none');
//récuperer la bonne position du curseur (souris)
var cursore=$(this);
//récupérer le bon sous-menu à afficher
var ssmenu = cursore.next("dd");
//affiche le bon sous-menu
ssmenu.css('display','block');
});
});
Ce code n'est pas encore fini, je n'arrive pas à voir quel code faire pour faire disparaitre mon sous menu, lorsque je ne suis plus sur le menu.
Quelqu'un verrait-il comment faire pour que mon menu disparaisse lorsque je ne suis plus sur mon menu.
Merci pour ta réponse. Si je comprend bien ta réponse, tu me dis qu'il vaut mieux utiliser les listes imbriqués (ul et li) plutôt que les balises d, dt et dl.
Ok, pour moi, le but est que mon menu fonctionne.
Il devrait donc ressembler à un truc dans ce genre:
Tu as fais une petite erreur. Dans mon menu, je veux afficher les sous-rubriques. Avec cette ligne $('#menu ul').css('display', 'none'); , je cache directement tout mon menu. Voici la correction, ton code m'a bien aidé:
$(document).ready(function() {
$("#menu ul li.desactive a").click(function(event){
event.preventDefault();
});
$('#menu ul ul').css('display', 'none');
$('#menu ul > li').mouseover(function() {
$(this).children('ul').css('display', 'block');
});
$('#menu ul > li').mouseout(function() {
$(this).children('ul').css('display', 'none');
});
});
Cependant, j'ai un petit problème, dans une des pages du site que je prépare via cmsms (made in simple), j'ai un map google qui est inséré par le module google. Cette map passe tout le temps au dessus du menu déroulant:
Quelqu'un aurait-il une idée pour que le menu déroulant s'affiche au dessus?
Merci en tout cas jordan.
Bonjour à tous, je relance mon problème car sous IE, j'ai un défaut, mon menu ne fonctionne pas: Mon site
En fait lorsque j'arrive soit au 2nd ou au 3ème rang du sous menu, le sous menu disparait, comme si l'effet mouseover() disparaissait.
Quelqu'un pourrait-il tester sous Internet explorer pour voir s'il s'agit d'un bug local si tout le monde là. Le bug serait sous Internet Explorer 7. Sur le 8, il n'y a pas de problème.
pareil, mais c'est qd même bizarre, sa ne le fait que sous ie7.
Dommage, impossible de mettre ma signature
Fonctionnement d'un menu sans l'attribut hover
× Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
× Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.