Bom galera, segue um pequeno código JavaScript que faz um menu flutuante na página.
Exemplo: www.absoluteanime.com

CODE
window.onresize = floatNavAdjust;
quickNavMode = fixInt(getCookie('quickNavMode'),0,1,2);//0:off, 1:on, 2:minimized
var floatNavStatus = new Array();
if(document.images) {
  txtbg = new Image(152,46);
  txtbg.src="/!bin/floatnav/6666cc/text-bg.gif";
}

function getPageHeight() {
    var h = 0;
    if(typeof(window.innerHeight) == 'number') { //Non-IE
        h = window.innerHeight;
    } else if(document.documentElement && document.documentElement.clientHeight) { //IE 6+ in 'standards compliant mode'
        h = document.documentElement.clientHeight;
    } else if(document.body && document.body.clientHeight) { //IE 4 compatible
        h = document.body.clientHeight;
    }
    return(h);
}

function floatNavToggle(obj) {
    if(quickNavMode == 0) return;
    quickNavMode = ((quickNavMode == 1) ? 2 : 1);
    if(!(obj)) {
        if((obj = document.getElementById("floatNavToggleImg"))) {
            obj.src = (quickNavMode == 1) ? obj.src.replace("-plus.","-minus.") : obj.src.replace("-minus.","-plus.");
        }
        setCookie('quickNavMode',quickNavMode);    
    }
    if((obj = document.getElementById("floatNavBody"))) {
        obj.style.display = ((quickNavMode == 1) ? "block" : "none");
    }
}

function floatNavIn() {
    if(quickNavMode == 0 || quickNavMode == 1) return;
    quickNavMode = 2;
    floatNavToggle("temp");
    quickNavMode = 2;
}

function floatNavOut() {
    if(quickNavMode == 0 || quickNavMode == 1) return;
    quickNavMode = 1;
    floatNavToggle("temp");
}

function floatNavAdjust() {
    var obj = document.getElementById("floatNav");
    if(!obj || !(obj.style)) return;
    if(getPageWidth() < (750 + 16 + (46 * 2))) {
        obj.style.display = "none";
    } else {
        obj.style.display = "block";
        obj.style.height = getPageHeight() - 2; //For IE
    }
}

function floatNavShow(obj) {
    if(floatNavStatus[obj.id]) clearTimeout(floatNavStatus[obj.id])
    if(typeof(obj) == "string") obj = document.getElementById(obj);
    var divs = obj.getElementsByTagName("div");
    for(var i=0; i<divs.length; i++) {
        if(divs[i].className == "floatNavText") {
            divs[i].style.display = "block";
            return;
        }  
    }    
}

function floatNavHide(obj) {
    var id = obj.id;
    floatNavStatus[id] = setTimeout("floatNavHideNow('" + id + "')",10);
}

function floatNavHideNow(obj) {
    if(typeof(obj) == "string") obj = document.getElementById(obj);
    var divs = obj.getElementsByTagName("div");
    for(var i=0; i<divs.length; i++) {
        if(divs[i].className == "floatNavText") {
            divs[i].style.display = "";
            return;
        }  
    }
}

if(quickNavMode>0 && screen.width>800) {
    floatNavArray = new Array();
    floatNavArray.push(new Array("/index.html", "home", "Home", "Vai para a HomePage")); //
//Para adicionar páginas:
//    floatNavArray.push(new Array("link", "id da div", "Titulo", "Descricao"));

    var str = "";
    for(var i=0; i<floatNavArray.length; i++) {
        var formText = "";
        str += "<div class='floatNavLink' id='floatNavLink0" + i + "' onmouseover='floatNavShow(this)' onmouseout='floatNavHide(this)'>";
        str += "\t<div class='floatNavIcon'><a href='" + floatNavArray[i][0] + "'><img src='/!bin/floatnav/icon-" + floatNavArray[i][1] + ".gif' width=38 height=38 border=0 class='floatNavIcon' alt=''><\/a><\/div>";
        str += "\t<div class='floatNavText'><a href='" + floatNavArray[i][0] + "'>" + floatNavArray[i][2]  + ((floatNavArray[i][3] == "") ? "" : ("<br><span class='linkInfo'>" + floatNavArray[i][3] + "<\/span>")) + "<\/a>" + formText + "<\/div>";
        str += "<\/div>";
    }
    document.write("<div id='floatNav' onMouseOver='floatNavIn()' onMouseOut='floatNavOut()'><div id='floatNavHead' onClick='floatNavToggle()'>menu<\/div><div id='floatNavBody'" + (quickNavMode == 2 ? " style='display:none'" : "") + ">" + str + "<\/div><\/div>");
}

floatNavAdjust();


A única coisa que eu não descobrir foi como colocar o formulário igual dos caras ali ;D

Você gostou? Comente no fórum!

Comentários:

AglioEoliO disse:

Legal esse menuzim, economiza um belo espaço com células em foruns por exemplo...


Você sabe dizer a compatibilidade dele? Se roda no IE4, 5, 6, FF1.0, 1.5, etc?

no FF2.0 eu sei que funciona, acabei de testar aqui...


Valeu pelo codigo

Micox disse:

Mas lembre-se que menus feitos em javascript e sem correspondente aos links no HTML ficam inacessíveis ao google e a quem não tem javascript. então use com moderação joia.gif

Ver o restante dos comentários no fórum (e aproveitar pra comentar também !).

Mais recentes em JavaScript e Ajax

Máscara para bloqueio de caracteres !
Por PedroCaminha - Uma mão na roda!...
Animate to class (plugin para jquery)
Por dragun - Faça animações diretamente para uma classe...
Background randomico
Por JoneMulti - As vezes voce e pergunta "como é que aquele site...
Abandone o getelementbyid
Por Micox - “wtf mico? are you crazy?” - calma malucada, não estou...
Funções javascript equivalentes a funções
Por Micox - Php to javascript project: php.js...

Ver mais Artigos de JavaScript e Ajax.

Ver e retirar outras dúvidas no fórum Webly.

Alguns Direitos Reservados | RSS | O Fórum

Webly Portal e Fóruns - Internet + Humana | Design by ArthurHenrique.com