Menu CSS Vertical et Horizontal

[Zial]

Voici un menu que j'ai fini par terminer avec plusieurs heures de recherche. Je met le lien qui explique chaques étapes passés. Bientôt je terminerai un tutoriel vous expliquant chaques étapes de ce menu. Si il y a des erreurs de comptabilités avec des navigateurs non mentionné, merci de m'en faire part.

Menu CSS avec PNG transparent

Caractéristiques :

-> Menu déroulant en CSS avec PNG transparent

-> Valide W3C XHTML strict 1.1

-> Valide W3C CSS

-> Optimiser SEO

Navigateur supporté :

-> Explorer 5+ (PC Seulement)

-> Firefox

-> Opera

-> Netscape 8

-> Safari

-> Mozilla

-> Camino

-> Sunrise

Navigateur Non Supporté

- Netscape 7

- Explorer 5 (MAC)

Note:

-> Le validateur W3C ne reconnais pas la propriété Behavior dans le fichier behavior.css mais ce fichier est utile seulement pour Explorer pour que les tags SPAN et DIV puisse avoir un Hover.

-> Pour la transparence des PNG, le menu utilise un script PHP dans le fichier CSS transformé en PHP. Ce script permet la transparence des png partout dans la page.

Voila si vous avez des modifications dites-le moi. Merci !!!

Modifié 10 Avril 2006 par Zial

[Dudu]

Bonjour, bienvenue.

Intéressant.

Si je peux juste me permettre quelques petites remarques:

- Les noms des liens disparaissent au survol avec Safari 1.2: est-ce réellement voulu ?

- tu n'es pas valide XHTML 1.1. Ce DOCTYPE n'autorise pas l'envoi du contenu avec le type MIME text/html, mais uniquement avec application/xhtml+xml. XHTML 1.1 est de toute façon encore beaucoup trop jeune pour être utilisé en production; et il n'y a aucun intérêt à "frimer avec un gros DOCTYPE"

(Le validateur du w3c ne référence pas cette erreur: c'est un bug connu)

Cordialement

edit: à ce propos, un lien fort intéressant: Servir du XHTML en tant que text/html jugé néfaste

[Zial]

Merci beaucoup pour le liens, j'ai modifier text/css pour application/xhtml+xml et tout marche normalement dans mes navigateurs. De toute façon c'est seulement pour dire que le code est certifié. Ensuite, j'ai apporté quelques petites modification, j'aimerais savoir si le bug apparait toujours sur Safari !! Merci !

[TheRec]

Bonjour,

Bravo pour ce menu,

Je viens de tester avec Safari 1.3.1, aucun problème... (c'est peut être une question de version...alors attends la réponse de Dudu avant de crier victoire )

Je vais y aller de mon commentaire aussi, Dudu ne t'a pas préciser une chose c'est que sémantiquement ce menu n'est pas "correcte", c'est une détail...mais lorsque tu représente une hiérarchie pour ton utilisateur (menu > sous-menus) disposant de toutes ses facultés (visuelles, mentales, ...) et utilisant la feuille de style, elle devrait être accessible à ceux ayant un ou des handicaps.

La structure des <div> imbriqués peut laisser penser que la structure est hiérarchique pour l'utilisateur, mais vis à vis d'un lecteur d'écran elle n'a pas d'importance. Il faudrait utiliser à choix ou de concert, les balises suivantes :

List Module*

    dl, dt, dd, ol, ul, li

Ces éléments permettent de refléter sémantiquement une hiérarchie (ils peuvent être utilisés conjointement).

Ce n'est qu'un détail, qui à son importance au niveau de l'accessibilité, à toi de voir si tu veux relever le défi d'utiliser ces structures Actuellement ton menu reste accessible même sans feuille de style.

Félicitation en tous cas pour ce menu et merci de nous l'avoir montré. Et surtout bel effort pour qu'il soit compatible avec tous ces navigateurs !

[Zial]

Merci beaucoup de ces commentaires instructifs, je vais voir si je peux pas le faire avec des UL LI, mais je crois avoir essayé et il y avais un bug. C'est facile de faire un menu comme ça tant qu'on a pas de PNG transparent, c'est lui qui complique les choses. Le background en PNG transparent est transformer et on ne peux décaller le background, c'est pourquoi je décalle les DIV de leurs positions LEFT.

Quand j'ai essayé les UL LI j'ai rencontré un bug de navigation sous explorer qui ne mettait pas le lien la grandeur de ma Boite. Enfin je vais réessayer tout de même. Mon but est simple, rendre accessible ce genre de menu avec le PNG transparent, j'ai encore rien vus de ce genre donc à part la sémantique "incorrecte" de ce menu, il est pas loin de la perfection, enfin c'est le but ... être le plus accessible à tous.

Avant j'avais fait le menu tout en DIV au lieu des SPAN, et il y avait un problème de W3C alors je l'ai changé pour ces SPAN, mais avec les DIV le menu se retrouvait sans CSS un par dessus l'autre ordonnée, bref comme une liste mais sans "Bullet ou Point". Était-ce correcte dans ce genre de position ?

Bon voilà quelques étails sur ce menu, si vous avez d'autres recommendations, je suis toute ouïe.

[captain_torche]

à part la sémantique "incorrecte" de ce menu, il est pas loin de la perfection, enfin c'est le but ... être le plus accessible à tous.

Ben, comme tu parles d'accessibilité, il est essentiel de respecter une bonne sémantique, pour ceux qui regarderaient le site dans un navigateur texte (par exemple).

Sinon, ton menu est effectivement très sympa.

[Zial]

Je travail la-dessus, sur la sématique, j'ai presque réussit à faire quelques choses sématiquement excellent. Merci à tous pour les commentaires constructifs, ça aide à améliorer nos créations.

[jeanpierre949]

Je pose une question: OU est l'interet d'utiliser le png a tous prix ?

Sacrifier + - la semantique , utiliser des scripts .htc, .php, .js, alors que le gif se gere tout simplement

[TheRec]

Bonjour,

Pourquoi plutôt PNG...

• La transparence alpha (transulcidité)
  
• Un format libre (CompuServe a un brevet pour GIF)
  
• Un format qui fait l'office d'une recommandation du W3C
  
• La taille de fichier bien souvent plus petite qu'en GIF
  
• 2^48 couleurs (48bits) contre 256 couleurs (8bits) pour GIF
  
• Lors qu'on sauve un PNG, qu'on le restaure et qu'on le re-sauve il ne perd pas en qualité
  
• L'utilisation de "hack" (PHP et JavaScript en l'occurence) pour amélioré le support de PNG ne rend pas inaccessibles images dans les vieux navigateur lorsque JavaScript est désactivé...(les fonctionalités de base sont conservées)
  
• ...
  

Faisons une liste de ce qui favorise l'utilisation de GIF.

• Il permet de faire de fichiers animés (je ne commentais même pas ceci )
  
• Il est supporté pas de vieux naviateurs qui ne supportent pas PNG
  

Maintenant c'est vrai que l'utilisation de fichier .HTC implique que lrosque Javscript est désactivé, le menu ne fonctionnera plus... Dans le cas de ce menu cela affecte seulement IE à voir le code source du .htc ... Cela rends le menu totalement inaccessible pour ces utilisateurs, je n'avais pas remarqué ceci lorsque j'ai regardé le code pour la première fois, un peu en vitesse je l'admet.

[Zial]

Merci TheRec pour cette comparaison très pertinente, je n'aurais pas pus expliquer mieux que ça.

Pour l'activation du javascript, si le site web est bien fait, il est toujours possible de naviguer dans le menu mais sans les sous-menu, donc si on arrive sur une page principale, on peux y retrouver les liens des sous-menu.

Je sais pas ce que vous en pensez mais pour le peu de gens dans explorer qui ont le javascript désactivé, c'est peu non ?

Je peu peut-être mettre un zone NOSCRIPT ???? Qu'en pensez-vous ?

[TheRec]

L'accessibilité c'est l'art de n'oublier personne (aussi petit sa minorité soit-elle) lorsque tu développes un système.

On dit (les études sur le trafic Internet) généralement qu'environ 10% des utilisateurs naviguent sans Javascript ou autre langage de script côté client activé...Ceci par choix ou par obligation. Cela te donne un ordre d'idée...Si tu néglige ces 10% c'est que ton but n'est pas l'accessibilité pour "tous"

Pour le <noscript> pourquoi pas...tant que tu ne te limites pas à "Vous devez activer Javascript pour voir mon menu" et que cela représente une alternative qui permet une navigation sur les mêmes pages qui sont accessible avec Javsscript activé...

[koss70]

Bonsoir,

Je suis nouvelle ici. Mais le sujet m'interesse... surtout lorsque l'on parle d'accessibilité!

Ce site est-t-il validé pour les non-voyants? Il ne faut pas négliger les internautes souffrant de ce handicap ou même ceux qui ont une vue faible et qui se serve donc d'une écran particulier voir d'un système vocal. Donc avant toute chose, fermer les yeux et voir si tel que les CSS sont hiérarchisés et le (X)HTML commenté, ils peuvent être décryptés par les supports vocaux ou braille.

Un petit tour sur l'excellent weblog Blog & Blues merite qu'on s'y arrête!

_AT_TheRec, merci pour les infos sur le PNG, j'ignorai certains points, notamment:

Un format qui fait l'office d'une recommandation du W3C