1

Bom dia pessoal, estou desenvolvendo um projeto e nele tem um cabeçalho que desenvolvi mostrando as categorias disponiveis dele. Layout do site com o Bootstrap 3.3, já por questões de apresentação decidi fazer uma animação no CSS do dropdown surgindo e se expandindo, ao dar o clique funcionou perfeitamente, porém ao desfocar dando um clique em outra coisa ele simplesmente desaparece, gostaria de fazer o reverso para esse dropdown desaparecer, consultei o W3 Schools mas não obtive uma solução para este problema.

Eis o código abaixo.

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 Resposta 1

1

Cara eu fiz esse modelo que acho que ficou bem próximo do que vc quer, só que ele não usa o @keyframes, pois com essa técnica mesmo fazendo a animação "reversa" sempre que vc entrar na página no primeiro segundo vc vai ver a animação reversa acontecendo o que não é legal...

Então eu usei transition e o evento :focos do css quando vc clica no link que abre o menu. Dessa forma o menu tem height 0, mas quando vc faz o foco nele a altura aumenta e vc ve a transição. quando perde o foco com o :not(:fucos) ele recolhe o menu.

OBS: Aqui no snippet do Stackoverflow não funciona direito pq não cabe no espaço, mas exiba como "Página toda" que vc vai ver funcionando direitinho

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

2
  • 1
    Funcionou! Obrigado pela ajuda amigo. 12/11/2018 às 19:27
  • @aleque_b tranquilo jovem tmj
    – hugocsl
    12/11/2018 às 19:42

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 .