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
| <!DOCTYPE html>
<html>
<head>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<style type="text/css">
body{
margin:auto;
width:900px;
}
.menu_principal { width: 200px; background-color: red; float:left; z-index:10;}
.menu_secondaire { margin:0px; width: 200px; position: absolute; z-index:20; display:none; }
.menu_secondaire ul { margin:0px; background-color: blue; }
</style>
<script>
$(document).ready(function() {
$(".menu_principal").click(function () {
$(".menu_secondaire").hide();
$(this).next(".menu_secondaire").css("left",$(this).offset().left);
$(this).next(".menu_secondaire").css("top",$(this).offset().top-$(this).next(".menu_secondaire").height());
$(this).next(".menu_secondaire").show("slide", { direction: "down" }, 1000);
});
});
</script>
</head>
<body>
<div style="height:300px;"></div>
<div class="menu_principal">Menu principal 1</div>
<div class="menu_secondaire">
<ul>
<li>Menu secondaire 1.1</li>
<li>Menu secondaire 1.2</li>
<li>Menu secondaire 1.3</li>
</ul>
</div>
<div class="menu_principal">Menu principal 2</div>
<div class="menu_secondaire">
<ul>
<li>Menu secondaire 2.1</li>
<li>Menu secondaire 2.2</li>
<li>Menu secondaire 2.3</li>
</ul>
</div>
</body>
</html> |
menu impossible à trouver
Répondre avec citation
Pas de question technique par MP !
Envoyé par flashwolf
Partager