Ir para conteúdo
Fórum Script Brasil
  • 0

Ajuda Com Menu Drop-down

Bruno Pivato

Perguntado por Bruno Pivato,

 Share

Pergunta

Bruno Pivato

Bruno Pivato

Postado
Postado

Olá Pessoal,

Estou fazendo um neu drop-down, mas tem um problema nele: Quando a pessoa passa o mouse por cima, abre o menu normal, porém, quando ela tira o mouse de cima do menu, ele continua la, até ela passar o mouse em outro. Eu gostaria de que quando a pessoa tirasse o mouse, o menu desaparecece, tem como?

Abaixo tem o código, a primeira parte é um pedaço da tabela, onde aparece a opção, e depois o Script do menu.

    <td width="120" height="20" valign="middle" nowrap background="botao.jpg"><center><a href="#1" id="item3" class="barItem">Menu3</a>    </center>

<table id="item3box" class="box" style="display:none">

      <tr>

        <td><a href="#" target="Conteudo" class="cc">Banhos</a></td>

      </tr>

      <tr>

        <td><a href="#" target="Conteudo" class="cc">Cursos</a></td>

      </tr>

      <tr>

        <td><a href="#" target="Conteudo" class="cc">Estética Facial</a></td>

      </tr>

      <tr>

        <td><a href="#" target="Conteudo" class="cc">Mapa Astral</a></td>

      </tr>

      <tr>

        <td><a href="#" target="Conteudo" class="cc">Reiki</a></td>

      </tr>

      <tr>

        <td><a href="#" target="Conteudo" class="cc">Yoga</a></td>

      </tr>

    </table>    </td>

<script language="JavaScript">

document.onmouseover = openIt

 

function openIt() {

var items = 3 ;

currEl = window.event.toElement

   if (currEl.className == "barItem") {

     newId = currEl.id + "box"

      showBox = document.all(newId)

       showBox.style.display = "block"

       }       

   

  for (i=1; i<=items; i++) {

    openItem="item" + i + "box"

      elOpen = document.all(openItem)

        if ((elOpen.style.display == "block")&&(elOpen != showBox))

          elOpen.style.display = "none"

    if (currEl.className == "closeIt") { elOpen.style.display = "none"  }

   }

}

</script>

Obrigado!

Link para o comentário
Compartilhar em outros sites

13 respostass a esta questão

Posts Recomendados

  • 0
diraol

diraol

Postado
Postado

cara, pra você fazer isso q você quer você precisa de uma função que esconda os menu's...... e ai você coloca essa função no "OnMouseOut".....

Link para o comentário
Compartilhar em outros sites
  • 0
diraol

diraol

Postado
Postado

seguinte... o segredo tá basicamente nessa linha aqui......

showBox.style.display = "block"

no onMouseOut você tem que fazer com que fazer com que o display volte a ser none........

eu acho que é isso.....

Link para o comentário
Compartilhar em outros sites
  • 0
Bruno Pivato

Bruno Pivato

Postado
  • Autor
Postado

Cara, não consegui, de jeito nenhum! Tenho que entregar o trabalho na segunda, e já to totalmente atolado com o site. Se você puder me ajudar, o código esta abaixo, não consegui de jeito nenhum fazer ele sumir no onmouseout, nem com todas as suas ajudas!

<html>

<head>

<title>Untitled Document</title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<style type="text/css">

<!--

body,td,th {

font-family: Verdana;

font-size: 10pt;

}

body {

background-color: #900000;

margin-left: 0px;

margin-top: 0px;

margin-right: 0px;

margin-bottom: 0px;

scrollbar-face-color: 900000;

scrollbar-shadow-color: 900000;

scrollbar-highlight-color: 900000;

scrollbar-3dlight-color: 900000;

scrollbar-darkshadow-color: 900000;

scrollbar-track-color: 900000;

scrollbar-arrow-color: 900000

}

a {

font-size: 10pt;

color: #900000;

}

a:link {

text-decoration: none;

color: #900000;

}

a:visited {

text-decoration: none;

color: #900000;

}

a:hover {

text-decoration: underline;

color: #900000;

}

a:active {

text-decoration: none;

color: #900000;

}

.box {

position:absolute;

background:#E89E01;

font-weight:bold

}

.barItem {

cursor: hand;

color: #E89E01;

font-weight:bold;

text-align:center;

vertical-align:middle;

}

.barItem:hover {

cursor: hand;

color: #E89E01;

font-weight:bold;

text-align:center;

vertical-align:middle

}

.barItem:link {

cursor: hand;

color: #E89E01;

font-weight:bold;

text-align:center;

vertical-align:middle

}

.barItem:visited {

cursor: hand;

color: #E89E01;

font-weight:bold;

text-align:center;

vertical-align:middle

}

.barItem:active {

cursor: hand;

color: #E89E01;

font-weight:bold;

text-align:center;

vertical-align:middle

}

.cc {

background:#E89E01;

color:#FFFFFF;

}

.cc:hover {

color:#FFFFFF;

}

-->

</style>

</head>

<body>

<table width="740" height="500" border="0" cellspacing="0" cellpadding="0">

  <tr>

    <td align="right" valign="top" bgcolor="#900000">

<table border="0" width="720" height="480" cellpadding="0" cellspacing="0">

<tr>

  <td width="210" rowspan="2" align="center" valign="top" bgcolor="#FFFFFF"><p><a href="conteudo.html" target="Conteudo"><img src="korpoealma.jpg" alt="Korpo e Alma" width="200" height="200" border="0"></a></p>    </td>

  <td width="510" height="30" align="left" valign="top" bgcolor="#FFFFFF">

<table border="0" cellpadding="0" cellspacing="0" width="450" bgcolor="#FFFFFF" height="20" align="center">

  <tr><td width="90" height="20" nowrap background="botao_home.jpg"><center><a href="conteudo.html" target="Conteudo" class="barItem" style="color:#E89E01">HOME</a></center></td>

<!-- Menu Bar Item 1 -->

    <td width="120" height="20" nowrap background="botao.jpg"><center><a href="#1" id="item1" class="barItem">MASSAGENS</a>    </center>

      <table id="item1box" class="box" style="display:none">

      <tr>

        <td><a href="massagens/modeladora/modeladora.html" target="Conteudo" class="cc">Modeladora</a></td>

      </tr>

      <tr>

        <td><a href="massagens/reflexologiapodal/reflexologiapodal.html" target="Conteudo" class="cc">Reflexologia Podal</a></td>

      </tr>

      <tr>

        <td><a href="massagens/relaxante/relaxante.html" target="Conteudo" class="cc">Relaxante</a></td>

      </tr>

      <tr>

        <td><a href="massagens/shiatsu/shiatsu.html" target="Conteudo" class="cc">Shiatsu</a></td>

      </tr>

  <tr>

        <td><a href="massagens/terapeutica/terapeutica.html" target="Conteudo" class="cc">Terapêutica</a></td>

      </tr>

    <tr>

        <td><a href="massagens/toquepleno/toquepleno.html" target="Conteudo" class="cc">Toque Pleno</a></td>

      </tr>

    </table>    </td>

<!-- Menu Bar Item 2 -->

    <td width="120" height="20" valign="middle" nowrap background="botao.jpg"><center><a href="#1" id="item2" class="barItem">TERAPIAS</a>    </center>    <table id="item2box" class="box" style="display:none">

      <tr>

        <td><a href="terapias/acupuntura/acupuntura.html" target="Conteudo" class="cc">Acupuntura</a></td>

      </tr>

      <tr>

        <td><a href="terapias/ayurvedica/ayurvedica.html" target="Conteudo" class="cc">Ayurvédica</a></td>

      </tr>

      <tr>

        <td><a href="terapias/drenagemlinfatica/drenagemlinfatica.html" target="Conteudo" class="cc">Drenagem Linfática</a></td>

      </tr>

  <tr>

        <td><a href="terapias/pedrasquentes/pedrasquentes.html" target="Conteudo" class="cc">Pedras Quentes</a></td>

      </tr>

        <tr>

        <td><a href="terapias/pnl/pnl.html" target="Conteudo" class="cc">PNL</a></td>

      </tr>

        <tr>

        <td><a href="terapias/regressao/regressao.html" target="Conteudo" class="cc">Regressão</a></td>

      </tr>

        <tr>

        <td><a href="terapias/rpg/rpg.html" target="Conteudo" class="cc">RPG</a></td>

      </tr>

        <tr>

        <td><a href="terapias/quiropraxia/quiropraxia.html" target="Conteudo" class="cc">Quiropraxia</a></td>

      </tr>

    </table>    </td>

<!-- Menu Bar Item 3 -->

    <td width="120" height="20" valign="middle" nowrap background="botao.jpg"><center><a href="#1" id="item3" class="barItem">CUIDE-SE</a>    </center>

<table id="item3box" class="box" style="display:none">

      <tr>

        <td><a href="#" target="Conteudo" class="cc">Banhos</a></td>

      </tr>

      <tr>

        <td><a href="#" target="Conteudo" class="cc">Cursos</a></td>

      </tr>

      <tr>

        <td><a href="#" target="Conteudo" class="cc">Estética Facial</a></td>

      </tr>

      <tr>

        <td><a href="#" target="Conteudo" class="cc">Mapa Astral</a></td>

      </tr>

      <tr>

        <td><a href="#" target="Conteudo" class="cc">Reiki</a></td>

      </tr>

      <tr>

        <td><a href="#" target="Conteudo" class="cc">Yoga</a></td>

      </tr>

    </table>    </td>

    </tr>

</table></td>

</tr>

<tr>

  <td width="510" height="420" align="left" valign="top" bgcolor="#FFFFFF"><iframe frameborder="0" height="420" width="490" name="Conteudo" src="conteudo.html"></iframe></td>

</tr>

<tr valign="middle">

  <td height="30" colspan="2" align="left" bgcolor="#FFFFFF" style="border-collapse: collapse; border-top: 1px solid #E89E01;"><div align="center">Rua Harmonia, 900 - Vila Madalena - S&atilde;o Paulo, SP<br>

    Tel.: (11) 3031-2211 - E-mail: <a href="mailto:korpoealma@korpoealma.com.br?Subjec=Site%20Korpo%20e%20Alma">korpoealma@korpoealma.com.br</a><br>

    </div></td>

  </tr>

</table>

</td>

  </tr>

</table>

<script language="JavaScript">

document.onmouseover = openIt

 

function openIt() {

var items = 3 ;

currEl = window.event.toElement

  if (currEl.className == "barItem") {

    newId = currEl.id + "box"

      showBox = document.all(newId)

      showBox.style.display = "block"

      }       

   

  for (i=1; i<=items; i++) {

    openItem="item" + i + "box"

      elOpen = document.all(openItem)

        if ((elOpen.style.display == "block")&&(elOpen != showBox))

          elOpen.style.display = "none"

    if (currEl.className == "closeIt") { elOpen.style.display = "none"  }

  }

}

</script>

</body>

</html>

Valeu mais uma vez, e desculpa a encheção de saco!

Link para o comentário
Compartilhar em outros sites
  • 0
ricardo

ricardo

Postado
Postado

Da uma olhada nesse menu, ele não e dropdown mais da para usar a mesma ideia

<html>
<head>
<title>menu1</title>
<script language="javascript">
function visao1(){
m1.style.visibility = "visible"
}
function visao2(){
m2.style.visibility = "visible"
}
function visao3(){
m3.style.visibility = "visible"
}
function visao4(){
m4.style.visibility = "visible"
}
function fechatudo(){
m1.style.visibility = "hidden"
m2.style.visibility = "hidden"
m3.style.visibility = "hidden"
m4.style.visibility = "hidden"
}
</script>
</head>
<body onmouseout=fechatudo() onclick=fechatudo()>
<table cellspacing=0 width=10%>
<tr><td onmouseover=fechatudo();visao1()><a href=>menu1</a></td></tr>
<tr><td onmouseover=fechatudo();visao2()><a href=>menu2</a></td></tr>
<tr><td onmouseover=fechatudo();visao3()><a href=>menu3</a></td></tr>
<tr><td onmouseover=fechatudo();visao4()><a href=>menu4</a></td></tr>
</table>
<table onmouseover=visao1() style="position:absolute; left:88; top:15; VISIBILITY: hidden" id=m1 width=10%>
<tr><td><a href=>menu1.1</a></td></tr>
<tr><td><a href=>menu1.2</a></td></tr>
<tr><td><a href=>menu1.3</a></td></tr>
<tr><td><a href=>menu1.4</a></td></tr>
<tr><td><a href=>menu1.5</a></td></tr>
<tr><td><a href=>menu1.6</a></td></tr></TABLE>
<TABLE onmouseover=visao2() style="position:absolute; left:88; top:38; VISIBILITY: hidden" id=m2 width=10%>
<TR><TD><a href=>menu2.1</a></TD></TR>
<TR><TD><a href=>menu2.2</a></TD></TR>
<TR><TD><a href=>menu2.3</a></TD></TR>
<TR><TD><a href=>menu2.4</a></TD></TR>
<TR><TD><a href=>menu2.5</a></TD></TR>
<TR><TD><a href=>menu2.6</a></TD></TR></TABLE>
<TABLE onmouseover=visao3() style="position:absolute; left:88; top:61; VISIBILITY: hidden" id=m3 width=10%>
<TR><TD><a href=>menu3.1</a></TD></TR>
<TR><TD><a href=>menu3.2</a></TD></TR>
<TR><TD><a href=>menu3.3</a></TD></TR>
<TR><TD><a href=>menu3.4</a></TD></TR>
<TR><TD><a href=>menu3.5</a></TD></TR>
<TR><TD><a href=>menu3.6</a></TD></TR></TABLE>
<TABLE onmouseover=visao4() style="position:absolute; left:88; top:84; VISIBILITY: hidden" id=m4 width=10%>
<TR><TD><a href=>menu4.1</a></TD></TR>
<TR><TD><a href=>menu4.2</a></TD></TR>
<TR><TD><a href=>menu4.3</a></TD></TR>
<TR><TD><a href=>menu4.4</a></TD></TR>
<TR><TD><a href=>menu4.5</a></TD></TR>
<TR><TD><a href=>menu4.6</a></TD></TR></TABLE>
</body>
</html>

Desculpe encher o saco como diria o Bruno Pivato, mas para que seve

showBox.style.display = "block"???

Link para o comentário
Compartilhar em outros sites
  • 0
ricardo

ricardo

Postado
Postado

Bruno seu problema e na possicao das tabelas que aparecem???

So vou poder te responder isto amanha, mas tenta entrar nesse site: http://www.previdenciasocial.gov.br . Se for isso tenta tirar o codigo e fonte, mas se não for especifique melhor a sua duvida... por outro lado para que serve o comando: showBox.style.display = "block"???

Link para o comentário
Compartilhar em outros sites
  • 0
Bruno Pivato

Bruno Pivato

Postado
  • Autor
Postado

O problema é elas desaparecerem quando o mouse sai de cima (onmouseout), eu não estou conseguindo fazer elas desaparecerem! Quando a pessoa clica no link, fica o box la, ele não some, nem se ela tira o mouse de cima, só some quando passa o mouse em outro menu, que também abre um box.

Não sei pra que serve essa linha, eu copiei o código.

Valeu pela resposta! wink.gif

Link para o comentário
Compartilhar em outros sites
  • 0
ricardo

ricardo

Postado
Postado 

<html>
<head>
<title>menu1</title>
<script language="javascript">
function visao1(){
m1.style.visibility = "visible"
}
function visao2(){
m2.style.visibility = "visible"
}
function visao3(){
m3.style.visibility = "visible"
}
function visao4(){
m4.style.visibility = "visible"
}
function fechatudo(){
m1.style.visibility = "hidden"
m2.style.visibility = "hidden"
m3.style.visibility = "hidden"
m4.style.visibility = "hidden"
}
</script>
</head>
<body onmouseout=fechatudo() onclick=fechatudo()>
<table cellspacing=0 width=10%>
<tr><td onmouseover=fechatudo();visao1()><a href=>menu1</a></td>
<td onmouseover=fechatudo();visao2()><a href=>menu2</a></td>
<td onmouseover=fechatudo();visao3()><a href=>menu3</a></td>
<td onmouseover=fechatudo();visao4()><a href=>menu4</a></td></tr>
</table>
<table onmouseover=visao1() style="position:absolute; left:8; top:30; VISIBILITY: hidden" id=m1 width=10%>
<tr><td><a href=>menu1.1</a></td></tr>
<tr><td><a href=>menu1.2</a></td></tr>
<tr><td><a href=>menu1.3</a></td></tr>
<tr><td><a href=>menu1.4</a></td></tr>
<tr><td><a href=>menu1.5</a></td></tr>
<tr><td><a href=>menu1.6</a></td></tr></TABLE>
<TABLE onmouseover=visao2() style="position:absolute; left:50; top:30; VISIBILITY: hidden" id=m2 width=10%>
<TR><TD><a href=>menu2.1</a></TD></TR>
<TR><TD><a href=>menu2.2</a></TD></TR>
<TR><TD><a href=>menu2.3</a></TD></TR>
<TR><TD><a href=>menu2.4</a></TD></TR>
<TR><TD><a href=>menu2.5</a></TD></TR>
<TR><TD><a href=>menu2.6</a></TD></TR></TABLE>
<TABLE onmouseover=visao3() style="position:absolute; left:92; top:30; VISIBILITY: hidden" id=m3 width=10%>
<TR><TD><a href=>menu3.1</a></TD></TR>
<TR><TD><a href=>menu3.2</a></TD></TR>
<TR><TD><a href=>menu3.3</a></TD></TR>
<TR><TD><a href=>menu3.4</a></TD></TR>
<TR><TD><a href=>menu3.5</a></TD></TR>
<TR><TD><a href=>menu3.6</a></TD></TR></TABLE>
<TABLE onmouseover=visao4() style="position:absolute; left:134; top:30; VISIBILITY: hidden" id=m4 width=10%>
<TR><TD><a href=>menu4.1</a></TD></TR>
<TR><TD><a href=>menu4.2</a></TD></TR>
<TR><TD><a href=>menu4.3</a></TD></TR>
<TR><TD><a href=>menu4.4</a></TD></TR>
<TR><TD><a href=>menu4.5</a></TD></TR>
<TR><TD><a href=>menu4.6</a></TD></TR></TABLE>
</body>
</html>

Esta do mais ou meno do jeito que voce quer... altere aqueles left: e top: para mudar a posicao do menu que aparece... quero que voce entenda todo o codigo para que possa altera-lo e melhora-lo quando quiser... tem alguma parte do codigo que voce não entendeu??? Por outro lado não mande feichar o post vou ver para que serve o showBox.style.display = "block" Qualquer duvi da posta ai denovo.

Link para o comentário
Compartilhar em outros sites
  • 0
Espartaco

Espartaco

Postado
Postado

VÊ SE AGORA FUNCIONA DO JEITO QUE VOCÊ QUER

<html>

<head>

<title>menu1</title>

<script language="javascript">

function visao1(){

m1.style.visibility = "visible"

}

function visao2(){

m2.style.visibility = "visible"

}

function visao3(){

m3.style.visibility = "visible"

}

function visao4(){

m4.style.visibility = "visible"

}

function fechatudo(){

m1.style.visibility = "hidden"

m2.style.visibility = "hidden"

m3.style.visibility = "hidden"

m4.style.visibility = "hidden"

}

</script>

</head>

<body onmouseout=fechatudo() onclick=fechatudo()>

<table cellspacing=3 width=20 cellpadding="0" border="0" style="border-collapse: collapse" bordercolor="#111111">

<tr><td onmouseover=fechatudo();visao1() width="41"><font face="Verdana"><a href=>menu1</a></font></td></tr>

<tr><td onmouseover=fechatudo();visao2() width="41"><font face="Verdana"><a href=>menu2</a></font></td></tr>

<tr><td onmouseover=fechatudo();visao3() width="41"><font face="Verdana"><a href=>menu3</a></font></td></tr>

<tr><td onmouseover=fechatudo();visao4() width="41"><font face="Verdana"><a href=>menu4</a></font></td></tr>

</table>

<table onmouseover=visao1() style="position:absolute; left:51; top:14; VISIBILITY: hidden" id=m1 width=111 height="107" align="right">

<tr><td height="17">

  <p align="right"><a href=>menu1.1</a></td></tr>

<tr><td height="19">

  <p align="right"><a href=>menu1.2</a></td></tr>

<tr><td height="19">

  <p align="right"><a href=>menu1.3</a></td></tr>

<tr><td height="19">

  <p align="right"><a href=>menu1.4</a></td></tr>

<tr><td height="19">

  <p align="right"><a href=>menu1.5</a></td></tr>

<tr><td height="19">

  <p align="right"><a href=>menu1.6</a></td></tr></TABLE>

<TABLE onmouseover=visao2() style="position:absolute; left:52; top:38; VISIBILITY: hidden" id=m2 width=111 height="122">

<TR><TD>

  <p align="right"><a href=>menu2.1</a></TD></TR>

<TR><TD>

  <p align="right"><a href=>menu2.2</a></TD></TR>

<TR><TD>

  <p align="right"><a href=>menu2.3</a></TD></TR>

<TR><TD>

  <p align="right"><a href=>menu2.4</a></TD></TR>

<TR><TD>

  <p align="right"><a href=>menu2.5</a></TD></TR>

<TR><TD>

  <p align="right"><a href=>menu2.6</a></TD></TR></TABLE>

<TABLE onmouseover=visao3() style="position:absolute; left:52; top:59; VISIBILITY: hidden" id=m3 width=113 height="140">

<TR><TD align="right"><a href=>menu3.1</a></TD></TR>

<TR><TD align="right"><a href=>menu3.2</a></TD></TR>

<TR><TD align="right"><a href=>menu3.3</a></TD></TR>

<TR><TD align="right"><a href=>menu3.4</a></TD></TR>

<TR><TD align="right"><a href=>menu3.5</a></TD></TR>

<TR><TD align="right"><a href=>menu3.6</a></TD></TR></TABLE>

<TABLE onmouseover=visao4() style="position:absolute; left:53; top:80; VISIBILITY: hidden" id=m4 width=113 height="140" align="right">

<TR><TD align="right"><a href=>menu4.1</a></TD></TR>

<TR><TD align="right"><a href=>menu4.2</a></TD></TR>

<TR><TD align="right"><a href=>menu4.3</a></TD></TR>

<TR><TD align="right"><a href=>menu4.4</a></TD></TR>

<TR><TD align="right"><a href=>menu4.5</a></TD></TR>

<TR><TD align="right"><a href=>menu4.6</a></TD></TR></TABLE>

</body>

</html>

Link para o comentário
Compartilhar em outros sites

Participe da discussão

Você pode postar agora e se registrar depois. Se você já tem uma conta, acesse agora para postar com sua conta.

Visitante
Responder esta pergunta...

×   Você colou conteúdo com formatação.   Remover formatação

  Apenas 75 emoticons são permitidos.

×   Seu link foi incorporado automaticamente.   Exibir como um link em vez disso

×   Seu conteúdo anterior foi restaurado.   Limpar Editor

×   Você não pode colar imagens diretamente. Carregar ou inserir imagens do URL.

×
 Share
Ir para lista de Perguntas


  • Estatísticas dos Fóruns

    • Tópicos
      152,3k
    • Posts
      652,3k
×
×
  • Criar Novo...