Animação do menu

Front-end CSS
,
#1

Olá pessoal, estou montando um menu responsivo. Ele usa o jquery apenas pra inserir e retirar uma classe da div com o id=“social-menu-itens” o que faz o menu sumir e aparecer.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Menu horizontal com links sociais</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">


        <script src="https://code.jquery.com/jquery-3.2.1.js"  integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE=" crossorigin="anonymous"></script>

        <!-- Latest compiled and minified CSS -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">


        <!-- Latest compiled and minified JavaScript -->
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
        
        <style media="screen">
            .menu-social {
                background-color: #eee;
            }

            .menu-social ul{
                padding: 0;
            }

            .menu-social .menu-itens{
                display: none;
            }

            .menu-social .menu-itens-open{
                display: block;
            }

            .menu-social .social-itens li{
                display: inline-block;
            }
            .menu-social .menu-itens ul{
                width: 100%;
            }
            .menu-social .menu-itens li{
                display: inline-block;
                align-items: center;
                width: 100%;
                text-align: center;
            }
            .menu-social .menu-itens li a{
                display: inline-block;
                width: 100%;
            }
            .menu-social .menu-itens li a:hover{
                background-color: #ddd;
            }
            .menu-social ul{
                display: inline-block;
            }

            .menu-social button{
                float: right;
            }
            @media screen and (min-width: 992px) {
                /* ... */
            }
        </style>

    </head>
    <body>
        <header>
            <div class="menu-social container">
                <div class="social-itens">
                    <ul>
                        <li><a href="#">Social 1</a></li>
                        <li><a href="#">Social 2</a></li>
                        <li><a href="#">Social 3</a></li>
                    </ul>
                    <button id="button-social-menu" type="button" name="button">Botão</button>

                </div>
                <div id="social-menu-itens" class="menu-itens">
                    <nav>
                        <ul>
                            <li><a href="#">Item 1</a></li>
                            <li><a href="#">Item 2</a></li>
                            <li><a href="#">Item 3</a></li>
                            <li><a href="#">Item 4</a></li>
                            <li><a href="#">Item 5</a></li>
                        </ul>
                    </nav>
                </div>
            </div>
        </header>
        <script type="text/javascript">

                var open = false;
                $('#button-social-menu').click(function(){
                    if (!open) {
                        open = true;
                        $('#social-menu-itens').addClass('menu-itens-open');
                    } else {
                        open = false;
                        $('#social-menu-itens').removeClass('menu-itens-open');
                    }
                });
        </script>
    </body>
</html>

Mas ele é muito “seco”. Gostaria que ele tivesse uma animação como a do https://getbootstrap.com/docs/3.3/examples/starter-template/
quando esta em telas pequenas e se clica no ‘botão’.

Alguém tem alguma dica?
Agradeço desde já!

#2

Utilizando o JQuery existem muitas possibilidades de se fazer essas animações, basta você procurar no internet mesmo por “Animação JQuery”.

Vou te mostrar algumas formas de se fazer tais animações sem a necessidade de escrita de código CSS, apenas com javascript.

Na sua função, você está adicionando e removendo a classe “menu-itens-open”. Remova ela e atribua uma função ao ID do item que deseja aplicar a animação.

Você pode usar o toggle() assim:

$('#social-menu-itens').toggle();

realizando o mesmo que o seu código fazia, entretanto, sem a necessidade de escrever um código CSS.

Você também pode colocar um slow:

$('#social-menu-itens').toggle("slow");

Você também pode usar a função fadeIn() e fadeOut(), assim:

$('#social-menu-itens').fadeIn(); //ao abrir

$('#social-menu-itens').fadeOut(); //ao fechar

Um efeito legal seria você utilizar os dois:

var open = false;
$('#button-social-menu').click(function(){
      if (!open) {
            open = true;
            $('#social-menu-itens').toggle("slow");
            $('#social-menu-itens').fadeIn();
      } else {
            open = false;
            $('#social-menu-itens').toggle("slow");
            $('#social-menu-itens').fadeOut();
      }
});