Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Gente, clique no "clique aqui" deste site:
alguém sabe fazer isso?
sei que é com java + css... mas ainda tenho dúvidas...
Dá pra fazer issu fácilmente usando um Framework do JavaScript, o Jquery.
>
Isso é Javascript/DHTML/CSS sim.
Pega o código da página e baixa os arquivos .JS e .CSS, ou então utiliza a extensão FireBug do FireFox, assim você pode estudar como eles desenvolveram.
Começa com alguns testes simples, com uma DIV flutuante você consegue esse efeito.
Qq dúvida postae.
OK..!!?? T+...
então...
eu fui lá...
começei a fazer e tudo mais...
peguei os seguintes códigos:
JAVASCRIPT (comentários em português by mim. :P
//NAVEGAÇÃO - CÓDIGOS..........var opened=false;window.onload = function() { resizeDivHeight = new fx.Height('navegation',{duration:2000});};function toggelopen(){ if(opened==false){ resizeDivHeight.custom(0,400);//O primeiro número é do Height inicial, o segundo do Height final. opened=true; }else{ resizeDivHeight.custom(400,0);//o primeiro númeor é do Height inicial, o segundo do Height final. opened=false; }}e um estilinho css das classes citadas, tanto no html quanto no java:
#js {text-indent: -9999px;width: 140px;margin: 0 auto;text-align: center;}#navigation {font-size: 11px;background: #363636;border: 1px solid #363636;height:0px;padding: 0;color: #999999;overflow: hidden;}#navigation ul {padding: 0;margin: 0;list-style-type: none;margin-top: 10px;}#navigation ul li {padding: 0;margin: 0;}#navigation ul li a {border-bottom: 1px solid #444444;display: block;text-decoration: none;padding: 0;margin: 0;height: 20px;}#navigation-container {width: 800px;text-align: left;margin: 0 auto;padding: 0;padding-bottom: 10px;overflow: hidden;height: 370px;}#navigation-container a {color: #97AF6A;}#navigation-container a:hover {color: #D27C9E;}#navigation-container h3 {text-transform: none;margin: 0;padding: 0;margin-bottom: 5px;margin-top: 20px;padding-bottom: 1px;color: #91BFCE;font-size: 11px;background: transparent url(http://www.fluorescente.org/wp-content/themes/merdeka/images/h3.gif) repeat-x bottom left;}a#toggle {display: block;width: 140px;height: 39px;background: transparent url(http://www.fluorescente.org/wp-content/themes/merdekaimages/toggle2.gif) no-repeat top left;}a:hover#toggle {background-position: 0 -39px;}e a parte do html é assim:
<div id="navigation"><div id="navigation-container">(...)Qualquer coisa aqui (parte do menu)</div></div><div id="js"><a id="toggle" href="#" onclick="toggelopen()" title="Clique para abrir" >Click here</a></div><div id="container"><div id="header"><a href="http://www.fluorescente.org" ><img src="http://i22.photobucket.com/albums/b313/quekkel/top.jpg" alt="home" style="border: 0px; margin: 0px; padding: 0px;"></a></div>
e fiz o seguinte:
<div id="navigation"> <div id="navigation-container"> here here here<br />s2 </div></div><div id="js"><a id="toggle" href="#" onclick="toggelopen()">Click here</a></div>something here...... just for test it!
http://forum.imasters.com.br/public/style_emoticons/default/joia.gif
bjus.;
;)[edited]
mais um para dar um gostinho para vcs!
(Demonstrações)
e ainda, o fórum onde eles incrementam mais ainda esta ferramenta:
[/edited]
Isso é Javascript/DHTML/CSS sim.Pega o código da página e baixa os arquivos .JS e .CSS, ou então utiliza a extensão FireBug do FireFox, assim você pode estudar como eles desenvolveram.Começa com alguns testes simples, com uma DIV flutuante você consegue esse efeito.Qq dúvida postae.OK..!!?? T+...