Menu déroulant CSS avec PNG transparent

[Zial]

Voila, il y a quelques semaines j'avais mit sur ce forum un menu en css en png transparent, j'ai travaillé plusieurs heures pour arrivé enfin à quelques choses de très bien. J'en ai fait un tutoriel étape par étape. Je vous invite donc à regarder le résultat

Menu déroulant CSS avec PNG transparent v.1.03

Voici le tutoriel cliquez ici

J'espère que vous apprécierai le résultat

[captain_torche]

C'est très sympa, mais je te conseillerais de mettre une image de fond derrière ton menu, histoire de voir véritablement le menu en action ...

[ams51]

Ce menu me plait

même remarque. Une image de fond plus détaillée et contrastée mettrait mieux en valeur le menu.

[Zial]

Voila, j'ai changer l'image de font, on voit mieux la transparencee, Merci du conseil !!!

[TheRec]

Oui, l'amélioration au niveau de la sémantique est notable ! Une unordered list est vraiment plus appropriée qu'une liste de définition dans le cadre d'un menu.

Par contre, est-ce cela qui t'empêche de réaliser des sous-menus comme tu l'avais fait dans cette version ?

Après quelques tests, voici mes constations :

Le rendu dans Firefox 1.5.x (Windows XP et Mac OSX...enfin c'est la même chose de toute façon grosso modo), Safari 1.3.1 (Mac OSX), Opera 8.5 et 7.5 (Windows XP) est correcte et accessible avec ou sans Javascript. C'est ceux que j'appelle des navigateurs modernes (pas de troll, je constate juste que ce sont les navigateurs qui supportent le plus de techniques "modernes" et qui sont activement développés).

Par contre sous IE6 (Windows XP), sans Javascript les sous menu ne s'affichent pas et les images PNG avec transparence alpha ne sont plus affichées (normal, les filtres se basent sur cela, je ne t'apprendrais rien). Mais cela rend le menu inaccessible aux personne ayant Javascript désactivé, mais utilisant tout de même les feuilles de style (ils sont plus nombreux qu'on le pense, les personnes travaillant dans des grandes entreprises en font partie...selon la stratégie de sécurité de l'entreprise bien entendu).

Sous IE7 Beta 2 (Windows XP), le menu est inaccessible par la souris... en fait il semble que Microsoft ait changé le comportement de la unordered list pour revenir à une interprétation pareille à celle de IE 5.5 au niveau des margin et padding...simplement sous IE5.5 cela fonctionne avec la souris et sous IE7 Beta 2 lorsqu'on sort la souris de l'élément <li> déclencheur il "ferme" le menu... cela reste une version Beta, si tu es sûr que le comportement est juste, essaie d'attendre la version finale pour effectuer des tests.

Pour information, IE 5.2 MAC (qui n'est plus officiellement supporté par Microsoft depuis le 31 janvier 2006) le menu n'est pas du tout affiché...mais cela a une importance relative (quoique, beaucoup de journalistes utilisent ce navigateur...enfin maintenant Microsoft leur conseille d'utiliser Safari, alors qu'ils aillent se plaindre ailleurs )

Sinon rien de spécial à signer... ha si, l'inaccessibilité du menu est comblée lorsque les styles sont désactivés, mais les personnes n'ayant pas la possibilité d'avoir Javascript activé, ont parfois tout de même envie d'utiliser les feuilles de style :S

Finalement, Félicitation pour ce menu et ce tutoriel et merci de les avoir partagés avec nous, j'espère que mes remarques te serviront !

P.S. : Je peux sembler négatif, mais en fait je ne fais que des constatations pour t'aider à développer un menu encore plus efficace... ces remarques on pour but dêtre constructives

[Zial]

Pour les sous-menu comme l'autre version, je ne suis pas encore rendu à tester. Je travailles encore sur ce menu horizontal. D'après moi il ne devrait y avoir pas de problème. Encore faut-il du temps

Pour le javascript, j'explique dans le tutoriel comment éviter le problème si il est désactivé. Mettre des liens dans les pages de contenu pour pouvoir accéder à ces sous-menus.

Pour Internet Explorer 7 ... j'ai pas testé du tout, ils sont toujours en modification, alors j'attend ... sacré microsoft !!!

Petite variante de mon ancien menu, il fonction sur Netsacpe 7 et il est sémantiquement mieux. Bon reste à voir comment en faire un en Vertcial ... encore des heures de plaisirs.

Merci beaucoup pour les commentaires, j'apprécie, ça me donne des infos importante pour la progression de ce menu.

Question ??? Si je comprend bien, les menus déroulant ne sont pas conseillé, il utilise pratiquement tous du javascript !!! Enfin dans explorer ! L'idée je crois, c'est de savoir le public cible de notre site web, si il est dédié à des graphistes, alors ce n'Est pas trop gênant, mais si on touche des grandes entreprises, alors faut voir !!

Encore merci !

[TheRec]

En fait tant qu'il est sémantique, ton menu sera accessible car sans la feuille de style il sera affiché correctement.

Maintenant, il ne faut pas perdre de vue la majorité de ton public, ils vont avoir les feuilles de style activées (à moins que ton public cible soit dans l'autre "camp", mais ce sont des cas vraiment particuliers). Donc il faut tout de même que les menus fonctionnent même si Javascript est désactivé et qu'ils utilisent la feuille de style.

L'accessibilité ne se limite pas à la sémantique, cela regroupe également l'accès à tes pages par tout type de navigateurs et tout type d'équipements (Ordinateur, PDA, ...), ...

Je t'ai décrit les cas les plus courant, mais c'est "impossible" de prévoir tout les cas bien évidemment

[Zial]

Je t'ai décrit les cas les plus courant, mais c'est "impossible" de prévoir tout les cas bien évidemment

Je sais que c'est impossible de prévoir, si on prévoyait tout, on aurait envrions 1000 ligne de code seulement pour un petit menu et encore la, le référencement en serait touché . En tout cas merci pour les tests, c'est très apprécié

Modifié 9 Juin 2006 par Zial

[Cleden]

Très joli ton menu, je cherche un site ou je pourrais l'intégrer

[Zial]

Cleden, envoi moi le liens du site que tu l'auras intégré que j'aille voir ça