FO
dúvida

Hidden e onMouseOver

Por Folspa, 11 de nov. de 2013 em Resolvidos

otserv
tibia
11
1.5k
FolspaF
11 de novembro de 2013 às 19:27

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.

Piabeta KunP
12 de novembro de 2013 às 16:07

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!

FolspaF
12 de novembro de 2013 às 20:24

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

SkymagnumS
12 de novembro de 2013 às 20:39

É mais fácil por CSS, mas vê se isso ajuda http://maujor.com/tutorial/ddownmenu.php.

FolspaF
12 de novembro de 2013 às 21:00

Não é isso, estou falando disso:

 

Menu normal:

post-276182-0-17396600-1384297186.png

 

Menu quando passa o mouse por cima:

post-276182-0-42081000-1384297204.png

SkymagnumS
12 de novembro de 2013 às 21:40

 

 

<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 Novembro 12 por Skymagnum

FolspaF
14 de novembro de 2013 às 21:15

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.

SkymagnumS
14 de novembro de 2013 às 22:52

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.

AlexclusiveA
15 de novembro de 2013 às 00:54

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.

Editado Novembro 15 por Alexclusive

1 ano depois...
FurabioF
08 de abril de 2015 às 13:20

Tópico movido para sua devida área.

5 meses depois...
LumusL
18 de setembro de 2015 às 02:11

Tópico Movido
Este tópico foi movido de "OFF-TopicLinguagens de ProgramaçãoSuporte Linguagens"
para "OFF-TopicLinguagens de ProgramaçãoSuporte LinguagensDúvidas Resolvidas - Suporte Linguagens".