ďťż

floatmenu

Lemur zaprasza

Pływające menu














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>









































  • zanotowane.pl
  • doc.pisz.pl
  • pdf.pisz.pl
  • teen-mushing.xlx.pl
  • Wątki
    Powered by wordpress | Theme: simpletex | © Lemur zaprasza