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

Menu Dinâmico... (está Devagar)

Skin_

Perguntado por Skin_,

 Share

Pergunta

Skin_

Skin_

Postado
Postado

Bem pessoal...

Baseado no ALPHA MENU, disponibilizado no scriptbrasil, tentei fazer o meu próprio menu....

O problema é que os efeitos estão demorados.... (demora mais que o normal para "trocar as classes" dos submenus...)

vou colar o código aqui...

Será que alguém poderia me dar uma dica pra melhorar a velocidade do meu menu?

ARQUIVO HTML (Menu.htm)

<html>
<head>
<title>Menu Dinâmico 2</title>
<link rel="stylesheet" href="Menu.css">
<script type="text/JavaScript" src="Menu.js"></script>
</head>

<body topMargin="0" leftMargin="0" rightMargin="0">

<div id="Menu" class="camada_pri">
<table width="600" border="0" cellspacing="1">
 <tr>
  <td class="menu_pri" onMouseOver="visivel('block','1'); className='menu_ilu';" onMouseOut="visivel('none','1'); className='menu_pri';">Adicionar</td>
  <td class="menu_pri" onMouseOver="className='menu_ilu'" onMouseOut="className='menu_pri'">Pesquisar</td>
  <td class="menu_pri" onMouseOver="visivel('block','2'); className='menu_ilu'; Sub_Alterar.style.width='90';" onMouseOut="visivel('none','2'); className='menu_pri';">Alterar</td>
  <td class="menu_pri" onMouseOver="visivel('block','3'); className='menu_ilu'; Sub_Excluir.style.width='90';" onMouseOut="visivel('none','3'); className='menu_pri';">Excluir</td>
  <td class="menu_pri" onMouseOver="className='menu_ilu';" onMouseOut="className='menu_pri';">Usuário</td>
  <td class="menu_pri" onMouseOver="className='menu_ilu';" onMouseOut="className='menu_pri';">Configurações</td>
  <td class="menu_pris" onMouseOver="className='menu_ilus';" onMouseOut="className='menu_pris';">Sair</td>
 </tr>
</table>
</div>

<div id="Sub_Adicionar" class="camada_sec" onMouseOver="visivel('block','1');" onMouseOut="visivel('none','1')">
<table width="100%" align="center" border="0" cellspacing="3">
 <tr><td class="menu_sub" onMouseOver="className='menu_subilum';" onMouseOut="className='menu_sub'" onClick="">Indivíduo</a></td></tr>
 <tr><td class="menu_sub" onMouseOver="className='menu_subilum';" onMouseOut="className='menu_sub'" onClick="">Série de Indivíduos</td></tr>
 <tr><td><hr size="2"></td></tr>
 <tr><td class="menu_sub" onMouseOver="className='menu_subilum';" onMouseOut="className='menu_sub'" onClick="">Espécie</td></tr>
 <tr><td class="menu_sub" onMouseOver="className='menu_subilum';" onMouseOut="className='menu_sub'" onClick="">Museu</td></tr>
 <tr><td class="menu_sub" onMouseOver="className='menu_subilum';" onMouseOut="className='menu_sub'" onClick="">Local</td></tr>
 <tr><td class="menu_sub" onMouseOver="className='menu_subilum';" onMouseOut="className='menu_sub'" onClick="">Coletor</td></tr>
</table>
</div>

<div id="Sub_Alterar" class="camada_sec" onMouseOver="visivel('block','2')" onMouseOut="visivel('none','2')">
<table width="100%" align="center" border="0" cellspacing="3">
 <tr><td class="menu_sub" onMouseOver="className='menu_subilum';" onMouseOut="className='menu_sub'" onClick="">Indivíduo</a></td></tr>
 <tr><td class="menu_sub" onMouseOver="className='menu_subilum';" onMouseOut="className='menu_sub'" onClick="">Espécie</td></tr>
 <tr><td class="menu_sub" onMouseOver="className='menu_subilum';" onMouseOut="className='menu_sub'" onClick="">Museu</td></tr>
 <tr><td class="menu_sub" onMouseOver="className='menu_subilum';" onMouseOut="className='menu_sub'" onClick="">Local</td></tr>
 <tr><td class="menu_sub" onMouseOver="className='menu_subilum';" onMouseOut="className='menu_sub'" onClick="">Coletor</td></tr>
</table>
</div>

<div id="Sub_Excluir" class="camada_sec" onMouseOver="visivel('block','3')" onMouseOut="visivel('none','3')">
<table width="100%" align="center" border="0" cellspacing="3">
 <tr><td class="menu_sub" onMouseOver="className='menu_subilum';" onMouseOut="className='menu_sub'" onClick="">Indivíduo</a></td></tr>
 <tr><td class="menu_sub" onMouseOver="className='menu_subilum';" onMouseOut="className='menu_sub'" onClick="">Espécie</td></tr>
 <tr><td class="menu_sub" onMouseOver="className='menu_subilum';" onMouseOut="className='menu_sub'" onClick="">Museu</td></tr>
 <tr><td class="menu_sub" onMouseOver="className='menu_subilum';" onMouseOut="className='menu_sub'" onClick="">Local</td></tr>
 <tr><td class="menu_sub" onMouseOver="className='menu_subilum';" onMouseOut="className='menu_sub'" onClick="">Coletor</td></tr>
</table>
</div>

</body>
</html>
ARQUIVO CSS (Menu.css) 
.camada_pri {
filter:alpha(style=1,opacity=100,FinishOpacity=40,StartX=0,FinishX=0,StartY=100,FinishY=0);
display:block;
width:100%;
color: #ffffff;
border: 0px;
}

.camada_sec {
filter:alpha(style=1,opacity=100,FinishOpacity=70,StartX=0,FinishX=0,StartY=0,FinishY=100);
display:none;
width:130;
background: #E1E1E1;
border: 1 solid #333333;
position: absolute;
cursor: hand;
}

.menu_pri {
font-Size: 15px;
background-color: #c0c0c0;
border: 1 outset #ffffff;
text-align:center;
cursor: hand;
}

.menu_ilu {
font-Size: 15px;
background-color: #DBDBDB;
border: 1 inset #ffffff;
text-align:center;
cursor: hand;
}

.menu_pris {
font-Size: 15px;
background-color: #FF8A8D;
border: 1 outset #ffffff;
text-align:center;
cursor: hand;
}

.menu_ilus {
font-Size: 15px;
background-color: #FFC6C7;
border: 1 inset #ffffff;
text-align:center;
cursor: hand;
}

.menu_sub {
font-Size: 12px;
font-family: Arial;
border: 1 solid #E1E1E1;
cursor: hand;
}

.menu_subilum {
font-Size: 12px;
font-family: Arial;
cursor: hand;
background: #f5f5f5;
border: 1 inset #EFEFEF;
}
ARQUIVO JavaScript(Menu.js) 
function visivel(valor,op) {
switch(op) {
 case '1':
  Sub_Adicionar.style.display = valor;
  Sub_Adicionar.style.left = 2;
  Sub_Adicionar.style.top = 21;
 break
 case '2':
  Sub_Alterar.style.display = valor;
  Sub_Alterar.style.left = 192;
  Sub_Alterar.style.top = 21;
 break
 case '3':
  Sub_Excluir.style.display = valor;
  Sub_Excluir.style.left = 264;
  Sub_Excluir.style.top = 21;
 break;
 }
}

Obrigado!

wink.gif

Skin_

Link para o comentário
Compartilhar em outros sites

3 respostass a esta questão

Posts Recomendados

  • 0
Skin_

Skin_

Postado
  • Autor
Postado

é...

eu sei que ler o código dos outro é um porre!! tongue.gif

Bem...

Alguém tem alguma dica pra se fazer um menu dinâmico rápido?

Tenho a impressão de que gerar todo o código do menu com javascript (usando document.write() pra escrever inclusive as tags HTML) o tornará mais rápido... (pelo menos foi essa a maior diferença entre o meu menu e o "alpha menu" do scriptbrasil... na verdade, não usei nenhuma vez o "document.write()"... o que eu pude fazer com HTML normal eu o fiz!)

O que vocês acham?

Abraço...

wink.gif

Skin_

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

Skin_

Postado
  • Autor
Postado

Pô cara.... legal ouvir isso... smile.gif

Bem... quando você abre um menu e passa o mouse rápido nos sub_ítens, demora um pouco para o efeito aparecer... (o efeito não acompanha a velocidade do mouse...)

Com o ALPHA MENU isso não acontece!

té...

Skin_

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,1k
    • Posts
      651,8k
×
×
  • Criar Novo...