Menu Animado Css

Menu Animado Css

Neste artigo vamos criar um menu fixo com html css e jquery.

Os menus são componentes ou recursos de sites que oferece aos usuários acesso rápido e intuitivo às sessões do seu projeto. Através dos menus, você consegue oferecer aos visitantes do seu site uma porta de entrada para todo seu conteúdo.

Vamos Adicionar o Html

 Nesta seção, a estrutura básica do código é projetada usando HTML. 

Usaremos as tags <div>, <i> e <href> no html para criarmos a estrutura no nosso menu.

    <div class="menu-animado">
    
        <div class="flutua">
            <i class="fa fa-share-alt"></i>
        </div>
    
        <div class="redondo social box">
          <a href="#" class="facebook"><i class="fa fa-facebook"></i></a>
          <a href="#" class="instagram"><i class="fa fa-instagram"></i></a>
          <a href="#" class="twitter"><i class="fa fa-twitter"></i></a>
        </div>
    
    </div><!-- menu-animado -->

Vamos Adicionar o Css: 

Nesta seção, as propriedades CSS são usadas para criar Animação do menu.

Usaremos a propriedade css position:fixed; para deixar o menu Flutuante no Html. 

A animação acontece quando o usuário clica no menu principal quando clicado ele Revela os submenus ocultos com css e jquery.

    .menu-animado{
      
        position:fixed;
        width:60px;
        height:60px;
        z-index:9;
        bottom:103px;
        right:103px;

    }

    .flutua{

        position:relative;
        display:inline-block;
        width:60px;
        height:60px;
        line-height:60px;
        background-color:#39cece;
        color:#FFF;
        cursor:pointer;
        border-radius:50px;
        text-align:center;
        z-index:1000;
        animation: bot-to-top 2s ease-out;
    }

    .btn-ativo { background-color:#4c4c4c!important; transition:0.8s; }

    .menu-animado .flutua{

        background-color: #29d5d9;
        box-shadow: 0px 0px 8px 2px rgb(232, 232, 232);
    
    }

    .social a{

        color:#FFF;
        border-radius:50%;
        text-align:center;
        width:50px;
        height:50px;
        line-height:53px;
        padding:0px;
        font-size:20px;
        display:inline-block;
        position:absolute;
        top:5px;
        left:6px;
        transition:all .5s;
    }

    .social a:hover{

      box-shadow: 2px 2px 3px #999;
    }

    a.facebook {

      background-color:#4E71A8;
      animation-delay:.5s;
    }

    a.instagram {

      animation-delay:.7s;
      background-color:#E3411F;
    }

    a.twitter {

      animation-delay:.15s;
      background-color:#1CB7EB;
    }

    .box .facebook {

      left:80px;
    }

    .box .instagram {

      left:140px;
    }

    .box .twitter{

      left:200px;
    }

    .menu-animado .flutua {

      font-size:24px;
    }
    

    .menu-animado .redondo{

      width: 90px;
      height: 124px;
      background-color: transparent;
      border-bottom-left-radius: 90px;
      border-top-left-radius: 90px;
      position:absolute;
      top:-30px;
      left:-50px;
    
    }

    .menu-animado .redondo a.facebook {

      top:-20px;
      left:20px;
    
    }

    .menu-animado .redondo a.instagram{

      top:35px;
      left:-10px;
    }

    .menu-animado .redondo a.twitter{

      top:90px;
      left:20px;
    
    }

    .menu-animado .box a.facebook,.menu-animado .box a.instagram,.menu-animado .box a.twitter{

      top:35px;
      left:55px;
    
    }

Vamos inserir o Script

Nesta seção, quando clicamos na <div> que tem a class=”.menu-animado” ele altera a cor do menu e exibe os submenus na class .toggleClass(“box”).

<script>

    $(".menu-animado .flutua").click(function(){

        $('.flutua').toggleClass('btn-ativo');
    
    $(".menu-animado .social").toggleClass("box");

  });

</script>

Código Completo: 

E por fim a combinação das três seções de código acima. 

Veja o Resultado do Nosso Menu Animado Css!

Baixar Código Veja Funcionando