## Pływające menu

PCkurier
Enter
PCWorld Komputer
Chip
Autor

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>