Pesquisar na Comunidade
Mostrando resultados para as tags ''z-index''.
Encontrado 1 registro
-
Duration e posicionamento de menu deslizante
uma questão postou Phil Santos Ajax, JavaScript, XML, DOM
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