Discussion :

[kaitos32]

Bonjour à tous,
Je suis donc à la recherche d'une solution à mon problème énoncé en intitulé.
J'aimerais ouvrir un menu vertical lors du click d'une cellule d'un tableau html, à l'endroit du click souris, au dessus du tableau (En bref, comme un click droit).
Je ne sais pas trop comment m'y prendre, quelqu'un pourait-il m'aiguiller?

Connaissez vous des calques en JS permettant d'afficher des fonctionnalités de ce type par exemple ou des animations?

Merci beaucoup.

[iakou]

Bonjour.

- Faites quelques recherche sur les balises HTML <select> et <option>.
- Vous devrez aussi "investir" dans un peu de javascript pour les gérer.

Cdlt

[NoSmoking]

Bonjour,
regarde du coté de l'événement oncontextmenu.

[kaitos32]

Mais <select> c'est un menu déroulant non?
J'aimerais vraiment reproduire la fonction du click droit mais lors du click gauche sur certaines cases d'un tableau.

Attention, je n'ai peut etre pas été explicite, je ne veux pas reproduire à l'identique la fonction. Car je souhaite mettre des fonctions persos dans le menu.

[NoSmoking]

...la fonction du click droit mais lors du click gauche...

ce n'est pas ce que j'avais compris en premier lieu.
Le principe
- tu crées un élément caché, display:none, avec ton "menu" à l'intérieur.
- sur le click tu l'affiches, display:block, à la position de la souris ( ou position fixe d'ailleurs).

[iakou]

J'aimerais ouvrir un menu vertical

Un select est un menu vertical !... Non ?...

Cdlt

P.S : Les demandes sont souvent mal formulées (l'effet magique SMS)... Et vous avez même réussi à égarer un modérateur !...

[NoSmoking]

Et vous avez même réussi à égarer un modérateur !...

un modérateur n'a pas forcément la science infuse, d'ailleurs la seule chose qui infuse chez moi c'est du thé Thaî

[iakou]

Bonsoir.

Ce n'était pas à vous que s'adressait cette remarque !...
En d'autres termes, je disais à "kaitos" qu'il avait réussi à enfumer tout le monde !...
Vous lisez trop vite... KEEP COOOOOL !... Puisque vous ne fumez pas...

Cordialement à vous deux...

[kaitos32]

Oui pardon, ma demande n'est pas très précise. Je souhaite tout simplement reproduire le menu vertical du click droit que l'on peut effectuer sur le bureau ou sur naviguateur. En fait, je ne vois pas comment être plus précis puisqu'il suffit de faire un click droit pour voir ce que je veux

[micetf]

Si cela peut aider,
j'ai réalisé ce petit test :
http://jsfiddle.net/MiCetF/a7HVC/2/

MiCetF

[NoSmoking]

Ébauche de solution avec oncontextmenu

en fait si je ne me trompe pas kaitos32 veut faire apparaître un menu au click sur un élément de sa page.

En reprenant la fonction de micetf cela pourrait donner

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
(function (window) {
    var d = window.document;
    d.onclick = function (evt) {
        var oMenu = d.getElementById('menu');
        if (!oMenu.offsetWidth) {
            if (!evt) evt = window.event;
            x = evt.clientX;
            y = evt.clientY;
 
            oMenu.style.left = x + 'px';
            oMenu.style.top = y + 'px';
            oMenu.style.display = 'block';
        } else {
            oMenu.style.display = 'none';
        }
        return false;
    };
}(this));

il reste à tester si l'élément source est le bon (ou celui souhaité) avec evt.target||evt.srcElement.

[kaitos32]

Merci beaucoup c'est parfait !

Néanmoins, lorsque que j'ajoute ce code au miens. Le menu ne s'affiche qu'au même endroit, ne prend pas en compte les valeurs css top et left.
Pourtant les valeurs changent aux différents click souris.

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<div id="menu" style="display: block; left: 593px; top: 141px;">

[NoSmoking]

Pour que ton élément puisse se déplacer, il faut le mettre en position:absolute comme mentionné dans l'exemple de micetf

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
#menu {
    display:none;
    position: absolute;
    top:0;
    left:0;
    border:1px solid black;
    background-color:white;
}

[kaitos32]

Ok merci, j'ai du l'ajouter hors du css. Dans le html lui meme, pour qu'il fasse effet.