11548 sujets

JavaScript, DOM et API Web HTML5

Menu déroulant jQuery

Bonjour!
Pour mon projet j'ai créer un menu déroulant. Au début c'était du full css, mais après plusieurs commentaire quant à l'accéssibilité et la complexité de mon code, j'ai tout revue.

J'ai donc réduit le code de mon menu, puis intégré du jQuery pour créer des effets de survol et de déroulement à l'aide de tuto trouvé sur le net.

À l'heure qu'il est 2 problématiques de pose à moi.
1. mon code pour le roundies,js n'est pas pris en compte sous iE, alors que sur ma page teste tout fonctionne très bien. Le chemin vers le fichier est le bon.
2. Comment faire en sorte que le menu soi accessible pour la navigation au clavier?

-http://www.spypoint.com/2010/FR/accueil.html

Mes codes js

<!--[if lte IE 8]>
<script type="text/javascript" src="../2010/js/roundies.js"></script>
<![endif]-->
<script type="text/javascript">
DD_roundies.addRule('#menu ul.niveau2', '0 0 10px 10px'); 
DD_roundies.addRule('#menu ul.niveau3', '0 10px 10px 10px');
</script>

<script type="text/javascript" src="../2010/js/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
	$('ul.niveau2', 'ul.niveau3').css({display: "none"}); // Opera Fix
	
	$('ul.niveau1 li').hover(function(){
		$(this).find('ul.niveau2').css({visibility: "visible",display: "none"}).slideToggle(400);
		},function(){
		$(this).find('ul.niveau2').toggle(300);
	});
	$('ul.niveau2 li').hover(function(){
		$(this).find('ul.niveau3').css({visibility: "visible",display: "none"}).slideToggle(400);
		},function(){
		$(this).find('ul.niveau3').slideToggle(200);
	});
});

$(document).ready(function(){
	menu();
});
</script>


Donc, si vous avez des pistes concernant le 2ième point, ça serait très apprécié! Smiley ravi
Modifié par juliesunset (18 Aug 2014 - 22:00)
Salut Julie,

je suis allé faire un tour sur ton site vite fait avec IE8 et ma page charge indéfiniement, il y a effectivement un problème avec DD_Roundies (je te laisse voir l'image jointe)

pour la deuxième question : aucune idée, je me suis jamais posé la question, désolé Smiley confused

J'ai une autre remarque, complètement hors-sujet, mais si j'avais un menu déroulant, j'aurai mis un signe de type ">" à coté des titres qui comportent un sous-menu.

Voilà, en espérant t'avoir été utile...
haktoo

upload/26394-site-IE8.JPG
Modifié par haktoo (21 Jan 2010 - 10:06)
Merci pour ta réponse.
J'avais effectivement remarqué le chargement indéfini, mais ce message ne s'affichait pas. Merci de ta remarque, donc, maintenant reste à trouvé le pourquoi de la chose...

Pour les flèche j'y avais pensé, mais je ne sais pas trop comment les intégrés... avec une class spécifique sur les menus concerné?

Pour le point no.2, je pense avoir trouvé une piste. Avec ".focus" je pense que ça pourrais fonctionné, mais j'ignore encore comment l'intégré à mon code... Si quelqu'un peu me dire si je suis sur la bonne voie et me donner une autre piste à ce sujet... Smiley biggrin
J'espère que tu as pu trouver l'erreur dans ton script... Smiley biggrin

Pour les petits signes ">", tu créés une petite icone qui va bien et tu appliques une classe aux menus qui ont un sous-menu, comme celle-là par exemple :

.sousmenu {
    background-image: url('../images/fleche-droite.png');
    background-repeat: no-repeat;
    background-position: right;
}
PS: je viens juste de remarquer mais normalement, tu devrais avoir une seule fois cette méthode, non? :

$(document).ready(function(){ 
    //...
});

Elle sert à charger tes méthodes JS, une fois que ta page est entièrement chargée. Tu peux donc tout regrouper dans une seule méthode si je ne me trompe pas...
Pour quelque chose de plus digeste que le menu déroulant d'Aurélien Levy, le plugin Superfish pour jQuery est pas mal.
'lut,

Florent V. a écrit :
Pour quelque chose de plus digeste que le menu déroulant d'Aurélien Levy, le plugin Superfish pour jQuery est pas mal.
C'est vrai qu'il est sympa... il manque juste un état "déjà déplié" en cas de JavaScript désactivé. Smiley murf
Wow! Merci pour vos réponses. Désolé de ne pas être revenu avant, ne travaillant que 4 jours/semaines, je n'ais pas accès à mon projet les fin de semaine! Smiley langue

Pour le chargement indéfini, je n'ai pas trouvé exactement ce qu'il en est, mais semblerais que ce soi dû à mon slider. Si je l'enlève la page se charge très bien.

Haktoo: concernant les flèches, j'ai dù faire quelque chose de semblable à ce que tu m'as donné.

Merci pour les liens, je regarde ça de suite!
Bon j'ai fouillé un peu le code de "Superfish", le code est plutôt compliqué à comparé du mien. Du coup je sais pas trop comment intégrer ça à mon menu...

Je n'ai toujours pas trouvé de solution quant au chargement indéfini de la page d'accueil sous iE... le code roundies.js n'est toujours pas pris en compte non plus... Smiley decu
Sujet clos
Aller à