28172 sujets

CSS et mise en forme, CSS3

Bonjour à tout le monde.

Je viens vers vous avec un soucis de CSS dans le tuto suivant:
http://www.tuto-fr.com/tutoriaux/tutorial-menu-deroulant-css.php

J'ai réadapté ce tuto suivant mes besoins et à priori, il y a quelque chose que je ne dois pas bien faire.

Je vous laisse en juger par vous même à l'adresse suivante en utilisant le navigateur IE7 (le seul où je rencontre ce problème):
http://www.footballclubchallans.fr/mot-president/mot-president/Mp2.html

Vous constaterez que la navigation sur le menu et ses sous menus se passe bien sauf que si vous faites pas exemple ce cheminement:
Equipes --> SENIORS --> GROUPE A --> Equipe
et que vous quittez le menu sur la droite puis revenez sur le menu "Equipes", vous verrez apparaitre les fond des sous menus ouverts ultérieurement.
J'ai découvert que ce phénomène était lié à l'utilisation du float: left sur les <li>. Cependant, si je ne l'utilise pas, je ne peux pas survoler l'ensemble de mes sous menus qui se ferment de manière aléatoire.
Donc si quelqu'un à déjà rencontré ce problème ou aurait une solution, merci de m'en faire part!!

J'ai viré les float left sur la page contact pour vous rendre compte de l'autre phénomène. Essayer d'atteindre le sous menu "tenues officielles" du menu "le club".
Modifié par dread (15 Jun 2009 - 17:22)
Bonjour,

Un menu déroulant sans JavaScript est un bug. En effet, une (bonne) utilisation de JavaScript est nécessaire pour gérer les aspects suivants:

- l'accessibilité du menu déroulant (notamment la possibilité de l'utiliser sans la souris);
- l'ergonomie du menu déroulant (limiter les problèmes de sous-menus qui se referment intempestivement, surprenant le visiteur et lui demandant de répéter son action en se concentrant);
- la compatibilité avec IE6.

Le tutoriel que tu as suivi ne prend en charge que le troisième aspect: la compatibilité IE6. Et il le fait... en utilisant du JavaScript. Le titre du tutoriel est donc un mensonge éhonté. Smiley smile En effet, le fichier csshover.htc est en réalité un script JS (on pourra consulter le contenu de ce fichier pour s'en assurer).

Partant:
1. on va de toute façon utiliser JavaScript pour la compatibilité IE6 (sauf si on s'en fiche);
2. il serait pas mal de gérer les problèmes d'accessibilité et d'ergonomie);
3. on peut donc utiliser un script JS bien conçu qui permet de gérer (relativement bien) ces trois aspects, par exemple le plugin jQuery SuperFish (à combiner au plugin HoverIntent).