Ir para conteúdo
  • 0

Hidden e onMouseOver

Folspa

Perguntado por Folspa,

 Share

Pergunta

Folspa

Folspa 26

Postado
Postado

Pessoal, eu gostaria de saber como fazer um menu ficar contraído e descontrair apenas quando passar o mouse por cima.

 

Por exemplo, imagine essa barra de navegação do XTibia (que desce junto com a página) teria apenas um pedaço dela para fora, quando passar ou mouse, ela apareceria totalmente, deslizando para baixo.

Link para o comentário
https://xtibia.com/forum/topic/223811-hidden-e-onmouseover/
Compartilhar em outros sites

10 respostass a esta questão

Posts Recomendados

  • 0
Piabeta Kun

Piabeta Kun 359

Postado
Postado

tem tecnicas basicas para o mesmo efeito por exemplo o gesior eu ja simulei o feito dos botoes do menu apenas criando dois botoes um contraido e um exposto e colocando no lugar dos originais que usavam o efeito de clariar quando passar o mouse!

 

mais pelo que eu lembro de epocas mega antigas de curso que esses efeitos sao criados mesmo com flash mais ai são outros 500, basta usar tecnicas basicas(gamibarras) para atingir o mesmo efeito!

Link para o comentário
https://xtibia.com/forum/topic/223811-hidden-e-onmouseover/#findComment-1581526
Compartilhar em outros sites
  • 0
Skymagnum

Skymagnum 234

Postado
Postado (editado)

 

 

<html>
<head>
 
<style type="text/css">
 
#menu{
width:630px;
height:12px;
background-color:#000000;
}
 
.itemOn{
width:630px;
height:22px;
padding-left:10px;
background-color:#000000;
}
.itemOn a{color:#fff; text-decoration:none; font-size:16px; font-weight:bold;}
.itemOn a:hover{text-decoration:none; font-size:16px; font-weight:bold;}
 
.itemOver{
width:150px;
height:22px;
padding-left:10px;
background-image: url(bg-menu.gif);
}
.itemOver a{color:#000000; text-decoration:none; font-size:2px; font-weight:bold;}
.itemOver a:hover{text-decoration:none; font-size:16px; font-weight:bold;}
 
</style>
 
<script language="JavaScript">
 
function mouse_out_menu(objDiv)
{
objDiv.className = 'itemOver';
}
 
function mouse_over_menu(objDiv)
{
objDiv.className = 'itemOn';
}
 
</script>
 
</head>
<body>
<div id="menu">
<div class="itemOn" onmouseover="mouse_over_menu(this);" onmouseout="mouse_out_menu(this);">
<a href="index.html">Menu</a></div>
</div>
</body>
</html>

Editado por Skymagnum
Link para o comentário
https://xtibia.com/forum/topic/223811-hidden-e-onmouseover/#findComment-1581690
Compartilhar em outros sites
  • 0
Folspa

Folspa 26

Postado
  • Autor
Postado

Tem alguns bugs, mas o que está pegando mais é que quando o menu abre, ele empurra a página para baixo, ao invés de apenas aparecer.


Me disseram para usar o animate do jQuery.

Link para o comentário
https://xtibia.com/forum/topic/223811-hidden-e-onmouseover/#findComment-1581706
Compartilhar em outros sites
  • 0
Skymagnum

Skymagnum 234

Postado
Postado

Tem alguns bugs, mas o que está pegando mais é que quando o menu abre, ele empurra a página para baixo, ao invés de apenas aparecer.

Me disseram para usar o animate do jQuery.

Talvez pode funcionar, é que eu não sei quase nada de html hueuheuhe, pesquisei mo tempo pra faze sabagaça ae.

Link para o comentário
https://xtibia.com/forum/topic/223811-hidden-e-onmouseover/#findComment-1582237
Compartilhar em outros sites
  • 0
Alexclusive

Alexclusive 687

Postado
Postado

Se não me engano, isso se chama Dropdown.


Não po, eu sinto que isso é puro javascript, mas não sei como o fazer.


Tente falar com o NicolasFrancaX, ele faz parte de nossa equipe e é fera em JS.

Link para o comentário
https://xtibia.com/forum/topic/223811-hidden-e-onmouseover/#findComment-1582282
Compartilhar em outros sites
  • 0
Lumus

Lumus 254

Postado
Postado

Tópico Movido
Este tópico foi movido de "OFF-Topic → Linguagens de Programação → Suporte Linguagens"
para "OFF-Topic → Linguagens de Programação → Suporte Linguagens → Dúvidas Resolvidas - Suporte Linguagens".

 

 

Link para o comentário
https://xtibia.com/forum/topic/223811-hidden-e-onmouseover/#findComment-1669159
Compartilhar em outros sites
 Share
Ir para lista de Perguntas
×
×
  • Criar Novo...