Duração de animação e posicionamento de menu deslizante
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
Discussão (0)
Carregando comentários...