Css3 появление элемента при :checked

175

04 июня 2019, 04:20

Пишу свое адаптивное меню. Все работает. Но есть одна небольшая проблема - появление элемента при нажатии на toggler.

Сейчас блок меню при нажатии на toggler появляется резко и сразу. Хочу добавить анимацию: плавное появление сверху вниз (как обычно реализовано боковое меню справа налево или как реализовано на bootstrap). Не очень понимаю к какому блоку и что прописать для реализации такого эффекта. HTML:

<nav class="nav">
    <div class="nav-wrapper">
        <a href="#" class="nav-brand">BRAND</a>
        <label for="nav-toggler" class="nav-toggler-label" onclick></label>
        <input id="nav-toggler" class="nav-toggler" type="checkbox">
        <div class="nav_content" id="navContent">
            <ul class="nav-ul_wrapper wrapper">
                <li class="nav-item nav-active"><a href="#">Main</a></li>
                <li class="nav-item"><a href="#">News</a></li>
                <li class="nav-item"><a href="#">Gallery</a></li>
                <li class="nav-item"><a href="#">Contacts</a></li>
            </ul>
            <form action="" class="nav-form">
                <input type="search" placeholder="Search" aria-label="Search">
                <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
            </form>
        </div>
    </div>
</nav>

CSS по нажатию на toggler:

&-toggler{
    display:none;
    &:checked ~ .nav_content{
        display: flex;
    }        
}

Пожалуйста помогите разобраться с этой ситуацией

Answer 1

nav-toggler{
    display:none;
    &:checked ~ .nav_content{
        transform: translateY(0);
        opacity: 1;
        max-height: 2000px;
        transition: all 1s ease-in;
    }
}
nav_content{
    width: 100%;    
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    border: 1px solid blue;
    .sm(flex-direction, column);
    .xs(z-index, 3);
    .xs(max-height, 0); 
    .xs(opacity, 0);
    .xs(transition, all .5s ease);
    &:hover{
        display:flex;
    }
    .nav-form{
        display: flex;
        flex-direction: row;
        justify-content: center;
        border: 1px solid green;
    }
}