Menu CSS avec des sous menus

Salut à tous,

Je suis à la recherche d'un menu CSS, j'ai trouvé et cherché dedans la page Galerie de menus en CSS, malheureusement pas trouvé

Je souhaite que les menus se comportent comme ça :

(par défaut)

MENU 1
- menu 1.1
- menu 1.2
- menu 1.3
- menu 1.4

(je parviens à faire cela, aucun problème)

(si on clique menu 1.2)

MENU 1
- menu 1.1
- menu 1.2
--> menu 1.2.1
--> menu 1.2.2
- menu 1.3
- menu 1.4

(si on clique menu 1.3, le menu 1.2 reste ouvert car il faut recliquer pour le faire fermer)

J'ai essayé de trouver avec notre ami Google sans succès...

J'espère que vous saurez m'aider, merci beaucoup d'avance

Bonjour,

Je pense que se comportement se fera grâce au javascript. Avec des fonctions assez simple.

C'est ce que je pensais, je ne parviens pas à trouver avec Google

Salut,
si tu parle de menus déroulants, L'essentiel de la solution se fait en css.
J'aide un webmaster qui à des probleme de menus déroulant et donc j'ai fait
une petite page de démonstration (testée sur tous les navigateurs).
Je l'ai stockée sur mon site
Voilà ce que j'ai à proposer :
Menus déroulant

Salut,

Je te remercie beaucoup de ta contribution, cependant ce n'est pas de ce que je recherche , pour clairfier l'explication de ce que je recherche, je souhaite que les menus fonctionnent de la même façon que l'exploitateur de windows, c'est à dire qu'on peut cliquer pour voir le contenu et encore cliquer dedans, puis faire fermer si besoin.

Comprendez-vous ? Souhaitez-vous que je vous fasse un dessin avec paint ?

Scorpius a écrit :
(testée sur tous les navigateurs)

Salut Scorpius,

malheureusement complètement inaccessible avec javascript désactivé !

Heyoan a écrit :

Salut Scorpius,

malheureusement complètement inaccessible avec javascript désactivé !

J'aimerais que tu me montre un css dynamique ou animé qui marche avec javascript désactivé.

S~C a écrit :
Salut,

Je te remercie beaucoup de ta contribution, cependant ce n'est pas de ce que je recherche , pour clairfier l'explication de ce que je recherche, je souhaite que les menus fonctionnent de la même façon que l'exploitateur de windows, c'est à dire qu'on peut cliquer pour voir le contenu et encore cliquer dedans, puis faire fermer si besoin.

Comprendez-vous ? Souhaitez-vous que je vous fasse un dessin avec paint ?

Si tu parles de menus avec sous menus ce que j'ai montré colle parfaitement avec ce que tu cherches, c'est juste que je n'ai fait qu'une seule arborescence. Il faut que tu regarde le source et que tu l'adapte à tes besoins (le clé pour les sous menus c'est la position absolue pour le container).

Scorpius a écrit :
J'aimerais que tu me montre un css dynamique ou animé qui marche avec javascript désactivé.

Voilà !

C'est vrai que c'est moins sympa sans javascript mais au moins les pages restent accessibles...

Désolé mais ne fonctionne pas sans javascript (à part le fait qu'ils sont affichés par défaut : ILS NE S'ANIMENT PAS, ceci dit sit tu veut faire des sous menus je te souhaite bien du plaisir pour la lisibilité)

La question était : J'aimerais que tu me montre un css dynamique ou animé qui marche avec javascript désactivé.

Je vais être un peu hors sujet, mais il faut arrêter cette bétise concernant
javascript (que certains confondent encore avec java : si tu veux naviguer en toute sécurité tu ferme 99% des sites tu fais des site en "plain text" ou plus simple tu coupes ta connexion internet.
Modifié par Scorpius (06 Oct 2007 - 11:03)

a écrit :
ILS NE S'ANIMENT PAS, ceci dit sit tu veut faire des sous menus je te souhaite bien du plaisir pour la lisibilité) biggrin

Tu vois le contenu ici ce qui est le principal, donc oui ca fonctionne sans JS contrairement à ta solution.

Les utilisateurs ne désactivent pas forcément le JS pour des raisons de sécurité. Parfois ils n'ont pas le choix (pc public par ex) ou leur navigateur ne le supporte pas bien (navigateurs mobiles).

Salut,

Scorpius a écrit :
Désolé mais ne fonctionne pas sans javascript (à part le fait qu'ils sont affichés par défaut : ILS NE S'ANIMENT PAS, ceci dit sit tu veut faire des sous menus je te souhaite bien du plaisir pour la lisibilité)

Il faut faire une distinction entre "le menu bouge" et "le menu est accessible".

Si on masque des éléments par défaut en utilisant directement les propriétés CSS (visibility ou display), on risque de rendre le sous-menu invisible à toute une série de visiteurs : ceux qui ont désactivé JS, ceux qui utilisent un navigateur texte, ceux qui utilisent un lecteur d'écran, ...

En utilisant JS pour cacher les sous-menus au chargement de la page, on s'assure que les sous-menus resteront accessibles pour tous : le contenu est disponible pour tous les visiteurs ! C'est nettement plus important que d'avoir des sous-menus qui bougent dans tous les sens.

Un menu qui "fonctionne" est (ou devrait être, en tous cas) avant tout un menu qui permet de naviguer dans le site, pas un menu qui clignote dans toutes les couleurs

Je ne vais pas me lancer dans ce genre de débat stérile. ca ne mène à rien.

Ma question etait : Un CSS animé qui fonctionne sans javascript.
en bon français ca donne : quelque chose que l'on peu animer sans javascript.
pour l'accessibilité des pages, c'est autre chose et il y a d'autres solutions :
script et noscript ou encore php (tu peux faire ta page avec les fonctions javascript que tu désire pour défouler ta créativité et une page alternative plus standard pour les autres navigateurs enfin bref).

mais ce que S~C voulait ce sont des menus qui fonctionne comme l'explorateur windows c'est à dire qui s'ouvrent et qui se ferment.
Donc qui doivent être ouvert ou fermés donc animés. Sans javascript
Il faut oublier cette solution surtout si les menu doivent comporter des sous menu.

La solution que j'ai proposé ne part que de ce principe. Après libre au webmaster de l'utiliser ou pas ou de l'adapter à ces considerations.
pour info le code à été fait en 10 minutes.

Scorpius a écrit :
Je ne vais pas me lancer dans ce genre de débat stérile. ca ne mène à rien.

Je ne trouve pas que le débat soit stérile. Le menu que tu as proposé peut être amélioré facilement pour devenir utilisable dans tous les cas de figure. De façon générale, il ne faut jamais se reposer entièrement sur Javascript pour afficher/masquer un contenu important ! C'est une bonne habitude à prendre, simplement.

L'effet de rollover en CSS lors du survol d'un lien et le comportement du menu déroulant sont 2 choses différentes.

Le rollover ne nécessite effectivement pas javascript, on peut faire à peu près tout ce qu'on veut en utilisant les pseudo-classes CSS :hover et :focus, on est bien d'accord.

Créer un menu déroulant nécessite par contre javascript. A partir du moment où on devra de toutes façons manipuler les styles des sous-menu via javascript, pourquoi se priver de les cacher aussi en utilisant Javascript ?

salut Thomas
je trouve que le débat est stérile (et hors sujet) pour la simple raison (experience oblige)
que les discussions sur l'activation/déasctivation de javascript repose essentiellement (d'après les discussion que j'ai eu) sur des méconnaissances
de la différence entre java et javascript.
Cela ne veut pas dire que je ne suis pas attentif aux demande des utilisateurs qui n'utilisent pas javascript (si tu vas sur mon site tu verras que les pages sont accessibles sans javascript, avec une perte d'esthétique (et de fonctionnement pour deux d'entre elles) mais accessible, ceci dit le site à changé de version et est encore/de nouveau en construction).
Ce que j'ai proposé est un code de base, fait très vite et qui peux etre amélioré. (ce qui sera fait)

Bon, on se calme et on essaye d'être un peu logique?

Scorpius, JyuniX a souligné le fait que ton menu n'est pas accessible sans Javascript. Et tu as répondu: «montre-moi un menu animé qui marche sans Javascript». Désolé, mais c'est ta réponse qui est complètement hors de propos: tu confonds allègrement accessibilité et rendu optimal souhaité.

Qu'il soit nécessaire d'utiliser Javascript pour réaliser certains effets ou certaines améliorations ergonomiques est un fait. Cela n'empêche pas de se poser la question du rendu sans Javascript, et de l'accessibilité de celui-ci. On pourra donc explorer les notions capitales de:
- Javascript non intrusif (unobtrusive Javascript);
- dégradation gracieuse, dégradation acceptable.

Scorpius a écrit :
les discussions sur l'activation/déasctivation de javascript repose essentiellement (d'après les discussion que j'ai eu) sur des méconnaissances
de la différence entre java et javascript

Euh... non.
Les discussions sur l'activation/désactivation de Javascript reposent sur le fait que pour de multiples raisons, Javascript est inutilisable ou désactivé pour une part non négligeable des utilisateurs.

Scorpius a écrit :
si tu vas sur mon site tu verras que les pages sont accessibles sans javascript

Eh bien, voilà ce qu'il aurait fallu répondre à JyuniX plutôt que de partir dans un qui-pro-quo qui, pour le coup, est effectivement stérile.

Sur ce, fin de la digression. Merci de revenir au sujet de départ, à savoir la demande de S~C.

je suis d'accord sur un point : fin de la digression. Ca ne mene à rien.

Salut,

Si on oublie accessibilité et JS ...
on peut

Wouah, un petit débat de JS et l'accessibilité à peine d'ouverture de mon topic ^^

Bref, je vous remercie de vous avoir intéressé, merci à ghost (pour ton lien) j'ai finalement trouvé de ce que je cherchais (grace à ton lien)