|
Menu dinâmico
Copie o código abaixo e cole-o em suas páginas. Para copiar, selecione todo o código e aperte as teclas "CTRL+C" e cole em suas páginas com o comando "CTRL+V".
- O código:
Copie o código abaixo e cole-o em suas páginas abaixo da tag <body>.
<script language=javaScript>
menu="off"
var tdOutColor = "#009900";
var tdOverColor = "#33CC00";
function checabrowser(){
var x = navigator.appVersion;
y = x.substring(0,4);
if (y>=4) setVariables();
}
var x,y,b,xx,yy
function setVariables(){
if (navigator.appName == "Netscape") {
h=".left=";
v=".top=";
dS="document.";
sD="";
iW="window.iWidth"
iH="window.iHeight"
osX="window.pageXOffset"
osY="window.pageYOffset"
document.menum.visibility="hide"
}
else{
h=".pixelLeft=";
v=".pixelTop=";
dS="";
sD=".style";
iW="document.body.clientWidth"
iH="document.body.clientHeight"
osX="document.body.scrollLeft"
osY="document.body.scrollTop"
}}
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);
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.menum.left=(xx-eval(osX))
document.menum.top=(yy-eval(osY))
document.menum.visibility="show"
}
else {
if (x > (eval(iW))||y > (eval(iH))){menu="off"}// || y > (eval(iH)+eval(osY))) {}
else{
menum.style.pixelLeft=xx
menum.style.pixelTop=yy
menum.style.visibility="visible"
}}}
else {
if (document.layers) {hideMenu()}
if (document.all){
if (x > (eval(iW))||y > (eval(iH))){menu="on"}// || y > (eval(iH)+eval(osY))) {}
else hideMenu()
}}}
function hideMenu(){
menu="off"
if(isNav) {
document.menum.visibility="hide"
}
else {
menum.style.visibility="hidden"}
}}
function handlerMM(e){
x = (isNav) ? e.pageX : event.clientX
y = (isNav) ? e.pageY : event.clientY
}
if (isNav){
document.captureEvents(Event.MOUSEMOVE | Event.MOUSEUP);
}
document.onmousemove = handlerMM;
document.onmouseup = handlerMU;
checabrowser();
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>
<style type="text/css">
<!--
.tdl { font-family: Arial, Helvetica, sans-serif; font-size: 9pt; text-decoration: none; color: #94AA7B}
.tdl:hover { font-family: Arial, Helvetica, sans-serif; font-size: 9pt; text-decoration: none; color: #FF9900}
.tdl:visited { font-family: Arial, Helvetica, sans-serif; font-size: 9pt; text-decoration: none; color: #94AA7B}
-->
</style>
<div id="menum" style="position:absolute; visibility:hidden; 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://link1" class=tdl>link1</a></b></td></tr>
<tr><td onMouseOver='mudacor(this,tdOverColor)' onMouseOut='mudacor(this,tdOutColor)'><b> <a href="http://link2" class=tdl>link2</a></b></td></tr>
</table>
</div>
Obs: Este exemplo foi criado levando-se em conta a largura de 130 pixels, 2 links no menu, cor dos links no menu amarela, cor dos links ativos no menu laranja, cor da células verde e cor das células ativas verde claro.
|