Menu sur clic gauche d'une zone
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:
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
