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
| <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="jquery-1.8.2.js"></script>
<style type="text/css">
#cadremenu {
position:relative; top:0px; left:0px;
width: 150px;
height: 20px;
display: block;
border:1px solid blue;
z-index:10;
}
#rect1 {
position:relative; top:0px; left:0px;
width: 0px;
height: 0px;
display: block;
/* border:1px solid blue; */
background: #f2c11d no-repeat;
z-index:10;
}
#rect2 {
position:relative; top:0px; left:0px;
width: 0px;
height: 0px;
display: block;
/* border:1px solid blue; */
background: #ff0000 no-repeat;
z-index:10;
}
</style>
<script type="text/javascript">
jQuery(document).ready(function()
{
$("#dec1").click(function ()
{
$("#rect1").animate({
width: "70%",
height: "400px",
opacity: 0.4,
marginLeft: "0.6in",
fontSize: "3em",
borderWidth: "10px"
}, 1500 );
});
$("#dec2").click(function ()
{
$("#rect2").animate({
width: "70%",
height: "400px",
opacity: 0.4,
marginLeft: "0.6in",
fontSize: "3em",
borderWidth: "10px"
}, 1500 );
});
});
</script>
</head>
<body>
<div id="cadremenu">
<span id="dec1">Lien 1</span>
<span id="dec2">Lien 2</span>
</div>
<div id="rect1"></div>
<div id="rect2"></div>
</body>
</html> |
Partager