Forums » HTML & HTML 5

Menu Interativo em HTML

    • 11496 posts
    12 de junho de 2013 17:59:33 ART

    Menu Interativo em HTML
    Basta usar o Script Abaixo e criar seu Menu interativo em HTML.
    Código:
    <html>
    <head>

    <SCRIPT LANGUAGE="JavaScript">
    <!--
    floatX=10;
    floatY=10;
    layerwidth=100;
    layerheight=130;
    align="center";
    valign="center";
    delayspeed=3;

    NS6=false;
    IE4=(document.all);
    if (!IE4) {NS6=(document.getElementById);}
    NS4=(document.layers);

    function adjust() {
    if ((NS4) || (NS6)) {
    if (lastX==-1 || delayspeed==0)
    {
    lastX=window.pageXOffset + floatX;
    lastY=window.pageYOffset + floatY;
    }
    else
    {
    dx=Math.abs(window.pageXOffset+floatX-lastX);
    dy=Math.abs(window.pageYOffset+floatY-lastY);
    d=Math.sqrt(dx*dx+dy*dy);
    c=Math.round(d/10);
    if (window.pageXOffset+floatX>lastX) {lastX=lastX+delayspeed+c;}
    if (window.pageXOffset+floatX<lastX) {lastX=lastX-delayspeed-c;}
    if (window.pageYOffset+floatY>lastY) {lastY=lastY+delayspeed+c;}
    if (window.pageYOffset+floatY<lastY) {lastY=lastY-delayspeed-c;}
    }
    if (NS4){
    document.layers['floatlayer'].pageX = lastX;
    document.layers['floatlayer'].pageY = lastY;
    }
    if (NS6){
    document.getElementById('floatlayer').style.left=lastX;
    document.getElementById('floatlayer').style.top=lastY;
    }
    }
    else if (IE4){
    if (lastX==-1 || delayspeed==0)
    {
    lastX=document.body.scrollLeft + floatX;
    lastY=document.body.scrollTop + floatY;
    }
    else
    {
    dx=Math.abs(document.body.scrollLeft+floatX-lastX);
    dy=Math.abs(document.body.scrollTop+floatY-lastY);
    d=Math.sqrt(dx*dx+dy*dy);
    c=Math.round(d/10);
    if (document.body.scrollLeft+floatX>lastX) {lastX=lastX+delayspeed+c;}
    if (document.body.scrollLeft+floatX<lastX) {lastX=lastX-delayspeed-c;}
    if (document.body.scrollTop+floatY>lastY) {lastY=lastY+delayspeed+c;}
    if (document.body.scrollTop+floatY<lastY) {lastY=lastY-delayspeed-c;}
    }
    document.all['floatlayer'].style.posLeft = lastX;
    document.all['floatlayer'].style.posTop = lastY;
    }
    setTimeout('adjust()',50);
    }

    function define()
    {
    if ((NS4) || (NS6))
    {
    if (align=="left") {floatX=ifloatX};
    if (align=="right") {floatX=window.innerWidth-ifloatX-layerwidth-20};
    if (align=="center") {floatX=Math.round((window.innerWidth-20)/2)-Math.round(layerwidth/2)};
    if (valign=="top") {floatY=ifloatY};
    if (valign=="bottom") {floatY=window.innerHeight-ifloatY-layerheight};
    if (valign=="center") {floatY=Math.round((window.innerHeight-20)/2)-Math.round(layerheight/2)};
    }
    if (IE4)
    {
    if (align=="left") {floatX=ifloatX};
    if (align=="right") {floatX=document.body.offsetWidth-ifloatX-layerwidth-20}
    if (align=="center") {floatX=Math.round((document.body.offsetWidth-20)/2)-Math.round(layerwidth/2)}
    if (valign=="top") {floatY=ifloatY};
    if (valign=="bottom") {floatY=document.body.offsetHeight-ifloatY-layerheight}
    if (valign=="center") {floatY=Math.round((document.body.offsetHeight-20)/2)-Math.round(layerheight/2)}
    }
    }
    //-->
    </script>

    </head

    <body>

    <script>
    if (NS4) {document.write('<LAYER NAME="floatlayer" LEFT="'+floatX+'" TOP="'+floatY+'">');}
    if ((IE4) || (NS6)) {document.write('<div id="floatlayer" style="position:absolute; left:'+floatX+'; top:'+floatY+';">');}
    </script>

    **************************<br>
    *** Aqui vai o menu ******<br>
    **************************<br>

    <script>
    if (NS4)
    {
    document.write('</LAYER>');
    }
    if ((IE4) || (NS6))
    {
    document.write('</DIV>');
    }
    ifloatX=floatX;
    ifloatY=floatY;
    define();
    window.onresize=define;
    lastX=-1;
    lastY=-1;
    adjust();
    </script>

     

    ****************************<br>
    *** Aqui vai a pagina ******<br>
    ****************************<br>
    No começo deste arquivo ( a partir da 4a linha) tem o seguinte:<br><br>

    floatX=10;<br>
    floatY=10;<br>
    layerwidth=100;<br>
    layerheight=130;<br>
    align="center";<br>
    valign="top";<br>
    delayspeed=3;<br>
    <br>
    <br>
    onde:<br>
    floatX é o espaço que quer da margem esquerda.<br>
    floatY é o espaço que quer da margem superior.<br>
    layerwidth é a largura da janela flutuante.<br>
    layerheight é a altura da janela flutuante.<br>
    align é o alinhamento horizontal (pode ser left, center, ou right).<br>
    valign é o alinhamento vertical (pode ser top, center, ou bottom).<br>
    delayspeed é o tempo para a janela começar a descer.<br>
    <h1>....</h1>
    <h1>....</h1>
    <h1>....</h1>
    <h1>....</h1>
    <h1>....</h1>
    <h1>....</h1>
    <h1>....</h1>
    <h1>....</h1>
    <h1>....</h1>
    <h1>....</h1>
    <h1>....</h1>
    <h1>....</h1>
    <h1>....</h1>
    <h1>....</h1>
    <h1>....</h1>
    <h1>....</h1>

    </body>
    </html>


    Menu.rar [2.49 KB]


    Este post foi editado por Oliveira Dario em 15 de julho de 2013 01:50:56 ART"