How to make this menu open with a smooth animation? com css, html, js

Asked

Viewed 344 times

1

I’m putting together a responsive menu. It uses jquery only to insert and remove a class from the div with id="social-menu-items" which makes the menu disappear and appear. 

<!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>

But he is very "dry". I would like him to have an animation like the https://getbootstrap.com/docs/3.3/examples/starter-template/ when this on small screens and click on the 'button'.

Anybody got any tips? Thank you in advance!

html css

  • Study the source code of this link you have passed that you will figure out how to do :)

  • actually I was able to figure out a mode using height and overflow. but the animation only works with sizes in x px format and not with percentages.

1 answer

1

Simply use the jQuery slideToggle function :)


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

Browser other questions tagged html css

You are not signed in. Login or sign up in order to post.