Faire un menu CSS3

Bonjour,
j'aimerais réaliser un menu qui apparaît quand on clique sur un bouton (un lien pour être exact). En fait ce que j'aimerais faire, c'est la même chose que le menu pour insérer un titre ou un code source avec le formulaire de ZdS.

Le problème c'est que je vois pas trop par où commencer pour faire ça uniquement en CSS3 et sans Javascript :/ Qqn aurait une piste ?

Merci d'avance.
Dark Patate.

Test avec le focus : tu met le focus sur le lien en cliquant dessus

Si le comportement attendu est celui d'un bouton (déclenchement d'action, pas navigation), autant utiliser un button est être sémantiquement correct.

Dans tous les cas, jouer avec le focus sera déjà une bonne base mais il faudra sûrement du JavaScript pour faire les choses bien (pour gérer l'utilisation au clavier, par exemple).

Tu peux mettre le focus avec le clavier (touche tab)

Mais en effet, pour naviguer dans la sous liste sans que ce soit trop ch***t, il faudra utiliser du JS.

Ah effectivement, je n'avait pas pensé à la gestion du clavier ! Va falloir que je regarde le JS alors…
Je vais me pencher sur le focus pour voir comment ça marche, je ne connais pas cette propriété.

Ok pour le button, c'est vrai que c'est plus propre. J'espère que juste que je ne vais pas avoir de problème de mise en page en changeant !

Je vais tester ce soir l'attribut focus et je vous tiens au courant.

Merci !

Tu peux mettre le focus avec le clavier (touche tab) — Ajabep

Sauf que si tu mets le focus dans le menu, le bouton le perd donc le menu devient caché. Donc il faut du JS.

ah, oui… Dsl :3

Je ne vois pas trop comment lier le <button/> avec le <div> (par exemple) qui représente mon menu. Même avec :focus, je ne vois pas comment dire si j'appuie là fait apparaître ça.

1
2

<button>Bouton</button>
<div>Menu</div>

1
2

div{ display:none; }
button:focus+div{ display:block; }

C'est la version ultra simplifiée, mais le principe est là.

Merci pour ton aide, ça m'a vraiment aidé à démarrer !
Par contre j'ai juste un problème maintenant, quand on clique sur un des boutons du menu, rien ne se passe (je pense que c'est pcq le bouton perd le focus à ce moment là). Comment résoudre ce problème ?

PS : voici ce que j'ai fait : https://jsfiddle.net/DarkPatate/qt34cok7/

Je pense déjà que le HTML de tes boutons n'est pas correct. Et avec des morceaux de PHP qui traînent, c'est pas super lisible : donne-nous plutôt le code envoyé au client.

Ensuite mettre du JS en vrac dans les balises, ça fait longtemps qu'on répète que c'est une mauvaise idée.

Au passage, quand je vois que ton but est de faire un éditeur de texte (donc avec du JS), je me demande pourquoi tu tiens tant à ce que ton menu soit utilisable sans JS (sachant que l'éditeur entier ne sert à rien sans JS).

Voici le code sans le PHP : https://jsfiddle.net/DarkPatate/qt34cok7/2/ (j'avais juste changé le premier lien dans l'autre exemple).

Même pour le onclick c'est pas une bonne idée ?

Et bien, c'était surtout pour utiliser des techniques de CSS3 que je n'utilises très peu. Je programme en CSS3 comme avec du CSS2 (ou en grande partie), donc j'avais envie que ce menu soit uniquement en CSS3 (du moins pour l'affichage) pour me forcer à utiliser de nouvelles propriétés.
Après, si vraiment c'est pas une bonne idée, je peux changer.

Oui, les événements se gère dans le JS, pas dans le HTML. Pas de discrimination !

C'est juste que je voyais pas trop pourquoi tu y tenais, mais c'est pas forcément une mauvaise idée, c'est juste potentiellement plus contraignant.

Hum comment je dois faire pour changer le onclick en qqch de plus propre ? Pcq je t'avoue que mes compétence en JS son faible, je fais beaucoup de mimétisme avec de la programmation classique (C/C++, PHP…).

J'imagine que la contrainte dont tu parles c'est parcourir le menu (comme tu l'as annoncé dans ton premier message) ?

Par contre je vois pas comment faire pour cliquer sur les boutons du menu, à chaque fois ils disparaissent :/

J'ai essayé de changer le code par ça :

1
2
3
4

#bdo-titre:focus+#bdo-titre-menu, .ss-bt-titre:focus~#bdo-titre-menu
{
    display:inline-block; 
}

avec :

1
2
3
4
5
6

<div id="bdo-titre-conteneur"><button type="button" title="Titre" class="bt-editeur icon-section" id="bdo-titre" style="margin-left: 30px;" ></button>
    <div id="bdo-titre-menu">
        <button type="button" class="ss-bt-titre" onclick="insertTag('# ','','');"/>Titre 1</button><br/>
        <!-- ... -->
    </div>
</div>

Mais visiblement ça ne marche pas, quand je clique sur le lien, le menu se ferme sans rien effectuer…
[EDIT] Après recherche et réflexion, je pense que ~ n'est pas l'opérateur que je recherche, puisque que je veux faire le contraire de +.

Si vous avez une idée je suis preneur, pcq je tourne en rond :/

Merci

PS : où dois-je placer le JS pour faire plus propre ?

Salut Dark Patate,

Tu as déjà utilisé Bootstrap? Personnellement j'adore et je ne peux plus m'en passer.

@Moody_jr : Bootstrap c'est bien pour faire des prototypes rapidement, pas en production.

Ou alors tu utilises LESS pour réutiliser certains styles avec tes propres classes et avoir un CSS qui correspond exactement à tes besoins.

Je suis d'accord tu peux surcharges boostrap avec tes propres classes, ça ne pose aucun problème. Mais pour moi, c'est vraiment super pour avoir une base de travail fonctionnelle rapidement.

Je vois beaucoup de sites qui ont utilisé bootstrap pour se lancer puis améliorer avec leur propre classe pour ensuite avoir un bootstram "maison".

C'est peut être un peu idyllique ce que je raconte mais c'est ma vision des choses

J'avais déjà jeté un oeil à Boostrap mais j'avais eu un peu de mal à comprendre son fonctionnement. Après je pense que de toute façon il est un peu tard, mon site est déjà bien avancé.

Je ne vois pas trop comment corriger mon problème, je serais tenté de dire que quand je clique sur un sous-menu, le menu principal perd le focus et se ferme. Mais pourquoi la commande associée au sous-menu n'est pas exécutée ?
Et aussi, comment changer le onclick pour que ce soit plus propre ?

Merci de votre aide

Pour le onclick regarde du côté de addEventListener en JS.

Pour le problème de l'action pas lancée, je vois bien une cause possible (JS pas chargé au moment du parsage du DOM), mais il faudrait un exemple live de ton code pour le confirmer.