Kod
<html>
<head>
<style>
#file
{
position: relative;
}
#file_submenu
{
display: none;
position: absolute;
margin: 0px;
padding: 0px;
border: 0px;
}
.menu
{
width: 150px;
background-color: orange;
border: 1px solid red;
float: left;
margin-right: 5px;
}
</style>
<script src="jquery-1.6.2.js" type="text/javascript" ></script>
<script type="text/javascript" >
$(document).ready (function ()
{
$("#file").mouseover (
function ()
{
var file_left = $("#file").css("left");
var file_top = $("#file").css("top");
var file_height = $("#file").css("height");
left = 0;
top = file_height;
$("#file_submenu").css ("left", left);
$("#file_submenu").css ("top", top);
$("#file_submenu").css ("position", "absolute");
$("#file_submenu").clearQueue().show(1000);
}
);
$("#file_submenu").mouseover (
function ()
{
$(this).clearQueue().show(0);
}
);
$("#file_submenu").mouseout (
function ()
{
$("#file_submenu").clearQueue().delay(200).hide (1000);
}
);
$("#file").mouseout (
function ()
{
$("#file_submenu").clearQueue().delay(200).hide (1000);
}
);
});
</script>
</head>
<body>
<div id="nav">
<div id="file" class="menu">File
<div id="file_submenu">
<div class="menu">Ala ma kota</div>
<div class="menu">Kot ma psa</div>
</div>
</div>
<div id="edit" class="menu">Edit</div>
</div>
</body>
</html>
<head>
<style>
#file
{
position: relative;
}
#file_submenu
{
display: none;
position: absolute;
margin: 0px;
padding: 0px;
border: 0px;
}
.menu
{
width: 150px;
background-color: orange;
border: 1px solid red;
float: left;
margin-right: 5px;
}
</style>
<script src="jquery-1.6.2.js" type="text/javascript" ></script>
<script type="text/javascript" >
$(document).ready (function ()
{
$("#file").mouseover (
function ()
{
var file_left = $("#file").css("left");
var file_top = $("#file").css("top");
var file_height = $("#file").css("height");
left = 0;
top = file_height;
$("#file_submenu").css ("left", left);
$("#file_submenu").css ("top", top);
$("#file_submenu").css ("position", "absolute");
$("#file_submenu").clearQueue().show(1000);
}
);
$("#file_submenu").mouseover (
function ()
{
$(this).clearQueue().show(0);
}
);
$("#file_submenu").mouseout (
function ()
{
$("#file_submenu").clearQueue().delay(200).hide (1000);
}
);
$("#file").mouseout (
function ()
{
$("#file_submenu").clearQueue().delay(200).hide (1000);
}
);
});
</script>
</head>
<body>
<div id="nav">
<div id="file" class="menu">File
<div id="file_submenu">
<div class="menu">Ala ma kota</div>
<div class="menu">Kot ma psa</div>
</div>
</div>
<div id="edit" class="menu">Edit</div>
</div>
</body>
</html>
I to działą całkiem dobrze dla szybkiego pokazywania/chowania. Gdy dam parametr wolnego pokazywania/chowania, to pojawiają się problemy. Np. gdy podczas wyświetlania się (animacji) zejdę z rodzica na dziecko (animowane), to jakieś dziwne akcje się pojawiają. Jak powinienem zrobić to poprawnie ?