<!DOCTYPE HTML>
<html>
<head></head>
<style>
.menu {
background:rgb(200, 0, 0);
width:200px;
height:40px;
color:white;
float:left;
text-align:center;
text-decoration:none;
}
.menulink {
display:none;
width:100%;
background:lightgreen;
position:fixed;
top:50px;
opacity:0;
height:0px;
}
#menudiv {
background:rgb(200, 0, 0);
position:fixed;
width:1280px;
}
</style>
<body>
<div id='menudiv'>
<div class='menu' onMouseOver='b(this,0)' onMouseOut='a(this,0)'>Раздел 1</div>
<div class='menu' onMouseOver='b(this,1)' onMouseOut='a(this,1)'>Раздел 2</div>
<div class='menu' onMouseOver='b(this,2)' onMouseOut='a(this,2)'>Раздел 3</div>
<div class='menu' onMouseOver='b(this,3)' onMouseOut='a(this,3)'>Раздел 4</div>
<div class='menu' onMouseOver='b(this,4)' onMouseOut='a(this,4)'>Раздел 5</div>
<div class='menu' onMouseOver='b(this,5)' onMouseOut='a(this,5)'>Раздел 6</div>
</div>
<div class='menulink' id='a0' onMouseOut='disapp(0,0.05)'>hfhfg1</div>
<div class='menulink' id='a1' onMouseOut='disapp(1,0.05)'>hfhfg2</div>
<div class='menulink' id='a2' onMouseOut='disapp(2,0.05)'>hfhfg3</div>
<div class='menulink' id='a3' onMouseOut='disapp(3,0.05)'>hfhfg4</div>
<div class='menulink' id='a4' onMouseOut='disapp(4,0.05)'>hfhfg5</div>
<div class='menulink' id='a5' onMouseOut='disapp(5,0.05)'>hfhfg6</div>
<script>
var d = [],
c = [],
k = [],
h = [],
l = [],
t = [],
p = [],
z = [];
for (var j = 0; j <= 6; j++) {
h[j] = 100;
z[j] = 0;
k[j] = document.getElementById('a' + j);
}
function a(el, i) {
clearInterval(c[i]);
d[i] = setInterval(function () {
if (h[i] <= 200) {
h[i] += 2;
el.style.background = 'rgb(' + h[i] + ',0,0)';
} else {
clearInterval(d[i]);
}
}, 10);
}
function b(el, i) {
clearInterval(d[i]);
c[i] = setInterval(function () {
if (h[i] >= 100) {
h[i] -= 5;
el.style.background = 'rgb(' + h[i] + ',0,0)';
} else {
clearInterval(c[i]);
}
}, 10);
app(i);
for(var r=0;r<=5;r++){
if (r!=i){
disapp(r,1);
}
}
}
function app(x) {
k[x].style.display = 'block'
clearInterval(t[x]);
p[x] = setInterval(function () {
if (z[x] <= 1) {
z[x] += 0.03;
k[x].style.opacity = z[x];
k[x].style.height = z[x]*200+'px';
} else {
clearInterval(p[x]);
}
}, 10);
}
function disapp(x,o) {
clearInterval(p[x]);
t[x] = setInterval(function () {
if (z[x] > 0) {
z[x] -= o;
k[x].style.opacity = z[x];
k[x].style.height = z[x]*200+'px';
} else {
clearInterval(t[x]);
}
}, 10);
if (z[x] <= 0) {
k[x].style.display = 'none';
}
}
</script>
</body>
</html>
|