Jump to content
Claudio Demarchi

botão retrátil na lateral do site

Recommended Posts

Olá, um bom ponto de partida para aprender considerando que você já saiba o básico de html e css seria animações e transições com css3.

 

animações: http://www.w3schools.com/css/css3_animations.asp

transições: http://www.w3schools.com/css/css3_transitions.asp

 

Aqui está uma exemplo usando animação em css3(versão porca, feita de última hora): https://jsfiddle.net/wo0xvuen/

Share this post


Link to post
Share on other sites

Claudio Demarchi,

Como o Jonathanrn citou, você já deve saber HTML e CSS (básicos) para entender o que vamos propor de solução... Então vamos ao que interessa.

Você pode simular essa estrutura de diversas maneiras no HTML, exemplos:

1

<div class="wrapper">
   <a href="#"><div class="info"></div></a>
   <a href="#"><div class="whatsapp"></div></a>
</div>

2

<ul class="menu-lateral">
   <li><a href="#">Info</a></li>
   <li><a href="#">Whatsapp</a></li>
</ul>

3

<div class="wrapper">
   <a href="#">Info</a>
   <a href="#">Whatsapp</a>
</div>

Bom... Tudo isso mostrado acima é bem simples e o que vai faltar será só o CSS3 a ser utilizado pra deixar alinhado a esquerda da página e fixo conforme o scroll (rolagem).

Veja um exemplo que preparei pra você no JSFiddle. Lembrando que todo elemento que você criar, ele automaticamente estará alinhado a esquerda da página. O efeito é bem simples, eu só negativei a margem pra que ele ficasse fora de visão e na pseudo-classe :hover, foi removido a margem negativada.

Adicionei o transition com cubic-bezier como efeito, mas você pode substituir por outros, exemplo: ease, ease-in, ease-in-out, ease-out...

 

 

Aqui está uma exemplo usando animação em css3(versão porca, feita de última hora): https://jsfiddle.net/wo0xvuen/

Jonathanrn, evite o uso de animation para efeitos simples (consome mais código, é mais lento e pode dar problemas ao efetuar o efeito "out") e também evite margin-top para alinhamento (isso dará dores de cabeça mais pra frente). Quando você atribui um position: fixed; você pode utilizar o top: 50%; para que o menu fique ao centro da página.

  • +1 1

Share this post


Link to post
Share on other sites

Jonathanrn, evite o uso de animation para efeitos simples (consome mais código, é mais lento e pode dar problemas ao efetuar o efeito "out") e também evite margin-top para alinhamento (isso dará dores de cabeça mais pra frente). Quando você atribui um position: fixed; você pode utilizar o top: 50%; para que o menu fique ao centro da página.

Muito bom!

Verdade, acabei percebendo que não utilizo muito transition o que faz meu projeto ficar maior em certos casos. Vou me atentar, obrigado pela ajuda!

  • +1 1

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.