28172 sujets

CSS et mise en forme, CSS3

Bonjour,

j'aurai besoin de créer un menu vertical pour un blog hébergé sur Over-Blog.com . Je souhaiterai que lorsqu'on clique sur un des boutons du menu, celui-ci se déroule vers le bas et laisse apparaître un sous-menu composé d'autres boutons.
Au départ j'avais déjà créé un menu vertical classique, mais je me suis rendu compte qu'il était plus intéressant de mettre en place un menu comportant des sous-menus pour pouvoir regrouper mes articles dans des sous-catégories.

Je précise qu'avec over-blog.com, j'ai accès à la feuille CSS et au code HTML, contrairement à nombre de plates-formes d'hébergement de blogs. Smiley cligne
Bonsoir et bienvenue,

Miya3 a écrit :
j'aurai besoin de créer un menu vertical pour un blog hébergé sur Over-Blog.com . Je souhaiterai que lorsqu'on clique sur un des boutons du menu, celui-ci se déroule vers le bas et laisse apparaître un sous-menu composé d'autres boutons.
Ça, c'est typiquement l'œuvre d'une bibliothèque javascript !

En utilisant uniquement CSS et HTML ce n'est pas possible car lorsqu'on clique sur un élément : soit on recharge la page, soit on est dirigé vers une autre (par le html). Avec CSS l'instant "a:active" ne dure que l'instant du clic et ne permet pas de naviguer sur un menu qui, éventuellement, s'afficherait à cet instant précis.

Par contre, il est possible d'utiliser avec CSS la position au survol "a:hover" qui peut permettre d'afficher un sous menu cliquable.

Pour un sous-menu s'ouvrant par clic il faut dynamiser les CSS avec PHP (tu n'auras certainement pas le droit sur Over-Blog.com) ou avec javascript (tu pourras peut-être puisque tu as accès au HTML)…

Deux liens sur Alsacréations :
Creer-des-menus-simples-en-CSS
tuto-du-nouveau-du-cote-des-menus-deroulants
Je n'ai pas trouvé, ici, de page d'apprentissage au sujet des menus déroulants avec "a:hover" car il se peut que ça ne convienne pas à l'accessibilité (un des points clé d'Alsacréations). Quelqu'un de plus calé que moi sur la question t'en donnera certainement la raison.
Administrateur
Aureance a écrit :
En utilisant uniquement CSS et HTML ce n'est pas possible car lorsqu'on clique sur un élément : soit on recharge la page, soit on est dirigé vers une autre (par le html).

Bonjour,

En fait, c'est possible mais pas forcément conseillé (voir cette discussion)
Whaow ! l'exemple est superbe. Vivement que CSS3 soit en ordre de marche et puisse être validé en toute quiétude. Pourra t'on avec cet attribut target afficher/substituer un sous-menu comme demandé ici par exemple ?