Faire un menu CSS3

Ok, je vais jeter un œil du côté de cette fonction.

Pour l'exemple live, le JSFiddle ne suffit pas ?

JSfiddle ne charge pas forcément les éléments comme toi. Voir ta page en action serait plus cohérent.

Hum, pour le moment, il n'est que sur mon PC. Je vais essayer de le mettre sur mon site (normalement ce n'est pas son serveur, il va falloir que je paramètre qq trucs pour que ça marche)

Tu peux éventuellement n'héberger que le HTML généré, plutôt que de mettre du PHP ou un langage serveur.

Une simple page avec la structure HTML finale et le JS/CSS que tu utilises suffira.

Ok, je vais essayer de faire

Voici la page de test : formulaire. J'ai élaguée tout le CSS inutile, pour le JS, seule la première fonction est utilisée dans cet exemple.

J'ai laissé les onclick pour le moment, pour aller plus vite 0:)

PS : le bouton qui affiche le sous-menu est celui avec le symbole §.

Je pense que le problème est dû au CSS en fait.

Quand on clique sur un bouton, le parent est caché d'abord, donc le clic est fait dans le vide en gros. Du coup l'événement click n'est jamais lancé sur les boutons.

Donc il faudra sûrement un peu de JS pour gérer tout ça

Aïe, je pense que je ne suis pas encore assez compétent pour gérer ce genre de problème :/
Comment je pourrais m'y prendre ?

Pouvez vous me donner une petite piste sur quoi m'orienter, pcq j'ai vraiment aucune idée de par où commencer :/

Merci beaucoup

J'ai réussi à le faire merci
Mais j'ai une petite question, comment faire pour faire disparaître le menu si le bouton perd le focus ? J'ai essayé avec onBlur mais j'ai plusieurs problèmes :

• Je retombe dans le même cas que le CSS, le menu se ferme avant d'exécuter le bouton du menu. J'ai essayé d'utiliser la fonction setTimeout(), mais ça n'a pas l'air de marcher.
• Je me retrouve dans le même cas que le onclick, à mettre du JS dans le code HTML.

Merci encore pour ton aide !

PS: j'ai suivi ce tuto en remplaçant visibility par display.

Codes :

1

<button type="button" title="Titre" class="bt-editeur icon-section" id="bdo-titre" style="margin-left: 30px;" onclick="afficherCacher('bdo-titre-menu')" onblur="setTimeout(cacher('bdo-titre-menu'), 10000);"></button>

1
2
3
4

function cacher(idDiv)
{
    document.getElementById(idDiv).style.display="none";
}

Salut,

Pour écouter des évènements en JS tu peux faire :

1
2
3
4
5
6
7
8

var button = document.getElementById("bdo-titre");
button.addEventListener('click', function(e) {
    // ton action au clic
}, false);
button.addEventListener('blur', function(e) {
    // ton action quand tu perd le focus
}, false);
// etc

Pour t'éviter d'écrire du JS dans le DOM.

Il correspond à quoi le paramètre e de ta fonction ?

Merci, ça marche de la même façon et c'est plus propre maintenant Je pense que je vais continuer mon cours sur le JS quand même pour bien comprendre les évènement.

Par contre je comprend pas pourquoi la fonction setTimeout ne fonctionne pas, même avec 10 secondes c'est instantané :

1
2
3
4

var button = document.getElementById("bdo-titre");
button.addEventListener('blur', function(e) {
    setTimeout(cacher('bdo-titre-menu'), 10000);
}, false);

Merci avec une fonction anonyme et un délais de 200 ms c'est parfait

Je pense que je vais relire un peu le tuto JS de Thunderseb pour bien comprendre pq ça marchait pas.