Faire un menu CSS3

L'auteur de ce sujet a trouvé une solution à son problème.
Auteur du sujet

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.

La curiosité est le plus beau des défauts

+0 -0
Staff

j'aimerais réaliser un menu qui apparaît quand on clique sur un bouton (un lien pour être exact).

Dark Patate

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).

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).

viki53

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.

+0 -0
Auteur du sujet

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 !

La curiosité est le plus beau des défauts

+0 -0
Auteur du sujet

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.

La curiosité est le plus beau des défauts

+0 -0
Auteur du sujet

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/

Édité par Dark Patate

La curiosité est le plus beau des défauts

+0 -0
Staff

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).

Édité par viki53

Auteur du sujet

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.

La curiosité est le plus beau des défauts

+0 -0
Auteur du sujet

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) ?

La curiosité est le plus beau des défauts

+0 -0
Auteur du sujet

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 ?

Édité par Dark Patate

La curiosité est le plus beau des défauts

+0 -0

@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.

viki53

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 :)

+0 -0
Auteur du sujet

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 :-)

La curiosité est le plus beau des défauts

+0 -0
Vous devez être connecté pour pouvoir poster un message.
Connexion

Pas encore inscrit ?

Créez un compte en une minute pour profiter pleinement de toutes les fonctionnalités de Zeste de Savoir. Ici, tout est gratuit et sans publicité.
Créer un compte