Nenhuma avalição
COMENTAR
INDICAR
Menu MágicoPostada em: 10/09/2004
Copie o código abaixo e cole-o em suas páginas, nessa mesma ordem.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
.tdl {
font-family: Arial, Helvetica, sans-serif;
font-size:9pt;
text-decoration: none;
color: #FF9900
}
.tdl:hover {
font-family: Arial, Helvetica, sans-serif;
font-size: 9pt;
text-decoration: none;
color: #FF0033
}
.tdl:visited {
font-family: Arial, Helvetica, sans-serif;
font-size: 9pt;
text-decoration: none;
color: #FF9900
}
</style>
</head>
<body>
<div id="menum" style="position:absolute; display:none; left:0px; top:10px; z-index:2;">
<table width="130" cellpadding="0" border="1" bgcolor="#009900" cellspacing="0" bordercolor="#666666">
<tr><td onmouseover="mudacor(this,tdOverColor)" onmouseout="mudacor(this,tdOutColor)"><b> <a href="http://www.link1.com.br" class=tdl>Opção 1</a></b></td></tr>
<tr><td onmouseover="mudacor(this,tdOverColor)" onmouseout="mudacor(this,tdOutColor)"><b> <a href="http://www.link2.com.br" class=tdl>Opção 2</a></b></td></tr>
<tr><td onmouseover="mudacor(this,tdOverColor)" onmouseout="mudacor(this,tdOutColor)"><b> <a href="http://www.link3.com.br" class=tdl>Opção 3</a></b></td></tr>
<tr><td onmouseover="mudacor(this,tdOverColor)" onmouseout="mudacor(this,tdOutColor)"><b> <a href="http://www.link4.com.br" class=tdl>Opção 4</a></b></td></tr>
<tr><td onmouseover="mudacor(this,tdOverColor)" onmouseout="mudacor(this,tdOutColor)"><b> <a href="http://www.link5.com.br" class=tdl>Opção 5</a></b></td></tr>
</table>
</div>
<script>
menu = "off";
var tdOutColor = "#009900";
var tdOverColor = "#33CC00";
var x, y, b, xx, yy;
adjX = 165;
adjY = 285;
if (document.layers){
adjX += 10;
adjY += 10
}
frameAdjust = (-130);
sW = (screen.width - adjX);
if (document.all) {
sW += frameAdjust;
}
sH = (screen.height - adjY);
var isNav = (navigator.appName.indexOf("Netscape") !=-1);
if (isNav) {
document.captureEvents(Event.MOUSEMOVE | Event.MOUSEUP);
}
document.onmousemove = handlerMM;
document.onmouseup = handlerMU;
checabrowser();
function checabrowser(){
var x = navigator.appVersion;
y = x.substring(0,4);
if (y >= 4) {
setVariables();
}
}
function setVariables(){
if (navigator.appName == "Netscape" || navigator.appName == "Microsoft Internet Explorer") {
h = ".left=";
v = ".top=";
dS = "document.";
sD = "";
iW = "window.iWidth";
iH = "window.iHeight";
osX = "window.pageXOffset";
osY = "window.pageYOffset";
document.getElementById('menum').style.display = "none";
} else{
h = ".pixelLeft=";
v = ".pixelTop=";
dS = "";
sD = ".style";
iW = "document.body.clientWidth";
iH = "document.body.clientHeight";
osX = "document.body.scrollLeft";
osY = "document.body.scrollTop";
}
}
function popLayer(){
if (b==1){
if (menu == "off") {
menu = "on";
yy = (eval(osY) + y);
xx = (eval(osX) + x);
if (document.all) {
if (xx > (sW + eval(osX))) {
xx -= 155;
}
if (yy > (sH + eval(osY))) {
yy -= 100;
}
}
}
if (document.layers) {
if (x > (sW + eval(osX))) {
xx -= 155;
}
if (y > (sH + eval(osY))) {
yy -= 100;
}
}
aX = "x: " + x + ", xx: " + xx + ", sW: " + sW + ", iW: " + eval(iW);
aY = "y: " + y + ", yy: " + yy + ", sH: " + sH + ", osY: " + eval(osY);
if (isNav) {
document.getElementById('menum').left = (xx - eval(osX));
document.getElementById('menum').top = (yy - eval(osY));
document.getElementById('menum').style.display = "block";
} else {
if ((x > eval(iW)) || (y > eval(iH))) {
menu = "off";
} else{
menum.style.pixelLeft = xx;
menum.style.pixelTop = yy;
menum.style.display = "block";
}
}
} else {
if (document.layers) {
hideMenu()
}
if (document.all) {
if ((x > eval(iW)) || (y > eval(iH))) {
menu = "on";
} else {
hideMenu();
}
}
}
}
function hideMenu() {
menu = "off";
if (isNav) {
document.getElementById('menum').style.display = "none";
} else {
menum.style.display = "hidden";
}
}
function handlerMM(e) {
x = (isNav) ? e.pageX : event.clientX;
y = (isNav) ? e.pageY : event.clientY;
}
function handlerMU(e){
xx = (isNav) ? e.pageX : event.clientX;
yy = (isNav) ? e.pageY : event.clientY;
b = (isNav) ? e.which : event.button;
popLayer();
}
function mudacor(prmThis, prmColor) {
if ((window.document.all) || (window.document.getElementById)) {
prmThis.style.backgroundColor = prmColor;
} else if (window.document.layers) {
prmThis.bgColor = prmColor;
}
}
</script>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
.tdl {
font-family: Arial, Helvetica, sans-serif;
font-size:9pt;
text-decoration: none;
color: #FF9900
}
.tdl:hover {
font-family: Arial, Helvetica, sans-serif;
font-size: 9pt;
text-decoration: none;
color: #FF0033
}
.tdl:visited {
font-family: Arial, Helvetica, sans-serif;
font-size: 9pt;
text-decoration: none;
color: #FF9900
}
</style>
</head>
<body>
<div id="menum" style="position:absolute; display:none; left:0px; top:10px; z-index:2;">
<table width="130" cellpadding="0" border="1" bgcolor="#009900" cellspacing="0" bordercolor="#666666">
<tr><td onmouseover="mudacor(this,tdOverColor)" onmouseout="mudacor(this,tdOutColor)"><b> <a href="http://www.link1.com.br" class=tdl>Opção 1</a></b></td></tr>
<tr><td onmouseover="mudacor(this,tdOverColor)" onmouseout="mudacor(this,tdOutColor)"><b> <a href="http://www.link2.com.br" class=tdl>Opção 2</a></b></td></tr>
<tr><td onmouseover="mudacor(this,tdOverColor)" onmouseout="mudacor(this,tdOutColor)"><b> <a href="http://www.link3.com.br" class=tdl>Opção 3</a></b></td></tr>
<tr><td onmouseover="mudacor(this,tdOverColor)" onmouseout="mudacor(this,tdOutColor)"><b> <a href="http://www.link4.com.br" class=tdl>Opção 4</a></b></td></tr>
<tr><td onmouseover="mudacor(this,tdOverColor)" onmouseout="mudacor(this,tdOutColor)"><b> <a href="http://www.link5.com.br" class=tdl>Opção 5</a></b></td></tr>
</table>
</div>
<script>
menu = "off";
var tdOutColor = "#009900";
var tdOverColor = "#33CC00";
var x, y, b, xx, yy;
adjX = 165;
adjY = 285;
if (document.layers){
adjX += 10;
adjY += 10
}
frameAdjust = (-130);
sW = (screen.width - adjX);
if (document.all) {
sW += frameAdjust;
}
sH = (screen.height - adjY);
var isNav = (navigator.appName.indexOf("Netscape") !=-1);
if (isNav) {
document.captureEvents(Event.MOUSEMOVE | Event.MOUSEUP);
}
document.onmousemove = handlerMM;
document.onmouseup = handlerMU;
checabrowser();
function checabrowser(){
var x = navigator.appVersion;
y = x.substring(0,4);
if (y >= 4) {
setVariables();
}
}
function setVariables(){
if (navigator.appName == "Netscape" || navigator.appName == "Microsoft Internet Explorer") {
h = ".left=";
v = ".top=";
dS = "document.";
sD = "";
iW = "window.iWidth";
iH = "window.iHeight";
osX = "window.pageXOffset";
osY = "window.pageYOffset";
document.getElementById('menum').style.display = "none";
} else{
h = ".pixelLeft=";
v = ".pixelTop=";
dS = "";
sD = ".style";
iW = "document.body.clientWidth";
iH = "document.body.clientHeight";
osX = "document.body.scrollLeft";
osY = "document.body.scrollTop";
}
}
function popLayer(){
if (b==1){
if (menu == "off") {
menu = "on";
yy = (eval(osY) + y);
xx = (eval(osX) + x);
if (document.all) {
if (xx > (sW + eval(osX))) {
xx -= 155;
}
if (yy > (sH + eval(osY))) {
yy -= 100;
}
}
}
if (document.layers) {
if (x > (sW + eval(osX))) {
xx -= 155;
}
if (y > (sH + eval(osY))) {
yy -= 100;
}
}
aX = "x: " + x + ", xx: " + xx + ", sW: " + sW + ", iW: " + eval(iW);
aY = "y: " + y + ", yy: " + yy + ", sH: " + sH + ", osY: " + eval(osY);
if (isNav) {
document.getElementById('menum').left = (xx - eval(osX));
document.getElementById('menum').top = (yy - eval(osY));
document.getElementById('menum').style.display = "block";
} else {
if ((x > eval(iW)) || (y > eval(iH))) {
menu = "off";
} else{
menum.style.pixelLeft = xx;
menum.style.pixelTop = yy;
menum.style.display = "block";
}
}
} else {
if (document.layers) {
hideMenu()
}
if (document.all) {
if ((x > eval(iW)) || (y > eval(iH))) {
menu = "on";
} else {
hideMenu();
}
}
}
}
function hideMenu() {
menu = "off";
if (isNav) {
document.getElementById('menum').style.display = "none";
} else {
menum.style.display = "hidden";
}
}
function handlerMM(e) {
x = (isNav) ? e.pageX : event.clientX;
y = (isNav) ? e.pageY : event.clientY;
}
function handlerMU(e){
xx = (isNav) ? e.pageX : event.clientX;
yy = (isNav) ? e.pageY : event.clientY;
b = (isNav) ? e.which : event.button;
popLayer();
}
function mudacor(prmThis, prmColor) {
if ((window.document.all) || (window.document.getElementById)) {
prmThis.style.backgroundColor = prmColor;
} else if (window.document.layers) {
prmThis.bgColor = prmColor;
}
}
</script>
</body>
</html>
Enviado por João Netto em 27 de maio de 2008 Legal o script... Mto bem criado só que temos que fazer uma observação na pagina pq tem usuarios que ate descobrir que isso existe ele ja saiu do site.. concorda?
Enviado por João Netto em 27 de maio de 2008 Legal o script... Mto bem criado só que temos que fazer uma observação na pagina pq tem usuarios que ate descobrir que isso existe ele ja saiu do site.. concorda?
Enviado por João Netto em 27 de maio de 2008 Como vc sugere que isso sege feito?
Enviado por João Netto em 27 de maio de 2008 Gostei muito.obrigada. Em relação ao comentário postado acho que o ideal seria que este menu mágico aparecesse mal o rato passasse sobr ele. Pode ser,por exemplo, um sub-menu que surge sempre que o rato passa por um dos itens do menu principal. Luísa
