Menu Dinamico

[rcost4]

como fazer um menu dinamico, o mais simples possivel?

[diraol]

como assim???

[§uiciDa£]

menu dinamico? o qualquer é mesmo? num ta vino na cabeça, poxa vidaaaaaaaa !?

[diraol]

eita comentário inútil hein>.>.....hehehehe

:D

[rcost4]

desculpa! mas eu quis dezer aqueles menus que quando se encosta o mouse mostra outros menus abaixo dele.

Valeu galera, e desculpe pela pergunta ser feita errada.

[JoHnNy]

esse eu não sei, mas tenho certeza que o efeito é OnMouseOver (só para não dar mais confusões) vou dar uma olhada, se achar, posto aqui

[§uiciDa£]

ah num foi inutil, porque agora ele explico e eu sei q menu q é :P

vo taca o codigo

<div class="menbar1" id="menbar1" style="position:absolute;top:0; left: 0" zindex="1000" align="right">
<table bgcolor="#FFFFFF" width="111"> <tr bgcolor="#990000">
<td>
<div align="center"><a href="javascript:change(1)"><font size="2" face="Arial, Helvetica, sans-serif" color="#FFFFFF"><b>Abrir o Menu </b></font></a></div>
</td>
</tr>
</table>
</div>
<CENTER>
<DIV CLASS="menbar2" ID="menbar2" STYLE="position:absolute;top:3px;; left: -329px" zIndex="1000" ALIGN="right"> <table bgcolor="#000000" width="139">
<tr>
<td bgcolor="#990000">
<div align="center"><a href="javascript:change(1);change(2)"><font color="#FFFFFF" size="2" face="Arial, Helvetica, sans-serif"><b>Ocultar
o Menu</b></font></a> </div>
</td>
</tr>
<tr bgcolor="#FFFFFF">
<td> <font size="2" face="Arial, Helvetica, sans-serif"><b>
- <a href="Primeiro Link Aqui">Link 1</a><br>
- <a href="Segundo Link Aqui">Link 2</a><br>
- <a href="Terceiro Link Aqui">Link 3</a><br>
- <a href="Quarto Link Aqui">Link 4</a><br>
- <a href="Quinto Link Aqui">Link 5</a></font></b></td>
</tr></table>
</DIV>
<p>
<script language="Javascript1.2">
<!--//
var JX = 0;
var JY = 0; 

if(navigator.appName == "Netscape") {
var wm = document.menbar1;
}
if (navigator.appVersion.indexOf("MSIE") != -1) {
var wm = document.all.menbar1;
}
function change(wow) { 

if(navigator.appName == "Netscape") {
if (wow == 1) {
wm.visibility = "hide";
wm = document.menbar2;
}
if (wow == 2) {
wm.visibility = "hide";
wm = document.menbar1;
}
}
if (navigator.appVersion.indexOf("MSIE") != -1) {
if (wow == 1) {
wm.style.display = "none";
wm = document.all.menbar2;
}
if (wow == 2) {
wm.style.display = "none";
wm = document.all.menbar1;
}
}
} 

function menbar() { 

if(navigator.appName == "Netscape") {
JX = window.pageXOffset;
JY = window.pageYOffset;
wm.visibility = "hide";
wm.top = JY;
wm.left = JX;
wm.visibility= "show";
}
if (navigator.appVersion.indexOf("MSIE") != -1){
if (navigator.appVersion.indexOf("Mac") == -1){
wm.style.display = "none";
JX = document.body.scrollLeft;
JY = document.body.scrollTop;
wm.style.top = JY;
wm.style.left = JX;
wm.style.display = "";
}
}
} 

setInterval("menbar()",100);
//-->
</script>

tem mais exeplo eu so vo taca em otro postpq se não fik muito confuso

[§uiciDa£]

deve se esse

<style>
<!--
DIV.clTop{position:absolute; width:170}
DIV.clSub{position:absolute; left:10; width:170}
#divCont{position:relative; left:100; top:0; height:400; width:170;}
A.clMain{font-family:Arial, Verdana, Helvetica, Helv; font-size:14px; text-decoration:none; font-weight:bold; color:black}
A.clSubb{font-family:Arial, Verdana, Helvetica, Helv; font-size:14px; text-decoration:none; color:black}
#divMain{position:absolute}
//-->
</style>
<script language="JavaScript">
/*
#################################
#                               #
#          suicidal             #
#                               #
#   http://suicidal.rg3.net     #
#################################
*/

var stayFolded=false

//esta imagen aparecer quando o menu extender
var exImg=new Image(); exImg.src='arrow1.gif'
//esta imagen aparecer quando o menu recolhido
var unImg=new Image(); unImg.src='arrow.gif'

var n = (document.layers) ? 1:0;
var ie = (document.all) ? 1:0;
var browser=((n || ie) && parseInt(navigator.appVersion)>=4)  

function makeMenu(obj,nest){
    nest=(!nest) ? '':'document.'+nest+'.'          
    this.css=(n) ? eval(nest+'document.'+obj):eval('document.all.'+obj+'.style')        
    this.ref=(n) ? eval(nest+'document.'+obj+'.document'):eval('document');  
    this.height=n?this.ref.height:eval(obj+'.offsetHeight')
    this.x=(n)? this.css.left:this.css.pixelLeft;this.y=(n)? this.css.top:this.css.pixelTop;          
    this.hideIt=b_hideIt;    this.showIt=b_showIt; this.vis=b_vis; this.moveIt=b_moveIt              
    return this
}
function b_showIt(){this.css.visibility="visible"}
function b_hideIt(){this.css.visibility="hidden"}
function b_vis(){if(this.css.visibility=="hidden" || this.css.visibility=="hide") return true;}
function b_moveIt(x,y){this.x=x; this.y=y; this.css.left=this.x; this.css.top=this.y}

function init(){
    oTop=new Array()
    oTop[0]=new makeMenu('divTop1','divCont')
    oTop[1]=new makeMenu('divTop2','divCont')
    oTop[2]=new makeMenu('divTop3','divCont')
    oTop[3]=new makeMenu('divTop4','divCont')
    oTop[4]=new makeMenu('divTop5','divCont')
    oTop[5]=new makeMenu('divTop6','divCont')
    oSub=new Array()
    oSub[0]=new makeMenu('divSub1','divCont.document.divTop1')
    oSub[1]=new makeMenu('divSub2','divCont.document.divTop2')
    oSub[2]=new makeMenu('divSub3','divCont.document.divTop3')
    oSub[3]=new makeMenu('divSub4','divCont.document.divTop4')
    oSub[4]=new makeMenu('divSub5','divCont.document.divTop5')
    oSub[5]=new makeMenu('divSub6','divCont.document.divTop6')
    for(i=0;i<oSub.length;i++){ oSub[i].hideIt() }
    for(i=1;i<oTop.length;i++){ oTop[i].moveIt(0,oTop[i-1].y+oTop[i-1].height) }
}

function menu(num){
    if(browser){
  if(!stayFolded){
      for(i=0;i<oSub.length;i++){
    if(i!=num){
        oSub[i].hideIt()
        oTop[i].ref["imgA"+i].src=unImg.src
    }
      }
      for(i=1;i<oTop.length;i++){
    oTop[i].moveIt(0,oTop[i-1].y+oTop[i-1].height)
      }
  }
  if(oSub[num].vis()){
      oSub[num].showIt()
      oTop[num].ref["imgA"+num].src=exImg.src
  }else{
      oSub[num].hideIt()
      oTop[num].ref["imgA"+num].src=unImg.src
  }
  for(i=1;i<oTop.length;i++){ 
      if(!oSub[i-1].vis()) oTop[i].moveIt(0,oTop[i-1].y+oTop[i-1].height+oSub[i-1].height) 
      else oTop[i].moveIt(0,oTop[i-1].y+oTop[i-1].height)
  }
    }
}

if(browser) onload=init;

</script>




//Edite os links
<div id="divCont">
    <div id="divTop1" class="clTop"><a href="#" onclick="menu(0); return false" class="clMain"><img src="arrow.gif" name="imgA0" width=12 height=12 alt="" border="0"> [choice 0]</a><br>
  <div id="divSub1" class="clSub">
    <a href="#" class="clSubb">-Sub 1</a><br>
    <a href="#" class="clSubb">-Sub 2</a><br>
    <a href="#" class="clSubb">-Sub 3</a><br>
    <a href="#" class="clSubb">-Sub 4</a><br>
  </div><br>
    </div>
    <div id="divTop2" class="clTop"><a href="#" onclick="menu(1); return false" class="clMain"><img src="arrow.gif" name="imgA1" width=12 height=12 alt="" border="0"> [choice 1]</a><br>
  <div id="divSub2" class="clSub">
    <a href="#" class="clSubb">-Sub 1</a><br>
    <a href="#" class="clSubb">-Sub 2</a><br>
  </div><br>
    </div>
    <div id="divTop3" class="clTop"><a href="#" onclick="menu(2); return false" class="clMain"><img src="arrow.gif" name="imgA2" width=12 height=12 alt="" border="0"> [choice 2]</a><br>
  <div id="divSub3" class="clSub">
    <a href="#" class="clSubb">-Sub 1</a><br>
    <a href="#" class="clSubb">-Sub 2</a><br>
    <a href="#" class="clSubb">-Sub 3</a><br>
  </div><br>
    </div>
    <div id="divTop4" class="clTop"><a href="" onclick="menu(3); return false" class="clMain"><img src="arrow.gif" name="imgA3" width=12 height=12 alt="" border="0"> [choice 3]</a><br>
  <div id="divSub4" class="clSub">
    <a href="#" class="clSubb">-Sub 1</a><br>
    <a href="#" class="clSubb">-Sub 2</a><br>
  </div><br>
    </div>
    <div id="divTop5" class="clTop"><a href="" onclick="menu(4); return false" class="clMain"><img src="arrow.gif" name="imgA4" width=12 height=12 alt="" border="0"> [choice 4]</a><br>
  <div id="divSub5" class="clSub">
    <a href="#" class="clSubb">-Sub 1</a><br>
    <a href="#" class="clSubb">-Sub 2</a><br>
    <a href="#" class="clSubb">-Sub 3</a><br>
    <a href="#" class="clSubb">-Sub 4</a><br>
    <a href="#" class="clSubb">-Sub 5</a><br>
  </div><br>
    </div>
    <div id="divTop6" class="clTop"><a href="" onclick="menu(5); return false" class="clMain"><img src="arrow.gif" name="imgA5" width=12 height=12 alt="" border="0"> [choice 5]</a><br>
  <div id="divSub6" class="clSub">
    <a href="#" class="clSubb">-Sub 1</a><br>
  </div><br>
    </div>
</div>

[§uiciDa£]

é o ultimo q eu conheco se for de um otro jeito, descreve ai =)

<!-- Copie o código da página e modifique em seu editor-->

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" href="../estilo.css">
<style>
<!--
DIV.clTop{position:absolute; width:150}
DIV.clSub{position:absolute; left:10; width:170}
#divCont{position:relative; left:20; top:0; height:400; width:170;}
A.clMain{font-family:Arial, Verdana, Helvetica, Helv; font-size:14px; text-decoration:none; font-weight:bold; color:black}
A.clSubb{font-family:Arial, Verdana, Helvetica, Helv; font-size:14px; text-decoration:none; color:black}
#divMain{position:absolute}
//-->
</style>

<script language="JavaScript">
var stayFolded=false

var n = (document.layers) ? 1:0;
var ie = (document.all) ? 1:0;
var browser=((n || ie) && parseInt(navigator.appVersion)>=4)  

function makeMenu(obj,nest){
    nest=(!nest) ? '':'document.'+nest+'.'          
    this.css=(n) ? eval(nest+'document.'+obj):eval('document.all.'+obj+'.style')        
    this.ref=(n) ? eval(nest+'document.'+obj+'.document'):eval('document');  
    this.height=n?this.ref.height:eval(obj+'.offsetHeight')
    this.x=(n)? this.css.left:this.css.pixelLeft;this.y=(n)? this.css.top:this.css.pixelTop;          
    this.hideIt=b_hideIt;    this.showIt=b_showIt; this.vis=b_vis; this.moveIt=b_moveIt              
    return this
}
function b_showIt(){this.css.visibility="visible"}
function b_hideIt(){this.css.visibility="hidden"}
function b_vis(){if(this.css.visibility=="hidden" || this.css.visibility=="hide") return true;}
function b_moveIt(x,y){this.x=x; this.y=y; this.css.left=this.x; this.css.top=this.y}

function init(){
    oTop=new Array()
    oTop[0]=new makeMenu('divTop1','divCont')
    oTop[1]=new makeMenu('divTop2','divCont')
    oTop[2]=new makeMenu('divTop3','divCont')
    oTop[3]=new makeMenu('divTop4','divCont')
    oTop[4]=new makeMenu('divTop5','divCont')
    oTop[5]=new makeMenu('divTop6','divCont')
    oSub=new Array()
    oSub[0]=new makeMenu('divSub1','divCont.document.divTop1')
    oSub[1]=new makeMenu('divSub2','divCont.document.divTop2')
    oSub[2]=new makeMenu('divSub3','divCont.document.divTop3')
    oSub[3]=new makeMenu('divSub4','divCont.document.divTop4')
    oSub[4]=new makeMenu('divSub5','divCont.document.divTop5')
    oSub[5]=new makeMenu('divSub6','divCont.document.divTop6')
    for(i=0;i<oSub.length;i++){ oSub[i].hideIt() }
    for(i=1;i<oTop.length;i++){ oTop[i].moveIt(0,oTop[i-1].y+oTop[i-1].height) }
}

function menu(num){
    if(browser){
  if(!stayFolded){
      for(i=0;i<oSub.length;i++){
    if(i!=num) oSub[i].hideIt()
      }
      for(i=1;i<oTop.length;i++){
    oTop[i].moveIt(0,oTop[i-1].y+oTop[i-1].height)
      }
  }
  oSub[num].vis()?oSub[num].showIt():oSub[num].hideIt()
  for(i=1;i<oTop.length;i++){ 
      if(!oSub[i-1].vis()) oTop[i].moveIt(0,oTop[i-1].y+oTop[i-1].height+oSub[i-1].height) 
      else oTop[i].moveIt(0,oTop[i-1].y+oTop[i-1].height)
  }
    }
}

if(browser) onload=init;

</script>

</head>
<body bgcolor="#FFFFFF" text="#000000" link="#FF6600" vlink="#FF6600" alink="#FF9900" topmargin="0" marginheight="0">
<table width="430" border="0" cellspacing="0" cellpadding="0">
  <tr align="center"> 
    <td><br>
      <br>
    </td>
  </tr>
  <tr> 
    <td></td>
  </tr>
  <tr> 
    <td> 
      <p> <font face="Arial, Verdana" size="2"><b><font color="#FF6600">menu 2 </font></b></font><br>
        <br>
       <div id="divCont">
    <div id="divTop1" class="clTop"><a href="#" onclick="menu(0); return false" class="clMain">[Menu 1]</a><br>
  <div id="divSub1" class="clSub">
      <a href="#" class="clSubb">-Sub 1</a><br>
      <a href="#" class="clSubb">-Sub 2</a><br>
      <a href="#" class="clSubb">-Sub 3</a><br>
      <a href="#" class="clSubb">-Sub 4</a><br>
  </div><br>
    </div>
    <div id="divTop2" class="clTop"><a href="#" onclick="menu(1); return false" class="clMain">[Menu 2]</a><br>
  <div id="divSub2" class="clSub">
      <a href="#" class="clSubb">-Sub 1</a><br>
      <a href="#" class="clSubb">-Sub 2</a><br>
  </div><br>
    </div>
    <div id="divTop3" class="clTop"><a href="#" onclick="menu(2); return false" class="clMain">[Menu 3]</a><br>
  <div id="divSub3" class="clSub">
      <a href="#" class="clSubb">-Sub 1</a><br>
      <a href="#" class="clSubb">-Sub 2</a><br>
      <a href="#" class="clSubb">-Sub 3</a><br>
  </div><br>
    </div>
    <div id="divTop4" class="clTop"><a href="" onclick="menu(3); return false" class="clMain">[Menu 4]</a><br>
  <div id="divSub4" class="clSub">
      <a href="#" class="clSubb">-Sub 1</a><br>
      <a href="#" class="clSubb">-Sub 2</a><br>
  </div><br>
    </div>
    <div id="divTop5" class="clTop"><a href="" onclick="menu(4); return false" class="clMain">[Menu 5]</a><br>
  <div id="divSub5" class="clSub">
      <a href="#" class="clSubb">-Sub 1</a><br>
      <a href="#" class="clSubb">-Sub 2</a><br>
      <a href="#" class="clSubb">-Sub 3</a><br>
      <a href="#" class="clSubb">-Sub 4</a><br>
      <a href="#" class="clSubb">-Sub 5</a><br>
  </div><br>
    </div>
    <div id="divTop6" class="clTop"><a href="" onclick="menu(5); return false" class="clMain">[Menu 6]</a><br>
  <div id="divSub6" class="clSub">
      <a href="#" class="clSubb">-Sub 1</a><br>
  </div><br>
    </div>
</div>
    </td>
  </tr>
  <tr>
    <td> </td>
  </tr>
</table>
</body>
</html>
</noscript></script>

[Guest - Rcost4 -]

Gostei pra caramba.

então pra que abra apenas na hora de passar o mouse usa-se MouseOnOver, certo?

Valeu galera!!!

[JoHnNy]

MouseOnOver

Tu só trocou... é OnMouseOver mas, mal se meu post não ajudou muito, §uiciDa£....

[rcost4]

Muito obrigado novamente