Header with animated Dropdown

Question

Header with animated Dropdown

Navigation

#1 by (1 votes)

1

Good morning, I'm developing a project and it has a header that I developed showing the categories available to it. Layout of the site with Bootstrap 3.3, because of presentation issues I decided to make an animation in the CSS of the dropdown popping up and expanding, when giving the click worked perfectly, but when blurring by clicking on something else it just disappears, I would like to do the reverse for that dropdown to disappear, I consulted the W3 Schools but did not get 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;}
}

html jquery css twitter-bootstrap

asked by anonymous 12.11.2018 / 12:40

1 answer

Java JfileChooser doubt code How to compare memory used by 2 processes

score 1 · Accepted Answer

Dude I made this model that I think was very close to what you want, except that it does not use @keyframes , because with this technique even doing the "reverse" animation 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 :focos event of 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 it loses focus with :not(:fucos) it collects the menu.

OBS: Here in% Stackoverflow% does not work right because it does not fit in space, but display as "Page entire" that you will see working fine p>

<!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><scriptsrc="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>