Currently, I am in the process of developing a horizontal navigation bar with a collapsible menu. For this project, I am utilizing bootstrap 4 and angular. The collapsing and showing functionality is operating as expected when clicking on the menu icon. However, I am interested in incorporating CSS transitions to smoothly adjust the height. Below is a snippet of the code I am working with:
<nav class="navbar navbar-expand-md navbar-light bg-light">
<a class="navbar-brand" href="#">SOME BRAND</a>
<button id="toggler" class="navbar-toggler collapsed" type="button" data-toggle="collapse" (click)="toogle();" data-target="#menu" aria-controls="menu" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse" id="menu" [ngClass]="activeClass ? 'show' : 'collapse'" data-parent="#toggler">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
</ul>
</div>
</nav>
Here is the CSS style I am using:
.on-slide-down {
height: 500px;
}
#menu {
transition: height 1.5s ease;
height: auto;
overflow: hidden;
}
Additionally, I have included the following JavaScript function:
toogle(){
this.activeClass = !this.activeClass;
let menu:HTMLElement = document.querySelector("#menu");
menu.classList.toggle("on-slide-down");
}
My goal is to dynamically assign the class .on-slide-down to increase the height. However, it seems that the transitions are not functioning as expected. The default behavior of collapsing and showing the menu persists. I have referred to this example for guidance, but I am unable to pinpoint the issue.