Kod nie jest zbyt "gigantyczny", a korzyści spore. Tworzymy menu, którego nie trzeba szukać, zawsze jest pod ręką. Odnośniki umieszczone są na warstwie pozycjonowanej absolutnie. Warstwa porusza się w płynny sposób wraz z przewijaniem zawartości dokumentu.
Za pomocą zmiennej gora ustalamy odległość warstwy od górnej krawędzi okna. Jeśli chodzi o płynność i szybkość menu, to możemy sobie tutaj poeksperymentować zmieniając wartości zmiennych reakcja i szybkosc. Przy czym należy pamiętać, że im większa wartość zmiennej szybkosc, tym mniejsza jest rzeczywista szybkość poruszania się menu (taki przekręt autora :)))
Aby menu nie "właziło" nam ponad zawartość naszego dokumentu, należy ustalić odpowiedni margines dokumentu, np. poprzez CSS:
body { margin-left:100px }
lub opracować odpowiednią konstrukcję tabelaryczną, w celu stworzenia odpowiedniej przestrzeni dla poruszającego się menu.
Skopiuj przykładowy kod
W ramach HEAD
<script type="text/javascript">
cpfl='**********Pływająca warstwa (v0.8)***********= '+
'written by Bogdan Blaszczak, '+
'homepage http://www.blatek.board.pl '
gora=60
reakcja=700
szybkosc=8
function Namiar(t){celY=t;if(!anim)menuGo()}
function getEl(id){
with(d)var e=g?g(id):a?a[id]:l[id]
if(!e.style)e.style=e;return e
}
function menuGo(){
oBy=(szybkosc*oBy+celY)/(szybkosc+1)
getEl('flMenu').style.top=Math.round(oBy)
if(Math.round(oBy)!=celY)anim=setTimeout("menuGo()",20)
else anim=0
}
function scrLay() {
var pYoff=(d.a&&!window.opera)?document.body.scrollTop:window.pageYOffset
if(parseInt(getEl('flMenu').style.top)!=pYoff+gora)Namiar(pYoff+gora)
}
function initMenu(){
function st(t,h){var s='';for(var i=0;i<t.length;i++)s+=h.substr(t[i],1);return s}
d=document,d.l=d.layers,d.a=d.all,d.g=d.getElementById
eval(st([114,65,63,45,119,114,22,21,81,142,70,56,115,45,30],cpfl))
setInterval('scrLay()',reakcja)
}
</script>
W ramach BODY
<body onload="initMenu()"> <div id="flMenu" style="position:absolute;width:80px;top:60px;left:10px"> <a href="http://www.pckurier.pl">PCkurier</a><br> <a href="http://www.enter.pl">Enter</a><br> <a href="http://www.gambler.com.pl">Gambler</a><br> <a href="http://www.chip.pl">Chip</a><br> <a href="http://blatek.board.pl">Autor</a><br> </div>