Menu Sobreposto à Página

[adriano182]

Galera, não tenho experiência com JS, DHTML.. trabalho mais com flash! gostaria de saber como fazem aqueles menus q quando passam o mouse por uma opção abre um submenu sobre a pagina!

alguém pode me ajudar?

Abraço!

[OSJunior]

Um exemplo fácil:

menu.js

var ie4 = document.all;

var objAtivo, strAlvo, cntMenu;
var arrTemp = ie4.txtArea.value.split("\r\n"); // joga cada linha do txtArea numa posicao de um array
var txt = new Array();
var cnt = 0;
for (i in arrTemp) if (arrTemp[i]) txt[cnt++] = arrTemp[i].split("\t"); // elimina linhas q não tem nada
arrMenus = CriaMenu();

function CriaMenu(indice, ehTit) {
	if (!indice) indice = 0;
	var cnt = 0;
	var a = new Array();
	if (ehTit) a.tit = txt[indice][txt[indice++].length-1].split("|");
	outerLoop:
	for (i=indice; i<txt.length; i++) {
  var item = txt[i];
  var proxItem = (i < txt.length-1) ? txt[i+1] : item;
  if (item.length >= proxItem.length) { // se a identacao desta linha for maior ou igual a da proxima... (se o item atual não tiver submenu)
  	a[cnt++] = item[item.length-1].split("|"); // cria mais um item normal
  	if (proxItem.length < item.length) break; // se tiver acabado a listagem desse menu, finaliza o loop de criacao de menu
  }
  else {
  	a[cnt++] = CriaMenu(i, "ehTit"); // se o item da vez deve ter submenu, cria um submenu pra ele
  	for (j=i+1; j<txt.length-1; j++) { // procura o proximo item (pulando submenus)
    if (txt[j].length < item.length) break outerLoop; // se este for o ultimo item do atual menu, aborta o loop de menus (externo)
    else if (txt[j].length == item.length) break; // se achar proximo item deste menu, aborta a busca e continua o loop externo
  	}
  }
	}
	return a;
}

function EscondeLys(intIni) {
	status = "";
	for (i=intIni; i<=10; i++) ie4.lyNivelMenu[i].style.visibility = "hidden"; // fecha todos os submenus abaixo do menu q serah aberto
}

function MouseSobre(objTd, strRefMenu) {
	if (objTd == objAtivo) return; // se for o mesmo menu q já estah aberto, aborta
	else objAtivo = objTd; // referencia ao td onde estah o mouse

	var nivelMenu = ArrNiveisMenu(strRefMenu).length - 1; // nivel do menu aberto
	EscondeLys(nivelMenu + 1); // esconde todos os lys de menu q estejam em nivel abaixo do atual

	if (typeof eval("arrMenus"+ strRefMenu +"[0]") == "string") return; // se não houver submenu para o item onde estah o mouse aborta

	var lyMenuClic = ie4.lyNivelMenu[nivelMenu]; // referencia ao menu (ly) do item onde estah o mouse
	var intOpClic = strRefMenu.substring(strRefMenu.lastIndexOf("[")+1, strRefMenu.length-1); // num do item onde estah o mouse [0..n]
	var ehHoriz = EhHoriz(nivelMenu);

	var x = ((nivelMenu) ? lyMenuClic.style.pixelLeft + distSubsHoriz : objTd.offsetLeft) + ((ehHoriz) ? -1 : objTd.offsetWidth + 1*((ehHoriz) ? intOpClic : 1));
	var y = lyMenuClic.style.pixelTop + ((ehHoriz) ? 1 : distSubsVert) + objTd.offsetHeight * ((ehHoriz) ? 1 : intOpClic);

	DesenhaMenu(strRefMenu, x, y);
}

function ArrNiveisMenu(strRefMenu) { // Retorna array com niveis do menu. ex: "[1][1][2]" -> [1, 1, 2]
	if (!strRefMenu) return new Array();
	else return strRefMenu.substring(1, strRefMenu.length-1).split("]["); // ve o NIVEL DO MENU (0=mainMenu, 1=submenu, 2=sub-submenu, ...)
}

function EhHoriz(intNivelMenu) {
	var n = (intNivelMenu < 2) ? intNivelMenu : 2;
	return (arrInfosMenus[n][0] == "horiz");
}

function DesenhaMenu(strRefMenu, x, y) { // ex: ("[0][2]", 120, 200) -> <primeiro menu, terceira opcao do submenu>, x, y
	if (!strRefMenu) strRefMenu = "";

	eval("var arrMenuWork = arrMenus"+ strRefMenu); // referencia ao menu da vez. ex:  arrMenuWork = arrMenus[0][2]

	var nivelMenu = ArrNiveisMenu(strRefMenu).length;
	var nivelInfoMenu = (nivelMenu < 2) ? nivelMenu : 2;
	var largItemPai = (nivelMenu) ? ie4[strRefMenu].offsetWidth + 1 : 0;
	var ehHoriz = EhHoriz(nivelMenu);

	var strHtml = 
  "<table "
  + ((nivelMenu && EhHoriz(nivelMenu-1)) ? "width="+ largItemPai : "")
  + ((!nivelMenu) ? " width="+ largMain + " height="+ altMain : "")
  + " bgcolor="+ arrInfosMenus[nivelInfoMenu][6]
  + " cellpadding=1"
  + " cellspacing=1 border=0"
  + ">\n";
	if (ehHoriz) strHtml += "<tr>\n";
	var strClasse = (nivelMenu==0) ? "menu" : (nivelMenu==1) ? "submenu" : "sub-submenu";

	var strPath = "";
	for (i=0; i < nivelMenu; i++) { // vai montando a url completa a partir das urls dos itens anteriores
  var strUrl = eval("arrMenus"+ strRefMenu.substring(0,(i+1)*3)).tit[1]; // url do menu principal ex: "http://vila.bol.com.br" no caso do menu VilaBOL
  if (strUrl.indexOf("http://") == 0) {
  	if (strUrl.indexOf("/", 7) < 0) strUrl += "/"; // se tiver url no menu principal e não tiver "/" depois do dominio, poe "/"
  	strPath = strUrl;
  }
  else strPath += strUrl.substring(0, strUrl.lastIndexOf("/")+1);
	}

	for (cntMenu=0; cntMenu < arrMenuWork.length; cntMenu++) {
  var blnTemSubmenu = (typeof arrMenuWork[cntMenu][0] == "object");
  var arrDadosItem = (blnTemSubmenu) ? arrMenuWork[cntMenu].tit : arrMenuWork[cntMenu];
  var ehImg = /\.jpg|\.gif/.test(arrDadosItem[0]); // ve se o texto é, na verdade, a url de uma imagem
  var strLink = "";

  // link
  arrDadosItem[1] = arrDadosItem[1].replace(/"/g, "'"); // trocas as aspas simples por \' e as duplas por simples

  var strUrl = "";
  if (arrDadosItem[1].indexOf("javascript:") == 0) strLink = arrDadosItem[1].slice(11); // se for comando em js, poe só o comando, sem o "javascript:"
  else {
  	if (arrDadosItem[1].indexOf("http://") == 0) strUrl = "";
  	else if (arrDadosItem[1].charAt(0) == "/") strUrl = strPath.substring(0, strPath.indexOf("/", 7)); // se o link comecar com "/", pega só o dominio na url base
  	else strUrl = strPath;

  	strUrl = strUrl + arrDadosItem[1];
  	if (strAlvo = arrDadosItem[2]) { // se tiver target
    if (strAlvo == "new") strLink = "window.open('"+ strUrl +"')";
    else if (strAlvo == "top" || strAlvo == "parent") strLink = strAlvo +"."+ strUrl; // ex: parent.location.href = "www..."
  	}
  	else strLink = "location.href='"+ strUrl +"'";
  }
  // /link

  if (!ehHoriz) strHtml += "<tr>\n";
  strHtml += 
  	"\t<td id='"+ strRefMenu+"["+cntMenu+"]'"
  	+ " bgcolor='"+ arrInfosMenus[nivelInfoMenu][3] +"'"
  	+ " class="+ strClasse
  	+ " onmouseover=\""
    + "MouseSobre(this, '"+ strRefMenu + "[" + cntMenu +"]');"
    + ((!ehImg) ? " this.style.background = arrInfosMenus["+ nivelInfoMenu +"][4];" : "")
    + " status='"+ ((strUrl.indexOf("javascript:") == 0) ? "" : strUrl) +"'; return true;"
  	+ "\""
  	+ ((!ehImg) ? 
     " onmouseout=\"this.style.background=arrInfosMenus["+ nivelInfoMenu +"][3];\"" : ""
  	)
  	+ ((arrDadosItem[1]) ? // se tiver link
    " style='cursor:hand'"
    + " onclick=\""+ strLink +"\"" // se tiver link, coloca
     : "" 
  	)
  	+ "><nobr>&nbsp;"
  	+ ( (!ehImg) ? arrDadosItem[0] : "<img src='"+ strDirImgs + arrDadosItem[0] + "'>") // senao é porque é imagem, então poe a tag <img>
  	+ ( (blnTemSubmenu && nivelMenu) ? " <img src='"+ strDirImgs +"seta_"+ ((ehHoriz) ? "baixo" : "dir") +".gif' width=7 height=7>" : "" ) // se em vez de txt for img, poe a tag <img>
  	+ "&nbsp;</nobr></td>\n";
  if (!ehHoriz) strHtml += "</tr>\n";
	}

	if (ehHoriz) strHtml += "</tr>";
	strHtml += "</table>\n";

	if (!nivelMenu) return strHtml; // se for menu principal
	else { // se for qualquer outro submenu
  var ly = ie4.lyNivelMenu[nivelMenu];
  ly.style.left = x;
  ly.style.top = y;
  ly.innerHTML = strHtml;
  ly.style.visibility = "visible";
	}
}

var strHtml = 
	"<style>\n"
	+ ".menu, .submenu, .sub-submenu {font-family:"+ strFontMenus +"; text-decoration:none;}\n"
	+ ".menu {color:"+ arrInfosMenus[0][1] +"; font-size:"+ arrInfosMenus[0][2] +";}\n"
	+ ".submenu {color:"+ arrInfosMenus[1][1] +"; font-size:"+ arrInfosMenus[1][2] +";}\n"
	+ ".sub-submenu {color:"+ arrInfosMenus[2][1] +"; font-size:"+ arrInfosMenus[2][2] +";}\n"
	+ "</style>\n\n"
	+ "<span id=lyMouseOver" // layer invisivel, de fundo, para fechar o menu quando o mouse for pra cima dele.
  + " onmouseover='EscondeLys(1); objAtivo=null;'" // se o mouse sair de cima do menu, sendo q o menu estah aberto, então o fecha
  + " style='position:absolute;left:0;top:0;width:"+ document.body.clientWidth +";height:"+ document.body.clientHeight +";'></span>"
	+ "<span id=lyMenus style='position:relative;'>\n"
	+ "	<span id=lyNivelMenu style='position:relative;'>"+ DesenhaMenu() +"</span>\n";
for (i=0; i<10; i++) strHtml += 
  "	<span id=lyNivelMenu style='position:absolute;visibility:hidden;'></span>\n";

strHtml += "</span>";
document.write(strHtml);

e menu.html

<html><head><title>Menu DHTML</title></head>
<body bgcolor=white link=#003399 vlink=#003399 alink=#003399>

<form name=fMenu>
<textarea cols=0 rows=0 name=txtArea style="position:absolute; visibility:hidden; display:none;">
VilaBOL|http://vila.bol.com.br
	Editores de sites|editores/construa.html
  SuperEditor BOL|/supereditor.html|new
  Passo-a-passo|passo_a_passo.html
  	Curriculo|passo_a_passo_inicio_cv.html
  	Personalidade|passo_a_passo_inicio_personalidade.html
  	Receitas|passo_a_passo_inicio_rec.html
  Passo-a-passo crianças|passo_a_passo_criancas.html
  Editor HTML|basico.html
	Gerenciador de arquivos|gerenciador.html
	Complementos|complementos/index.html
	Categorias|categoriasvilabol/index.html
  Busca|javascript:location.href="http://dir.bol.com.br:8000/categoriasvilabol.html?keyword="+ prompt("Buscar por:", "") +"&RequestType=ssr&condition=1"
  Arte e Cultura|arte_e_cultura/index.html
  Dinheiro|dinheiro/index.html
  Educação|educacao/index.html
  Esporte|esporte/index.html
  Infantil|infantil/index.html
  Informática e Internet|informatica_e_internet/index.html
  Lazer|lazer/index.html
  Notícias|noticias/index.html
  Saúde|saude/index.html
  Sexo|sexo/index.html
  Sociedade|sociedade/index.html

Miner|http://miner.bol.com.br
	Bancos de Dados|
  Arquitetura|arquiteturaminer.html
  Direito|jurisminer.html
  Imagens e fotos|iamgeminer.html
  Medicina e Saúde|medminer.html
	Compras|
  Brinquedos|brinquedominer.html
  Carros|carrosminer.html
  Casa|casaminer.html
  CDs|cdminer.html
  Computadores e Eletrônicos|compuminer.html
  Leilão|leilaominer.html
  Livros|livrosminer.html
  Shopping UOL|shoppinguolminer.html
  Vídeos |videominer.html
	Informática|
  ERP|erpminer.html
  Java|javaminer.html
  Linux|linuxminer.html
  Palm|palmminer.html
  Software|softminer.html
	Lazer|
  Cozinha|receitaminer.html
  EspiãoMiner|espiaominer.html
  Jogos|jogosminer.html
  Sexo|sexminer.html
  Turismo|turisminer.html
	Música|
  Áudio|audiominer.html
  Notícias|musicaminer.html
  Letras|letrasminer.html
  MP3|mp3miner.html
	Notícias|
  Caça-Notícias|cacanoticias.html
  Economia|econominer.html
  Planos de negócios|ecobraminer.html
  Publicidade|publicidademiner.html
  Revistas|revistasminer.html
  Tecnologia|tecminer.html
	Pessoas|
  Bate-papo|batepapominer.html
  Endereços e telefones|genteminer.html
</textarea>
<!-- 
	Formato:  Texto|Link|[new|parent|top] (o q estah entre [] (target) é opcional)
	obs: o link pode ser javascript. ex: javascript:comando
-->
<script language="JavaScript1.1">
var largMain = 150; // largura das celulas (pode variar caso o texto exceda o tamanho)
var altMain = 15; // altura das celulas (pode variar caso o texto exceda o tamanho)
var distSubsHoriz = -10; // distancia horizontal dos submenus em relacao a lateral direita do item pai
var distSubsVert = 4; // distancia vertical dos submenus em relacao ao lado inferior do item pai
var strFontMenus = "verdana,helvetica,arial"; // font dos textos dos menus
var strDirImgs = "imgs/"; // diretorio de imagens

var i = arrInfosMenus = new Array(); // array com as cores de todos os menus
//  	["horiz"|"vert", corLink, textSize, bgCor, bgCorMouseOver, bgCorMouseDown, bordaTabela]
i[0] = new Array("horiz", "white", "10px", "black", "brown", "lightblue", "gray"); // cores do main menu
i[1] = new Array("vert", "black", "9px", "#FFCC66", "yellow", "red", "black"); // cores dos sub menus
i[2] = new Array("vert", "black", "9px", "#FFE98C", "#FFFCFC", "red", "black"); // cores dos sub-sub menus
</script>
<script src="menu.js" language="JavaScript1.1"></script>
</form>

</body>
</html>

Este código acima está demonstado com um exemplo de um site.

falou.

[adriano182]

Obrigado amigo!

Na verdade, eu não entendo de JS.. por isso eu queria, não apenas um exemplo pronto, mas um exemplo bem pequeno.. para que eu posso entender como funciona e montar alguns testes depois.. como um menu de umas 2 ou 3 opçõs q aparece um menu com mais umas 2 opções... que seja só recortar e colar, salvar com os nomes e pronto.. so pra mim ver coom é...

Desde já, agradeço!

Falow