Através de um gerador online, consegui o seguinte código para um menu:
<style type="text/css"> <!-- #master {position:absolute; width: 200px; top: 10px; left: -120px; z-index:2; visibility:visible;} #menu {position:absolute; width: 18px; top: 0px; left: 120px; z-index:5; visibility:visible;} #top {position:absolute; width: 120px; top: 0px; left: 0px; z-index:5; visibility:visible;} #screen {position:absolute; width: 120px; top: 6px; left: 0px; z-index:5; visibility:visible;} #screenlinks {position:absolute; width: 120px; top: 6px; left: 0px; z-index:5; visibility:visible;} --> </style> <style type="text/css"> <!-- .NavJump {font-family: arial; font-size: 10pt; color: #339966; text-decoration: none;} a:link.NavJump {color : #339966;} a:visited.NavJump {color : #339966;} a:active.NavJump {text-decoration: none; color: #003300;} a:hover.NavJump {text-decoration: none; color: #003300;} --> </style> <script language = "javascript"> <!-- var ie = document.all ? 1 : 0 var ns = document.layers ? 1 : 0 if(ie){ document.write('<style type="text/css">') document.write("#screen {filter:Alpha(Opacity=30);}") document.write("</style>") } if(ns){ document.write('<style type="text/css">') document.write("#master {clip:rect(0,150,250,0);}") document.write("</style>") } //--> </script> <script language = "javascript"> <!-- var ie = document.all ? 1 : 0 var ns = document.layers ? 1 : 0 var master = new Object("element") master.curLeft = -120; master.curTop = 10; master.gapLeft = 0; master.gapTop = 0; master.timer = null; function moveAlong(layerName, paceLeft, paceTop, fromLeft, fromTop){ clearTimeout(eval(layerName).timer) if(eval(layerName).curLeft != fromLeft){ if((Math.max(eval(layerName).curLeft, fromLeft) - Math.min(eval(layerName).curLeft, fromLeft)) < paceLeft){eval(layerName).curLeft = fromLeft} else if(eval(layerName).curLeft < fromLeft){eval(layerName).curLeft = eval(layerName).curLeft + paceLeft} else if(eval(layerName).curLeft > fromLeft){eval(layerName).curLeft = eval(layerName).curLeft - paceLeft} if(ie){document.all[layerName].style.left = eval(layerName).curLeft} if(ns){document[layerName].left = eval(layerName).curLeft} } if(eval(layerName).curTop != fromTop){ if((Math.max(eval(layerName).curTop, fromTop) - Math.min(eval(layerName).curTop, fromTop)) < paceTop){eval(layerName).curTop = fromTop} else if(eval(layerName).curTop < fromTop){eval(layerName).curTop = eval(layerName).curTop + paceTop} else if(eval(layerName).curTop > fromTop){eval(layerName).curTop = eval(layerName).curTop - paceTop} if(ie){document.all[layerName].style.top = eval(layerName).curTop} if(ns){document[layerName].top = eval(layerName).curTop} } eval(layerName).timer=setTimeout('moveAlong("'+layerName+'",'+paceLeft+','+paceTop+','+fromLeft+','+fromTop+')',30) } function setPace(layerName, fromLeft, fromTop, motionSpeed){ eval(layerName).gapLeft = (Math.max(eval(layerName).curLeft, fromLeft) - Math.min(eval(layerName).curLeft, fromLeft))/motionSpeed eval(layerName).gapTop = (Math.max(eval(layerName).curTop, fromTop) - Math.min(eval(layerName).curTop, fromTop))/motionSpeed moveAlong(layerName, eval(layerName).gapLeft, eval(layerName).gapTop, fromLeft, fromTop) } var expandState = 0 function expand(){ if(expandState == 0){setPace("master", 0, 10, 10); if(ie){document.menutop.src = "imagens/menub.gif"}; expandState = 1;} else{setPace("master", -120, 10, 10); if(ie){document.menutop.src = "imagens/menu.gif"}; expandState = 0;} } //--> </script> <div id="master"> <div id="menu"> <table border="0" width="18" cellspacing="0" cellpadding="0"> <tr><td width="100%"><a href="javascript:expand()" onfocus="this.blur()"><img name="menutop" border="0" src="imagens/menu.gif" width="18" height="70"></a></td></tr> </table> </div> <div id="top"> <table border="0" width="120" cellspacing="0" cellpadding="0"> <tr><td width="100%"><img border="0" src="imagens/top.gif" width="120" height="6"></td></tr> </table> </div> <div id="screen"> <table border="0" width="120" cellspacing="0" cellpadding="5"> <tr><td width="100%" bgcolor="#339966"> <table border="0" width="100%" bgcolor="#339966" cellspacing="0" cellpadding="0"> <tr><td width="100%"> <table border="0" width="100%" cellspacing="1" cellpadding="5"> <tr><td width="100%" bgcolor="#FFFFFF"> <font class="NavJump"><br></font><font class="NavJump"><br></font><font class="NavJump"><br></font><font class="NavJump"><br></font><font class="NavJump"><br></font><font class="NavJump"><br></font> </td></tr> </table> </td></tr> </table> </td></tr> </table> </div> <div id="screenlinks"> <table border="0" width="120" cellspacing="0" cellpadding="5"> <tr><td width="100%"> <table border="0" width="100%" bgcolor="#339966" cellspacing="0" cellpadding="0"> <tr><td width="100%"> <table border="0" width="100%" cellspacing="1" cellpadding="5"> <tr><td width="100%" bgcolor="#FFFFFF"> <a href="documento.asp?descatividade=<%=rs.Fields("descatividade").Value%>" class="NavJump"><b>Operação</b></a><br> <a href="equipamentos.asp?descatividade=<%=rs.Fields("descatividade").Value%>" class="NavJump"><b>Equipamentos</b></a><br> <a href="implementos.asp?descatividade=<%=rs.Fields("descatividade").Value%>" class="NavJump"><b>Implementos</b></a><br> <a href="epis.asp?descatividade=<%=rs.Fields("descatividade").Value%>" class="NavJump"><b>EPI's</b></a><br> <a href="rh.asp" class="NavJump"><b>Recursos Humanos</b></a><br> <a href="download.asp" class="NavJump"><b>Donwloads</b></a><br> </td></tr> </table> </td></tr> </table> </td></tr> </table> </div> </div> <script language = "javascript"> <!-- if(ie){var sidemenu = document.all.master;} if(ns){var sidemenu = document.master;} function FixY(){ if(ie){sidemenu.style.top = document.body.scrollTop+10} if(ns){sidemenu.top = window.pageYOffset+10} } setInterval("FixY()",100); //--> </script>
Acontece que a página tem um iframe recebendo um texto bem no centro e quando eu abro esse menu, que fica suspenso na lateral esquerda, ele aparece metade por baixo do iframe. Eu não posso diminuir a largura do iframe, então tem como modificar alguma coisa nesse código para que ele apareça sempre por cima do conteúdo?
Até mais e obrigada.