I am writing my adaptive menu. Everything is working. But there is one small problem - the appearance of the item when you click on the toggler.

enter image description here

enter image description here

Now the menu block when you click on the toggler appears abruptly and immediately. I want to add an animation: a smooth appearance from top to bottom (as usual, the sidebar menu is implemented from right to left or as implemented on bootstrap). I don’t really understand what block and what to prescribe for the realization of such an effect. 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 by clicking on toggler:

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

Please help me deal with this situation.

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

.xs () and .sm () are mixins with media querishes for different screen types.