Header with Animated Dropdown

Question

Header with Animated Dropdown

Asked 6 years ago

Viewed 311 times

1

Good morning guys, I’m developing a project and it has a header that I developed showing the available categories of it. Layout of the site with Bootstrap 3.3, already for presentation reasons I decided to make an animation in the CSS of the dropdown appearing and expanding, when giving the click worked perfectly, but when blurring giving a click on something else it just disappears, I would like to make the reverse so that this dropdown goes away, I have consulted W3 Schools but I have not found a solution to this problem.

Here is the code below.

HTML:

<div id="navbar" class="navbar-collapse collapse">
        <ul class="nav navbar-nav">
            <li <?=$page=='index.php' ? 'class="active"' : '';?>>
                <a href="index.php">HOME</a>
            </li>
            <li <?=$page=='empresa.php' ? 'class="active"' : '';?>>
                <a href="empresa.php">EMPRESA</a>
            </li>
            <li class="dropdown <?=$page=='areas.php' ? 'active' : '';?>">
                <a class="dropdown-toggle" href="Javascript:void(0);" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">ÁREAS DE ATUAÇÃO</a>
                <ul class="dropdown-menu">
                    <? while($row_rsArea = mysql_fetch_assoc($rsArea)) { ?>
                        <li>
                            <a href="area.php?id=<?=$row_rsArea['area_id'];?>" class="text-uppercase"><?=$row_rsArea['area_titulo'];?></a>
                        </li>
                    <? } ?>
                </ul>
            </li>
            <li <?=$page=='equipamentos.php' ? 'class="active"' : '';?>>
                <a href="equipamentos.php">EQUIPAMENTOS</a>
            </li>
            <li <?=$page=='clientes.php' ? 'class="active"' : '';?>>
                <a href="clientes.php">CLIENTES</a>
            </li>
            <li <?=$page=='contato.php' ? 'class="active"' : '';?>>
                <a href="contato.php">CONTATO</a>
            </li>
        </ul>
    </div>

CSS:

.dropdown-menu {
text-align: center;
max-height: 0px;
transition: all 2s ease;
overflow: hidden;
}
.open>.dropdown-menu {
    -webkit-animation-name: dropdown; /* Safari 4.0 - 8.0 */
    -webkit-animation-duration: 2s; /* Safari 4.0 - 8.0 */
    -webkit-animation-fill-mode: forwards; /* Safari 4.0 - 8.0 */
    animation-name: dropdown;
    animation-duration: 2s;
    animation-fill-mode: forwards;
}
/* Standard syntax */
@keyframes dropdown {
    0%   {display: none;}
    25%   {display: block;}
    50%  {max-height: 250px;}
    100% {max-height: 500px;}
}
/* Safari 4.0 - 8.0 */
@-webkit-keyframes dropdown {
    0%   {display: none;}
    25%   {display: block;}
    50%  {max-height: 250px;}
    100% {max-height: 500px;}
}

1 answer

Browser other questions tagged html jquery css twitter-bootstrap

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

by hugocsl • **65,517** points · Answer 1 · 2018-11-12T16:35:04+00:00

Dude I made this model that I think is pretty close to what you want, only he doesn’t use the @keyframes, because with this technique even making the animation "reverse" whenever you enter the page in the first second you will see the reverse animation happening which is not cool...

So I used transition and the event :focos css when you click on the link that opens the menu. This way the menu has height 0, but when you focus on it the height increases and you see the transition. when you lose focus with the :not(:fucos) he collects the menu.

OBS: Here in the snippet Stackoverflow does not work right because it does not fit in space, but display as "Whole page" that you will see working well

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Page Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
    <link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" />
    <link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
<style>


.dropdown-toggle:not(:focus) + .dropdown-menu {
    max-height: 0;
    padding: 0;
    border: 1px solid transparent;
    box-shadow: none;
}
.dropdown-toggle:focus + .dropdown-menu {
    max-height: 500px;
}

.dropdown-menu {
    text-align: center;
    transition: all 1000ms ease;
    overflow: hidden;
    display: block !important;
    max-height: 0;
    animation: none;
}
.dropdown-toggle {
    transition: all 1000ms ease;
}


</style>
</head>
<body>
    
    <div id="navbar" class="navbar-collapse collapse">
        <ul class="nav navbar-nav">
            <li <?=$page=='index.php' ? 'class="active"' : '';?>>
                <a href="index.php">HOME</a>
            </li>
            <li <?=$page=='empresa.php' ? 'class="active"' : '';?>>
                <a href="empresa.php">EMPRESA</a>
            </li>
            <li class="dropdown <?=$page=='areas.php' ? 'active' : '';?>">
                <a class="dropdown-toggle" href="Javascript:void(0);" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">ÁREAS DE ATUAÇÃO</a>
                <ul class="dropdown-menu">
                    <? while($row_rsArea = mysql_fetch_assoc($rsArea)) { ?>
                        <li>
                            <a href="area.php?id=<?=$row_rsArea['area_id'];?>" class="text-uppercase"><?=$row_rsArea['area_titulo'];?></a>
                        </li>
                        <li>
                            <a href="area.php?id=<?=$row_rsArea['area_id'];?>" class="text-uppercase">teste</a>
                            <a href="area.php?id=<?=$row_rsArea['area_id'];?>" class="text-uppercase">teste</a>
                            <a href="area.php?id=<?=$row_rsArea['area_id'];?>" class="text-uppercase">teste</a>
                        </li>
                    <? } ?>
                </ul>
            </li>
            <li <?=$page=='equipamentos.php' ? 'class="active"' : '';?>>
                <a href="equipamentos.php">EQUIPAMENTOS</a>
            </li>
            <li <?=$page=='clientes.php' ? 'class="active"' : '';?>>
                <a href="clientes.php">CLIENTES</a>
            </li>
            <li <?=$page=='contato.php' ? 'class="active"' : '';?>>
                <a href="contato.php">CONTATO</a>
            </li>
        </ul>
    </div>
    
    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script>
    // $('.dropdown ').on('click', function () {
    //     $('.dropdown-menu' ).slideToggle('slow');
    // });
    </script>
</body>
</html>