Menu sur clic gauche d'une zone

**actiproj** · 28/01/2016, 22h49

Bonjour

J'essaie de faire un menu qui s'active sur un clic gauche d'une zone bien défini (donc ce n'est pas un context menu)
Le menu doit apparaître à l'emplacement de la souris et ne disparaitre que si la souris quitte la zone d'affichage du menu

N'ayant pas réussi en CSS pur, je tente avec JS sans trop de succès

Voici le code actuel

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
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
 
<!DOCTYPE html>
<html lang="fr">
<head>
	<meta charset="utf-8">
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
	<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
	<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
 
	<style>
 
    .gestsite_16px .content {
        position: absolute;
        top: 0;
        display: none;
        z-index: 1;
        width: 180px;
        padding-top: 30px;
		background-color:white;
    }
 
 
    .gestsite_16px .content ul {
        background: #fff;
        margin: 0;
        padding: 0;
        overflow: hidden;
        height: 100%;
        border-bottom-left-radius: 5px;
        border-bottom-right-radius: 5px;
    }
 
    .gestsite_16px .content ul a {
        text-decoration: none;
    }
 
    .gestsite_16px .content li:hover {
        background: #eee;
        color: #333;
    }
 
    .gestsite_16px .content li {
        list-style: none;
        text-align: left;
        font-size: 14px;
        line-height: 30px;
        height: 30px;
        padding-left: 10px;
        border-top: 1px solid #ccc;
    }	
 
    .gestsite_16px .content li a {
        color: #888;
    }	
 
 
	.gestsite_16px:hover {
		border:1px solid blue;
	}
 
    .gestsite_16px {
		border:1px solid lightgray;
        cursor: pointer;
		padding-top:16px;
        font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
        display: inline-block;
        width: 100%;
        height: 20px;
        position: relative;
    }
 
    .gestsite_16px:active .content {
        z-index: 10000;
        border: 1px solid #777;
        border-radius: 5px;
		display:block;
    }
    .gestsite_16px .content:hover {
        z-index: 10000;
        border: 1px solid #777;
        border-radius: 5px;
		display:block;
    }
 
	</style>
 
 
 
</head>
<body>
 
<div class=gestsite_16px>
        <div class="content">
            <ul>
                <li><a href="#">Lorem ipsum dolor</a></li>
                <li><a href="#">Consectetur adipisicing</a></li>
                <li><a href="#">Reprehenderit</a></li>
                <li><a href="#">Commodo consequat</a></li>
                <li><a href="#">Lorem ipsum dolor</a></li>
                <li><a href="#">Consectetur adipisicing</a></li>
                <li><a href="#">Reprehenderit</a></li>
                <li><a href="#">Commodo consequat</a></li>
            </ul>
        </div>
</div>
 
<div>Test</div>
 
<script type="text/javascript">
	$( document ).ready(function() {
		$(".gestsite_16px").click( function(e) {
			$(this).children(".content").css("left", (e.clientX-5)+"px");
			$(this).children(".content").css("top", (e.clientY-5)+"px");
			$(this).children(".content").css("display", "block");
		});
    });
</script>
 
 
</body>
</html>

Niveau fonctionnement, ca a l'air pas mal sauf la fermeture qui ne se fait pas, sans doute parceque je force le display block
Malheureusement, je ne vois pas d'autres solutions pour l'heure

Quelqu'un pourrait me donner la solution ou une alternative SVP ?

Par avance merci
Actiproj

**SylvainPV** · 29/01/2016, 14h07

Ben il ne reste plus qu'à coder la fonction de fermeture:

Code :

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

1
2
3
$(".gestsite_16px").mouseleave( function(e) {     
  $(this).children(".content").hide()
})

Démo : http://codepen.io/anon/pen/NxzPxW

**actiproj** · 29/01/2016, 16h22

Merci pour cette réponse mais malheureusement, il faut que le menu disparaisse quand on le quitte, sans pour autant quitter la zone

J'ai toutefois fini par trouver en jouant sur la hauteur et non pas sur le display

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
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
 
 
<!DOCTYPE html>
<html lang="fr">
<head>
	<meta charset="utf-8">
 
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
	<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
	<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
 
	<style>
 
    .gestsite_16px .content {
        position: absolute;
		display:block;
        top: 0;
        height:0;
        z-index: 1;
        width: 180px;
		background-color:white;
    }
 
 
    .gestsite_16px .content ul {
        background: #fff;
        margin: 0;
        padding: 0;
        overflow: hidden;
        height: 100%;
        border-bottom-left-radius: 5px;
        border-bottom-right-radius: 5px;
    }
 
    .gestsite_16px .content ul a {
        text-decoration: none;
    }
 
    .gestsite_16px .content li:hover {
        background: #eee;
        color: #333;
    }
 
    .gestsite_16px .content li {
        list-style: none;
        text-align: left;
        font-size: 14px;
        line-height: 30px;
        height: 30px;
        padding-left: 10px;
        border-left: 1px solid #ccc;
        border-right: 1px solid #ccc;
    }	
    .gestsite_16px .content li:first-child {
        border-top: 1px solid #ccc;
    }	
    .gestsite_16px .content li:last-child {
        border-bottom: 1px solid #ccc;
    }	
 
    .gestsite_16px .content li a {
        color: #888;
    }	
	.gestsite_16px:hover {
		border:1px solid blue;
	}
 
    .gestsite_16px {
		border:1px solid lightgray;
        cursor: pointer;
		padding-top:16px;
        font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
        display: inline-block;
        width: 100%;
        position: relative;
    }
 
    .gestsite_16px:active .content {
        z-index: 10000;
		height:800px;
    }
    .gestsite_16px .content:hover {
        z-index: 10000;
		height:800px;
    }
 
	</style>
 
 
 
</head>
<body>
 
<section class=gestsite_16px>
        <div class="content">
            <ul>
                <li><a href="#">Lorem ipsum dolor</a></li>
                <li><a href="#">Consectetur adipisicing</a></li>
                <li><a href="#">Reprehenderit</a></li>
                <li><a href="#">Commodo consequat</a></li>
                <li><a href="#">Lorem ipsum dolor</a></li>
                <li><a href="#">Consectetur adipisicing</a></li>
                <li><a href="#">Reprehenderit</a></li>
                <li><a href="#">Commodo consequat</a></li>
            </ul>
        </div>
 
		Element dans la section<br/>
		Element dans la section<br/>
		Element dans la section<br/>
</section>
 
<script type="text/javascript">
	$( document ).ready(function() {
		$(".gestsite_16px").mousedown( function(e) {
			$(this).children(".content").css("left", (e.pageX-15)+"px");
			$(this).children(".content").css("top", (e.pageY-15)+"px");
		});
    });
</script>
 
 
</body>
</html>

Merci d'avoir cherché
Actiproj

**SylvainPV** · 29/01/2016, 20h30

Pas compris ce que tu voulais faire avec la hauteur, mais pour avoir ce que tu veux il suffit d'une légère adaptation de la fonction de fermeture:

Code :

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

1
2
3
$(".gestsite_16px .content").mouseleave( function(e) { 
  $(this).hide()
})

http://codepen.io/anon/pen/qbKNVR

Menu sur clic gauche d'une zone

JavaScript

Discussions similaires

Partager

Partager