Olhem Que Show Esse Menu!

Pilantra · Dezembro 17, 2004

Dae pessoal

Olha só os menus pop que fizeram nessa página!!! Parece o Outlook, quem ve de longe da impressão que realmente é um aplicativo pro Windows XP!!! Ficou show de bola!!!

1º Menu

2º Menu

3º Menu

Poxa gente eu fiquei tarado por esses menus, eu quero um pra fazer no meu site da loja, alguém sabe como se faz!? Pelo menos os procedimentos pra criar o menu pop que até hoje eu não sei fazer direito, pois a aparencia eu me viro!!!

Obrigado galera

Inté

Pilantra

Gladisson · Dezembro 18, 2004

Veja um menu bem simples.

<script>
function MeNOsG(id) { var itm = null;
if (document.getElementById) {itm = document.getElementById(id);}
else if (document.all){itm = document.all[id];}
else if (document.layers){itm = document.layers[id];}
if (itm.style) {
if (itm.style.display == "none") { itm.style.display = ""; }
else {itm.style.display = "none"; }
}else {itm.visibility = "show"; }
}
</script>
<A ONMOUSEOVER="MeNOsG('M1')" ONMOUSEOUT="MeNOsG('M1')">ABRIR
<DIV ID='M1' STYLE="display:none;position:absolute;">
<TABLE WIDTH='140' CELLPADDING='4' CELLSPACING='1' BORDER='0' BGCOLOR='#888888'>
<TR HEIGHT='20'><TD BGCOLOR='#CCCCCC'>» Link 01</TD></TR>
</TABLE></DIV>
</TD></TR></TABLE></A>

Axo que pode servir de base, tirei o script do fórum!

Pilantra · Dezembro 19, 2004

Opa valeu cara!! Eu peguei um script aqui do scriptbrasil também e funciona legal mas tá muito complicado de entender!!! mas o seu ae tá bem facinho, eu sei que tem uma função de criar o popup mesmo, inclusive eu estava estudando ele a um tempo atrás mas como parei perdi totalmente o ritmo mas agora eu vo fundo!!!!

Valeu

falou

Pilantra

Gladisson · Dezembro 19, 2004

Esse que eu "montei", o script é do código do fórum da resposta rápida eu somente utilizei o evento ONMOUSEOVER, ONMOUSEOUT para fazer o efeito, em vez de link.

Pilantra · Dezembro 19, 2004

Pessoal, tava vasculhando o meu baú de códigos e olha o que achei, as funções pra criar um popup!!!! Um presentinho de natal pra quem sempre sonhou em montar o seu próprio menu pop

oPopup = window.createPopup( [vArgs])

E um exemplo basico:

<HTML>
<HEAD>
<TITLE>Exemplo de Menu Popup</TITLE>
<script LANGUAGE="JScript">
var oPopup = window.createPopup();
function ButtonClick()
{
var oPopBody = oPopup.document.body;
oPopBody.style.backgroundColor = "lightyellow";
oPopBody.style.border = "solid black 1px";
oPopBody.innerHTML = "Click outside <B>popup</B> to close.";
oPopup.show(100, 100, 180, 25, document.body);
}
</SCRIPT>
</HEAD>
<BODY>
<BUTTON onclick="ButtonClick()">Clique aqui!</BUTTON>
</BODY>
</HTML>

É só estudar a função agora e criar o seu menu pop, eu estou vendo se dá pra por exemplo, o menu carregar uma outra página que o menu já esteja pronto!!! Era nisso que eu estava trabalhando na época, mas dae eu desisti!!! Mas vou retomar de novo, quem conseguir posta ae!!!

falou

Pilantra

Gladisson · Dezembro 19, 2004

Está dando erro! Ou é este código que você quer ajeitar.

Pilantra · Dezembro 19, 2004

Erro!? Ora, aqui tá normal, dá erro se você for mexer no innerHTML e não mexer direito ae dá erro!!!!

Pilantra · Dezembro 19, 2004

Olhem o meu código modificado!!! Eu quero agora chamar aqueles class no evento mouserover pra fazer aquele efeito do menu do XP, eu testei em html puro e ficou muito bonitto mas eu não consigo chamar ele dentro do innerHTML, alguém sabe como?! Vejam:

<HTML>
<HEAD>
<style type="text/css">

</style>
<TITLE>Exemplo de Menu Popup</TITLE>
<script LANGUAGE="JScript">
/* popup.show(iX, iY, iWidth, iHeight [, oElement])
*/
var oPopup = window.createPopup();
function ButtonClick()
{
var oPopBody = oPopup.document.body;
oPopBody.style.backgroundColor = "white";
oPopBody.style.border = "solid silver 1px";
oPopBody.innerHTML = "<table width=126 border=1 cellspacing=0 cellpadding=0 style=cursor=hand><tr><td> Item 1</td></tr></table><table width=126 border=1 cellspacing=0 cellpadding=0 style=cursor=hand><tr><td> Item 2</td></tr></table><table width=126 border=1 cellspacing=0 cellpadding=0 style=cursor=hand><tr><td> Item 3</td></tr></table><table width=126 border=1 cellspacing=0 cellpadding=0 style=cursor=hand><tr><td> Item 4</td></tr></table><table width=126 border=1 cellspacing=0 cellpadding=0 style=cursor=hand><tr><td> Item 5</td></tr></table>";
oPopup.show(50, 40, 129, 118, document.body);
}
</SCRIPT>
</HEAD>
<BODY>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><a href="javascript: ButtonClick()"><strong><font color="#000000">Menu
1</font></strong></a></td>
<td>Menu 2</td>
<td>Menu 3</td>
<td>Menu 4</td>
<td>Menu 5</td>
</tr>
</table>
</BODY>
</HTML>

É só copiar e colar pra ver, a unica opção que funciona é o Menu 1, os outros eu ainda não colquei

Renyo · Dezembro 19, 2004

Opa...aqui tem mais outro tipo igual o que se posto...

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<!-- saved from url=(0040)http://www.scriptfacil.com/novomenu.html -->
<HTML><HEAD>
<META http-equiv=Content-Type content="text/html; charset=windows-1252">
<META content="Microsoft FrontPage 5.0" name=GENERATOR></HEAD>
<BODY onresize="if (isNS4) nsResizeHandler()" style="MARGIN: 0px" 
onload=writeMenus()><!--------COMEÇA AQUI-------------->
<script language=JavaScript>
<!-- Begin
var isDOM = (document.getElementById ? true : false); 
var isIE4 = ((document.all && !isDOM) ? true : false);
var isNS4 = (document.layers ? true : false);
function getRef(id) {
if (isDOM) return document.getElementById(id);
if (isIE4) return document.all[id];
if (isNS4) return document.layers[id];
}
function getSty(id) {
return (isNS4 ? getRef(id) : getRef(id).style);
} 

var popTimer = 0;

var litNow = new Array();
function popOver(menuNum, itemNum) {
clearTimeout(popTimer);
hideAllBut(menuNum);
litNow = getTree(menuNum, itemNum);
changeCol(litNow, true);
targetNum = menu[menuNum][itemNum].target;
if (targetNum > 0) {
thisX = parseInt(menu[menuNum][0].ref.left) + parseInt(menu[menuNum][itemNum].ref.left);
thisY = parseInt(menu[menuNum][0].ref.top) + parseInt(menu[menuNum][itemNum].ref.top);
with (menu[targetNum][0].ref) {
left = parseInt(thisX + menu[targetNum][0].x);
top = parseInt(thisY + menu[targetNum][0].y);
visibility = 'visible';
      }
   }
}
function popOut(menuNum, itemNum) {
if ((menuNum == 0) && !menu[menuNum][itemNum].target)
hideAllBut(0)
else
popTimer = setTimeout('hideAllBut(0)', 500);
}
function getTree(menuNum, itemNum) {


itemArray = new Array(menu.length);
while(1) {
itemArray[menuNum] = itemNum;

if (menuNum == 0) return itemArray;
itemNum = menu[menuNum][0].parentItem;
menuNum = menu[menuNum][0].parentMenu;
   }
}


function changeCol(changeArray, isOver) {
for (menuCount = 0; menuCount < changeArray.length; menuCount++) {
if (changeArray[menuCount]) {
newCol = isOver ? menu[menuCount][0].overCol : menu[menuCount][0].backCol;

with (menu[menuCount][changeArray[menuCount]].ref) {
if (isNS4) bgColor = newCol;
else backgroundColor = newCol;
         }
      }
   }
}
function hideAllBut(menuNum) {
var keepMenus = getTree(menuNum, 1);
for (count = 0; count < menu.length; count++)
if (!keepMenus[count])
menu[count][0].ref.visibility = 'hidden';
changeCol(litNow, false);
}
function Menu(isVert, popInd, x, y, width, overCol, backCol, borderClass, textClass) {

this.isVert = isVert;

this.popInd = popInd

this.x = x;
this.y = y;
this.width = width;

this.overCol = overCol;
this.backCol = backCol;

this.borderClass = borderClass;
this.textClass = textClass;

this.parentMenu = null;
this.parentItem = null;

this.ref = null;
}

function Item(text, href, frame, length, spacing, target) {
this.text = text;
this.href = href;
this.frame = frame;
this.length = length;
this.spacing = spacing;
this.target = target;

this.ref = null;
}

function writeMenus() {
if (!isDOM && !isIE4 && !isNS4) return;

for (currMenu = 0; currMenu < menu.length; currMenu++) with (menu[currMenu][0]) {

var str = '', itemX = 0, itemY = 0;


for (currItem = 1; currItem < menu[currMenu].length; currItem++) with (menu[currMenu][currItem]) {
var itemID = 'menu' + currMenu + 'item' + currItem;


var w = (isVert ? width : length);
var h = (isVert ? length : width);


if (isDOM || isIE4) {
str += '<div id="' + itemID + '" style="position: absolute; left: ' + itemX + '; top: ' + itemY + '; width: ' + w + '; height: ' + h + '; visibility: inherit; ';
if (backCol) str += 'background: ' + backCol + '; ';
str += '" ';
}
if (isNS4) {
str += '<layer id="' + itemID + '" left="' + itemX + '" top="' + itemY + '" width="' +  w + '" height="' + h + '" visibility="inherit" ';
if (backCol) str += 'bgcolor="' + backCol + '" ';
}
if (borderClass) str += 'class="' + borderClass + '" ';


str += 'onMouseOver="popOver(' + currMenu + ',' + currItem + ')" onMouseOut="popOut(' + currMenu + ',' + currItem + ')">';


str += '<table width="' + (w - 8) + '" border="0" cellspacing="0" cellpadding="' + (!isNS4 && borderClass ? 3 : 0) + '"><tr><td align="left" height="' + (h - 7) + '">' + '<a class="' + textClass + '" href="' + href + '"' + (frame ? ' target="' + frame + '">' : '>') + text + '</a></td>';
if (target > 0) {


menu[target][0].parentMenu = currMenu;
menu[target][0].parentItem = currItem;


if (popInd) str += '<td class="' + textClass + '" align="right">' + popInd + '</td>';
}
str += '</tr></table>' + (isNS4 ? '</layer>' : '</div>');
if (isVert) itemY += length + spacing;
else itemX += length + spacing;
}
if (isDOM) {
var newDiv = document.createElement('div');
document.getElementsByTagName('body').item(0).appendChild(newDiv);
newDiv.innerHTML = str;
ref = newDiv.style;
ref.position = 'absolute';
ref.visibility = 'hidden';
}


if (isIE4) {
document.body.insertAdjacentHTML('beforeEnd', '<div id="menu' + currMenu + 'div" ' + 'style="position: absolute; visibility: hidden">' + str + '</div>');
ref = getSty('menu' + currMenu + 'div');
}


if (isNS4) {
ref = new Layer(0);
ref.document.write(str);
ref.document.close();
}

for (currItem = 1; currItem < menu[currMenu].length; currItem++) {
itemName = 'menu' + currMenu + 'item' + currItem;
if (isDOM || isIE4) menu[currMenu][currItem].ref = getSty(itemName);
if (isNS4) menu[currMenu][currItem].ref = ref.document[itemName];
   }
}
with(menu[0][0]) {
ref.left = x;
ref.top = y;
ref.visibility = 'visible';
   }
}



var menu = new Array();

// Cor do link selecionado
var defOver = '#336699', defBack = '#003366';

// Tamanho da coluna
var defLength = 22;


menu[0] = new Array();

menu[0][0] = new Menu(false, '', 5, 0, 17, '#669999', '#006666', '', 'itemText');

// Mude aqui a relação de links.
menu[0][1] = new Item('  Pastas', '#', '', 40, 10, 1);
menu[0][2] = new Item('  Arquivos', '#', '', 40, 10, 2);
menu[0][3] = new Item('  &nbsp;&nbsp;Outros', '#', '', 40, 10, 3);
// // Relação dos links do Site1
menu[0][4] = new Item(' &nbsp;&nbsp;Site1', 'suapagina.html', '_new', 40, 10, 0);
// // Relação dos links do Site 2
menu[0][5] = new Item(' Site 2', 'suapagina.html', '_new', 40, 10, 0);
// File menu.
menu[1] = new Array();
// The File menu is positioned 0px across and 22 down from its trigger, and is 80 wide.
// All text in this menu has the stylesheet class 'item' -- see the <style> section above.
// Relação dos links de pastas
menu[1][0] = new Menu(true, '>', 0, 22, 80, defOver, defBack, 'itemBorder', 'itemText');
menu[1][1] = new Item('link1', 'suapagina.html', '', defLength, 0, 0);
menu[1][2] = new Item('link2', 'suapagina.html', '', defLength, 0, 0);
// // Relação dos links pastas - link 3
menu[1][3] = new Item('link3', '#', '', defLength, 0, 4);
menu[1][4] = new Item('link4', 'suapagina.html', '', defLength, 0, 0);

// Relação dos links de arquivos
menu[2] = new Array();
menu[2][0] = new Menu(true, '>', 0, 22, 80, defOver, defBack, 'itemBorder', 'itemText');
menu[2][1] = new Item('link1', 'suapagina.html', '', defLength, 0, 0);
menu[2][2] = new Item('link2', 'suapagina.html', '', defLength, 0, 0);
menu[2][3] = new Item('link3', 'suapagina.html', '', defLength, 0, 0);

// Relação dos links de outros
menu[3] = new Array();
menu[3][0] = new Menu(true, '<', 0, 22, 80, defOver, defBack, 'itemBorder', 'itemText');
menu[3][1] = new Item('link1', 'suapagina.html', '', defLength, 0, 0);
menu[3][2] = new Item('link2', 'suapagina.html', '', defLength, 0, 0);
menu[3][3] = new Item('link3', 'suapagina.html', '', defLength, 0, 5);


menu[4] = new Array();

menu[4][0] = new Menu(true, '>', 85, 0, 120, '#333366', '#666699', 'crazyBorder', 'crazyText');
menu[4][1] = new Item('link1', 'suapagina.html', '', 36, 4, 0);
menu[4][2] = new Item('link2', 'suapagina.html', '', 36, 7, 0);
menu[4][3] = new Item('link3', 'suapagina.html', '', defLength, 0, 0);
menu[5] = new Array();
menu[5][0] = new Menu(true, '>', -85, -17, 80, defOver, defBack, 'itemBorder', 'itemText');
menu[5][1] = new Item('uma mensagem', 'suapagina.html', '', 40, 0, 0);

var popOldWidth = window.innerWidth;
nsResizeHandler = new Function('if (popOldWidth != window.innerWidth) location.reload()');

if (isNS4) document.captureEvents(Event.CLICK);
document.onclick = clickHandle;

function clickHandle(evt)
{
 if (isNS4) document.routeEvent(evt);
 hideAllBut(0);
}

function moveRoot()
{
 with(menu[0][0].ref) left = ((parseInt(left) < 100) ? 100 : 5);
}
//  -->
</SCRIPT>

<STYLE>.itemBorder {
	BORDER-RIGHT: black 1px solid; BORDER-TOP: black 1px solid; BORDER-LEFT: black 1px solid; BORDER-BOTTOM: black 1px solid
}
.itemText {
	FONT: 12px Arial, Helvetica; COLOR: #ffffff; TEXT-DECORATION: none
}
.crazyBorder {
	BORDER-RIGHT: #663399 2px outset; BORDER-TOP: #663399 2px outset; BORDER-LEFT: #663399 2px outset; BORDER-BOTTOM: #663399 2px outset
}
.crazyText {
	FONT: bold 12px Arial, Helvetica; COLOR: #ffcc99; TEXT-DECORATION: none
}
</STYLE>

<TABLE cellSpacing=0 cellPadding=0 width="100%" bgColor=#006666 border=0>
  <TBODY>
  <TR>
    <TD height=17><FONT size=1></FONT></TD></TR></TBODY></TABLE><!--------TERMINA AQUI-------------></BODY></HTML>

falo...

Pilantra · Dezembro 19, 2004

E ae!!

Esse script eu já tenho, foi o que eu peguei aqui no scriptbrasil, porém é muito complicado, eu não quero somente modifica um código, mas sim aprender!!! Dae eu to começando de baixo pelo método de pop e assim vamo aperfeiçoando!!!

Valeu

falou

Pilantra

Gladisson · Dezembro 19, 2004

Pilantra cara, o seu dois código aqui não funcionou, qual bronse e versão você utiliza ? O script que o Renyo postou, funcionou.

Pilantra · Dezembro 19, 2004

Ueh cara que estranho, eu to no Windows XP por isso to rodando no I.E!!! Mas eu abri o Firefox aqui e não funcionou, eu acho que tenho que fazer uma validação pra rodar nas variants do netscape sei la!!!

Se você usa Linux então ainda não vai funcionar!!!

Illidan · Dezembro 20, 2004

Estou achando que o problema está com este método: window.createPopup();

Deve ser ele que não funciona no Mozilla... pois pelo o que eu vi, o restante do seu código estaria compatível.

Até!

Malluco · Dezembro 21, 2004

no fireworks se faz uns menus do estilo .. depois é só modificar os codigos gerados por ele por um do seu gosto

falou !!

Entrar

Olhem Que Show Esse Menu!

Pergunta

Link para o comentário

Compartilhar em outros sites

13 respostass a esta questão

Posts Recomendados

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Participe da discussão

Estatísticas dos Fóruns