Menu déroulant

Salut,
j'ai voulu essayer la rédaction d'un tutoriel. J'en entendait parler sur les améliorations de chaque version, sans jamais avoir eu l'occasion de voir à quoi cela ressemblait. Puis quitte à avoir commencé la rédaction d'un (petit) tutoriel autant le terminer et vous le montrer

Donc voilà un petit tutoriel pour apprendre à faire un menu déroulant en HTML/CSS : http://zestedesavoir.com/tutoriels/off/674/menu-deroulant/?version=ca09e00ee9663f285d91bf6526d8e9fff607694f

Petites précisions sur moi :

Petites précisions sur le code choisi pour le tuto :

• Après avoir écrit le tuto, je suis allé voir des tutos similaires sur le net. J'ai remarqué une différence avec mon code : il transforme leurs balises ul en block, alors que moi je rajoute une div un nav à la place. Je trouve ça plus explicite.
• Je vais surement rajouter d'autres points

Petites précision sur le tuto :

• Je voulais mettre le tuto dans la catégorie CSS mais je ne l'ai pas trouvé, et je n'ai pas trouvé comment la créer ou demander sa création.
• Je vais compléter l’entête avec quelques chose d'un peu plus attrayant et une présentation de ce qu'est un menu déroulant, avec quelques sites d'exemples
• Je vais rajouter un ou plusieurs liens pour chaque notion à savoir, qui mèneront vers ZdS ou wikipedia ou w3c ou …
• J'ai prévu des liens tout au long du tuto, mais je ne les ai pas encore mis (je m'en occupe dans les jours qui viennent)
• J'hésite à fusionner les deux premières parties, quand pensez vous?

N'hésitez pas à me faire des retours sur tout ce qui vous passe par la tête (tout en restant indulgent )

Mon retour sur l'éditeur en ligne de tuto : A VENIR (sera aussi posté sur le sujet prévu à cet effet)

To do list :

• Remplacer la div de menu par un nav
• ajouter le tuto dans la partie CSS
• rajouter les liens des notions dans l'entête
• Rajouter les liens d'exemple
• ?? Fusionner les deux premières parties ??
• Remplacer, dans la méthode n°1, la propriété left par display
• Rajouter navigation au clavier
• Enlever le nav du sous-menu (les exemples ne sont pas encore à jour)

Sympa ce petit tuto.

Merci

Change div#menu par nav, c'est mieux.

Effectivement, je vais modifier ça.

Perso, j'aime pas la technique de virer l’élément en dehors de l'écran, avec les 10000 px. Je sais pas pourquoi, mais ça ne me semble pas une bonne idée. Pourquoi pas visibility: hidden; ?

Moi aussi, je trouve ça "sale", mais je crois bien que c'est la solution qui est compatible avec les navigateurs les plus vieux…

visibility : hidden marcherait, mais le block de sous-menu serait toujours la (juste invisible), donc cela poserait les même problèmes que dans la deuxième méthode avant l'utilisation des z-index.

Je vais rajouter ta solution sans la liste des possibilités pour faire disparaitre le sous-menu (je vais rajouter display : none aussi, tant que on y est )

Je voulais mettre le tuto dans la catégorie CSS mais je ne l'ai pas trouvé, et je n'ai pas trouvé comment la créer ou demander sa création.

Quand tu enverras le tuto en validation il suffira d'en faire la demande a ton validateur (un message arrive bientôt sur l'interface de rédaction pour éclaircir cela).

Mon retour sur l'éditeur en ligne de tuto : A VENIR

Si tu veux il existe un sujet pour ca qui centralise les retours d'auteurs : https://zestedesavoir.com/forums/sujet/1695/retours-dexperiences-des-auteurs/

Quand tu enverras le tuto en validation il suffira d'en faire la demande a ton validateur (un message arrive bientôt sur l'interface de rédaction pour éclaircir cela).

Ok, merci de ta réponse

Si tu veux il existe un sujet […] qui centralise les retours d'auteurs

J'y ferai mes retours là-bas alors

Bonjour, !

La beta du tutoriel a été mise à jour.

Merci pour vos relectures

EDIT : Je suppose que cela a déjà été signalé, mais c'est un peu violent d'éditer en supprimant le message initial (le premier du sujet), par un message similaire à celui là, quand on met à jour la bêta.

EDIT 2 : Je suis perdu, la bêta n'a pas été mise à jour… étrange O.o

EDIT 3 : Je viens de comprendre, c'est le lien qui a changé ^^'

Je comprends pas pourquoi tu te compliques la vie avec ton sous-menu à 10000 pixels. Perso, quand je fais ce genre de menu, le display: block/none set le plus pratique.

Gaffe à ton orthographe, j'ai vu plusieurs fautes.

Ce serait pas mal que tu fournisses un lien pour tester (ou plusieurs, tout au long du tuto), par exemple sur jsFiddle ou Codepen si tu n'as pas d’hébergement.

Je comprends pas pourquoi tu te compliques la vie avec ton sous-menu à 10000 pixels. Perso, quand je fais ce genre de menu, le display: block/none set le plus pratique.

Oui, mais ce n'est pas compatible avec les vieilles versions d'IE…

Gaffe à ton orthographe, j'ai vu plusieurs fautes.

Je vais essayer d'en dénicher un maximum, mais je n'ai jamais été particulièrement bon à ce jeu là

C'est exactement ce qui est prévu (là où il y a écrit "MON LIEN")

Merci d'avoir relu la bêta

@Thunderseb :
OK, je viens de voir les compatibilités IE et si j'utilise le sélecteur ">" alors que j'utilise display ou left, ça n'a plus d'importance car ils sont tout les deux gérés, si ">" est pris en charge.

Je le rajoute à la to do list

Bonjour, !

La beta du tutoriel a été mise à jour.

Merci pour vos relectures

Changements :

• Utilisation de la balise nav à la place de la div
• Changement de la méthode n°1 (utilisation de display à la place de left)

Bonjour, !

La beta du tutoriel a été mise à jour.

Merci pour vos relectures

Changements :

• Ajout des liens de tests

Incompatible ? Depuis quand les anciennes versions de CSS sont pas compatibles avec les navigateurs récents ? Ça irait à l'opposé des principes de bases du W3C…

CSS1 datant de 1996, IE 3.0 le gère déjà partiellement. IE8 gère CSS 2.1 et quelques morceaux de CSS3 (surtout parce que Microsoft a proposé certaines propriétés à l'époque, avant même qu'elles soient validées par le W3C).

Enfin être compatible IE8 ou n'utiliser que du CSS2.1 ne signifie pas que tous les téléphones afficheront le site correctement. La preuve en est que position: fixed (CSS 2.1 donc) est mal (voire très mal) géré sous Android < 3.0.

Et pitié, évitez de citer W3Schools comme une référence, ça fait des années qu'on le répète…

@SeooX : pourquoi mettre des balises nav pour tes sous-menus sachant que tu es déjà dans une balise nav ? Contente-toi d'utiliser des ul directement : ça allège le DOM et ça évite la répétition.

Autre gros problème de ton tuto : le menu est inutilisable au clavier, donc pauvre niveau accessibilité, il faudrait grandement travailler sur ce point (j'ai pas lu ton code, mais ça devrait pas être bien compliqué à faire).

Je voulais éviter de compliquer la chose en transformant la sous-liste en bloc… Je le rajoute à la to do list

… Hmmm… Tu veux dire en utilisant la touche 'tab'? Je ne l'utilise que pour les formulaires personnellement. Mais effectivement je vais le rajouter.

En tout cas, merci @viki de ta réponse

Oui, c'est ça. Beaucoup de gens naviguent au clavier, moi y compris quand je n'ai pas de souris (ce qui arrive souvent sur un ordi portable : même si le touchpad rend service, naviguer au clavier est plus rapide).

Si tu veux j'ai fait un menu dans le même genre récemment, tu peux t'en inspirer : http://codepen.io/viki53/pen/jEqQXG

Il est pas super agréable visuellement au clavier, mais ça a le mérite de fonctionner (et sans JS).

W3Schools et W3C n'ont rien à voir l'un avec l'autre, c'est bien là le problème. W3Schools est réputé pour être rempli d'erreurs et de contenus pas à jours (car maintenu par une société privée sans aucun rapport avec le W3C).

Le sélecteur > fait partie de CSS2 (pas 2.1) et est supporté par IE 8 (voire 7 avec quelques bugs) :

• http://css-tricks.com/child-and-sibling-selectors/
• http://msdn.microsoft.com/en-us/library/ie/aa358819(v=vs.85).aspx (doc officielle Microsoft)
• http://meyerweb.com/eric/articles/webrev/200006b.html

Il y a peut-être des edge-cases qui foirent (par exemple en mode Quirks, chose logique vu que ça utilise le rendu d'IE 5) mais officiellement ça fonctionne (en ajoutant le shiv si nécessaire).

Bref, pas de condescendance, juste des faits.

P.S. : à la base je faisais surtout référence au terme versions ultérieures qui donnait un sens un peu étrange à la phrase, mais bon…

Bonjour, !

La beta du tutoriel a été mise à jour.

Merci pour vos relectures

Bonjour,

La bêta du contenu « Menu déroulant » a été désactivée.