1

Пишу свое адаптивное меню. Все работает. Но есть одна небольшая проблема - появление элемента при нажатии на 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;
    }        
}

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

1

1 ответ 1

0
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;
    }
}

.xs() и .sm() - это миксины с медиа кверисами для разного типа экрана

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.