Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Phil Santos

Duração de animação e posicionamento de menu deslizante

Por , em Javascript

Recommended Posts

Phil Santos    0

Phil Santos
Postado
Olá colegas,
Eu estou tentando fazer um menu que desliza para baixo da parte superior da página só que eu não sei
se o certo é fazer com o Jquery hide/show, ou toggle, ou slidedown, ou toggleclass, ou addclass, ou
switchclass, ou de outra forma.
Eu fiz com o seguinte código:
HTML
<html>
<head><title>Meu site</title>
</head>
<body>
<div id="all">
		<div id="tomenuandmenubutton" class="teste">
			<div class="menu">
				<ul>
					<li><a href="#">Ítem 1</a></li>
					
				</ul>
			</div>
		</div>	
<div id="toggle" ><img id="abainvertidadomenu1"src="images/aba_invertida_menu_3.png" width="50" height="20" /></div>
		
		
	<div id="content">
	</div>

</body>
</html>

CSS

*{
margin:0;
padding:0;
list-style:none;
}
html { overflow-y: scroll; }
html { overflow: -moz-scrollbars-vertical; }
html { overflow-x: auto; }
#all{
	width:100%;
	height:auto;
	margin:;
	padding:;
	background: #ffffff;
}
#tomenuandmenubutton{
	
	width: 100%;
	height:;
	margin: 0 auto;
	background:#000000;
	
}


#menubutton1{
	width: 488px; 
	height: 20px;
	background: #fff; 
	border: 1px solid #ccc; 
	padding: 5px; 
	cursor: pointer;
	text-align: center;
}
	
.menu { 
	width: 100%;
	height:100px;
	margin: 0 auto;
	background:#000000;
	cursor:pointer
}
.teste {
	height:0px; 
	overflow: hidden;
        cursor:pointer	
}

#toggle { 
	width: 100%;
	height: 10px;
	padding: 0px;
	background: #000000;
	border-bottom: 1px solid #000000;  
	text-align: center;
	cursor: pointer;
}
.menu ul li{
	color: #ffffff;
	font-size:1.2em;
	margin:;
	padding:30px 0 0 30px;
	list-style:none;
}
.menu ul li a{
	color: #ffffff;
	font-size:1.2em;
	margin:;
	padding:30px 0 0 30px;
	text-decoration:none;
}
.menu ul li a:hover{
	color: orange;
	font-size:1.2em;
	margin:;
	padding:30px 0 0 30px;
	text-decoration:underline;
}
input{
	display:block;
}
#content{
	float:left;
	width:100%;
	height:600px;
	margin:;
	padding:;
	background:blue;
	z-index:1;
}

JAVASCRIPT E JQUERY

<script type="text/javascript">
$(document).ready(function(){
	$('#toggle').mouseover(function(){
		$('#tomenuandmenubutton').toggleClass('teste',3000);					

		  
	});	
});
</script>
O que acontece é que eu estou aprendendo javascript e Jquery e eu não sei onde eu coloco o "duration" para que o menu deslize mais lentamente porque ele está dando um pulo para baixo.
Outra coisa que eu preciso saber é sobre o posicionamento porque eu quero que o menu deslize sobre a div que está abaixo sem empurrar ela para baixo. Eu tentei usar o z-index, mas não funcionou.
Desculpem-me, mas eu sou iniciante, já sei um tanto de html e css, mas falta muito a aprender e
javascript e jquery estou bem no começo mesmo.
Agradeço desde já a ajuda!
Phil

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Javascript
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito