1

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
  • Estude o código fonte desse link que vc passou que vc vai descobrir como fazer :)
    – user60252
    Commented 13/11/2017 às 18:49
  • na verdade eu consegui bolar um modo usando o height e overflow. mas a animação só funciona com tamanhos no formato x px e não com porcentagens. Commented 13/11/2017 às 19:02

1 Resposta 1

1

Simplesmente utilize a função slideToggle do jQuery :)


var open = false;
$('#button-social-menu').click(function(){
    $('#social-menu-itens').slideToggle( "slow" );
});

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .