Duration e posicionamento de menu deslizante

Phil Santos · April 9, 2015

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.

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, onde eu estou colocando os milisegundos não está funcionando, não sei se é erro de sintaxe ou outra coisa.

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, javascript e jquery estou bem no começo mesmo.

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');							  
	});	
});
</script>

Grato desde já,

Phil

Sign In

Duration e posicionamento de menu deslizante

Question

Phil Santos

Link to comment

Share on other sites

0 answers to this question

Recommended Posts

Join the conversation

Forum Statistics

Browse

Activity