html
<nav class="navbar navbar-light bg-light">
<div class="container-fluid">
<span class="navbar-brand">Navbar</span>
<button class="navbar-toggler" type="button">
<span class="navbar-toggler-icon"></span>
</button>
</div>
</nav>
<ul class="list-group">
<li class="list-group-item">An item
<li class="list-group-item">A second item
<li class="list-group-item">A third item
<li class="list-group-item">A fourth item
<li class="list-group-item">And a fifth one
css
.list-group {
height: 0;
overflow: hidden;
transition: all 1s;
}
.on {
height: 400px;
overflow: visible;
}
js
document.querySelector('.navbar-toggler').addEventListener('click', function(){
document.querySelector('.list-group').classList.toggle('on');
})
Q. 서브메뉴가 접혔다 펴지는 애니메이션은 어떻게 만들까요?
이 부분을 작업해봤는데요 !!
버튼을 한번 클릭시 애니메이션 적용이 안된 상태로 반짝 뜨고 한번 더 클릭하면 의도한 대로 위로 스르륵 접히면서
애니메이션이 작동합니다 !
왜 메뉴를 닫을때는 작동하고 처음 들어와서 메뉴를 보이게 하려고할 땐 애니메이션이 작동 안하는지 궁금합니다 쌤 ㅠㅡㅠ,,
