var _id='test';
var _topdistance=15;
var _hidedistance=5;
var _hidedistancemax=-90;
var _showdistance=5;
var _showdistancemax=0;
var inter;
#####
_id is die id die ihm id tag des zu aniemierenden bjektes stehet
_topdistance ist die distanz die das menü von der oberen bildschirmkannte hat(es rutscht beim scrollen mit
_hidedistance ist um wieviele pixel das menü nach links beim einrollen bewegt wird
_hidedistancemax ist wie weit das menü seitwerts eingefahren wird
_showdistance ist die schrittweise um die das menü pro schritt nach links beim ausfahren gesetzt wird
_showdistance max ist der grösste wert der für die css eigenschaft left gesetzt wird
die variable inter ist zur einstellung uninteressant in ihr wird nur der intervall gespeichert, damit man ihn gegebenenfalls auch mit clearinterval löschen kann
#####
function interset(_f,_t)
{
clrint();
inter=window.setInterval(_f,_t)
}
function clrint()
{
window.clearInterval(inter);
}
#####
die obigen funktionen sind intervall funktionen,
jedes mal wo ein neuer intervall gesetzt wird, wird der vorhergehende intervall gelöscht, um zu verhindern das gleichzeiteig versucht wird das menu aus und einzuklappen, was in zuckungen enden würde, da das menü gleichzeitig zum einfahren nach links und zum ausfahren nach rechts versetzt würde
#####
function initit()
{
window.setInterval('scrollit()',50);
}
function scrollit()
{
_actual=document.body.scrollTop;
document.getElementById(_id).style.top=parseInt(document.getElementById(_id).style.top)+(Math.round((parseInt(_actual)+_topdistance-parseInt(document.getElementById(_id).style.top))/5));
}
#####
die function initit setzt einfach nur einen interval damit alle 50 millisekunden(ms) die funktion scroll aufgerufen wird, die die css eigenschaft top so setzt das das menü sich ein weiteres 10tel an die aktuelle soll position annährt(aktuell gescrollte position-distanz vom aktuellen menüstandort und das ganze über 10+aktuelle position)
#####
function inihide()
{;
interset("interset('dohide()',40)",500);
}
function dohide()
{
if(parseInt(document.getElementById(_id).style.left)<=_hidedistancemax)
clrint();
else
document.getElementById(_id).style.left=parseInt(document.getElementById(_id).style.left)-_hidedistance+'px';
}
#####
die funktion inihide verzögert das einfahren des menüs um 500ms, dann wird ale 40ms di funktion dohide aufgerufen die jedesmal das menü ein bisschen nach links verschiebt, bis es so weit links ist wie es seien soll
#####
function inishow()
{;
interset("interset('doshow()',40)",10);
}
function doshow()
{
if(parseInt(document.getElementById(_id).style.left)>=_showdistancemax)
clrint();
else
document.getElementById(_id).style.left=parseInt(document.getElementById(_id).style.left)+_showdistance+'px';
}
#####
die funktion show fährt das menü nach einer minnimalen verzögerung im 40 ms-takt jedes mal _showdistance(siehe oben) pixel nach rechts bis es angezeigt wird
Fertig, aber leider nur mit dem js teil. Um das ganze nutzen zu können müsst ihr es in eine js-datei packen, 'z.b menu.js'. diese datei sollte dan mit den zeilen:
<script src="menu.js" type="text/javascript">
</script>
in den <head>-teil der html datei includiert werden, in dne body-tag muss noch ein
onload="initit()"
dann müsst ihr nur noch ein menü erstellen, z.b. eine tabell bei der der folgende code stehen sollte:
id="test" style="position:absolute;top:50px;left:0px;" onMouseover="inishow()" onMouseout="inihide()"
dadurch wird beim überfahren mit der maus die funktion zum menü ausklappen aufgerufen, und wenn die maus vom menü runtergeht das menü eingefahren.
Um
P.s.: das scrollen funzt mit dem Netscape noch nihct, ich arbeite daran
und hier der unzerschniebbelte source der .js datei, dannach dann eine beispiel html code, mit mehreren <br> damit mann sieht wie das menü mitfährt
#####
var _id='test';
var _topdistance=15;
var _hidedistance=5;
var _hidedistancemax=-90;
var _showdistance=5;
var _showdistancemax=0;
var inter;
function interset(_f,_t)
{
clrint();
inter=window.setInterval(_f,_t)
}
function clrint()
{
window.clearInterval(inter);
}
function initit()
{
window.setInterval('scrollit()',50);
}
function scrollit()
{
_actual=document.body.scrollTop;
document.getElementById(_id).style.top=parseInt(document.getElementById(_id).style.top)+(Math.round((parseInt(_actual)+_topdistance-parseInt(document.getElementById(_id).style.top))/5));
}
function inihide()
{;
interset("interset('dohide()',40)",500);
}
function dohide()
{
if(parseInt(document.getElementById(_id).style.left)<=_hidedistancemax)
clrint();
else
document.getElementById(_id).style.left=parseInt(document.getElementById(_id).style.left)-_hidedistance+'px';
}
function inishow()
{;
interset("interset('doshow()',40)",10);
}
function doshow()
{
if(parseInt(document.getElementById(_id).style.left)>=_showdistancemax)
clrint();
else
document.getElementById(_id).style.left=parseInt(document.getElementById(_id).style.left)+_showdistance+'px';
}
#####
html datei:
#####
<html>
<head>
<script src="menu.js" type="text/javascript">
</script>
<title>menutest - von coderinside</title>
</head>
<body onload="initit()">
<table id="test" style="position:absolute;top:50px;left:0px;" onMouseover="inishow()" onMouseout="inihide()" border="1" width="120px">
<tr><td width="90px">option</td>
<td width="30px" rowspan="99" style="text-align:center">N<br>A<br>V<br>I<br>G<br>A<br>T<br>I<br>O<br>N</td></tr>
<tr><td>option1</td></tr>
<tr><td>option2</td></tr>
<tr><td>option3</td></tr>
<tr><td>option4</td></tr>
<tr><td>option5</td></tr>
<tr><td>option7</td></tr>
<tr><td>option6</td></tr>
</table>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</body>
</html>