Animating the menu's height using CSS when it is being displayed or hidden

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.

Answer №1

Have you considered overriding the default Bootstrap collapse transition instead of using additional JavaScript?

<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" data-target="#menu" aria-controls="menu" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>
    <div class="navbar-collapse collapse" id="menu" 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>

CSS:

#menu {
    transition: height 1.5s ease;
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Guide on how to vertically and horizontally center a heading text with dash-bootstrap

I have implemented the Bootstrap dash layout for my web application, but I want to place the text in the red area instead of at the top of the page. Can anyone guide me on how to achieve this? https://i.sstatic.net/RcNhy.png I have already tried using "a ...

Using CSS3 translate will result in children becoming relatively positioned

I am facing an issue with a sidebar that contains 2 divs. <div class="sectionsContainer clearfix"><-- Sidebar --> <div class="leftSection pull-left"> <p>Maor</p> </div> <div class="rightSection pu ...

Why does the last-of-type selector work, but the first-of-type doesn't seem to?

The SCSS code snippet below is causing me some confusion: li { &.menu-item-type-custom { margin-bottom: 10px; a { // } &:last-of-type { margin-bottom: 40px; } &:first-of-type { margin-top: 40px; ...

Utilizing PNG images with color in CSS, HTML, or JavaScript

On my website, I have an image in PNG format. I am wondering if there is a way to change the color of the image using HTML5, JavaScript, or CSS. Ideally, I would like the image to be changed to white by inverting its colors (changing black to white, not al ...

Incorporate a linked select dropdown into the registration form

I am working on a sign-up form and trying to integrate 2 linked select boxes into the form. The code for the linked select boxes works fine separately but when I attempt to add it to the form, it doesn't display as expected. I attempted to incorporate ...

Tips for creating a sub-menu within a dropdown menu

I need some help adding a sub-menu to my drop-down function. I'm not very familiar with CSS, so I'm struggling to figure out how to do it. Ideally, I want the sub-menu to open to the right when the cursor hovers over it. Below is the CSS and HTML ...

Padding on a flex item nudges a neighboring flex item out of place

Encountering an issue - within a div container, I have 4 nested divs using the grid system. Oddly enough, the third div in the grid is not behaving as expected. When setting a margin-bottom for this div, instead of creating space at the bottom, it pushes ...

What is the best way to enable my search function to filter out specific items from a table?

Currently, I have created a table populated with data fetched from a JSON file. Now, my focus is on implementing a search functionality that filters out items based on user input and displays only those table rows matching the search criteria. The code sni ...

Firebase has flagged the Google Authentication process with a message stating: Entry denied: The request made by this application

I have connected my domain to Firebase authentication and granted authorization for authentication access. If you want to test it out, feel free to visit this link signInWithPopup(auth, provider) .then((result) => { // This provides a Google Acc ...

Repairing a broken link to the search engine results page (SERP) of an instant JSON search script

I have developed a search script inspired by Google Instant search, which shows relevant results as the user types. The script is written in JSON and utilizes JavaScript to create a URL for the result based on user input. However, there seems to be an issu ...

What is the best way to ensure that only one div is toggled at a time while using the toggle class function?

$(document).ready(function(){ $("#items").children().click(function(){ $(this).toggleClass('clicked'); }); }); .clicked { background-color:red; } <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></s ...

Converting an HTML form into a Django form while maintaining the original styling

I have a basic HTML form that I would like to use for collecting sign-in information with a Django backend. Below is my simple non-Django HTML form: <form id="contactForm" method="POST"> <div class="row"> <div class="form-group ...

I am experiencing difficulty with playing my embed file on Chrome as the request for the audio file is consistently being "canceled."

I implemented a feature on my webpage that uses jQuery to play a sound whenever users make an error. Here is a snippet of the HTML code: <embed id="beepCache" src="sound/beep.wav" autostart="false" type ="audio/x-wav" width="0" height="0" hidden="hidd ...

When utilizing direction:rtl in Chrome, a vertical scrollbar is displayed on the right side of the page

Whenever I include style='direction: rtl;', the vertical scrollbar is supposed to move to the left side instead of the right. While this behavior is observed in Internet Explorer and Firefox, Chrome seems to keep the scrollbar on the right. Is t ...

Show a component when there is no input value, then conceal it when an input value is present

Recently, I attempted to position a paragraph absolutely in relation to an input element. My goal is to conceal the paragraph when the input has a value, and reveal it when the input is empty. Here is the code snippet I created, however, it doesn't ...

The button's unclickability is due to the zIndex being set to -1

How can I create a clickable button? https://i.sstatic.net/BXOjz.png Feel free to check out the sandbox example here: https://codesandbox.io/s/m5w3y76mvy ...

What could be the reason for my Bootstrap popover malfunctioning?

I've been attempting to incorporate the Bootstrap popover into my project. I copied the code exactly from the example provided on the website, but unfortunately, it doesn't seem to be functioning properly on my site. Below is the full code snippe ...

retrieving data from a database to populate selection options using PHP

While working on our thesis, I encountered a challenge where I needed to transfer certain values from my SQL database to another part of the project. Below is a snippet of the sample code I was using: <tr> <td id="t" align="center"> ...

The Server-Sent Event feature seems to be malfunctioning as it appears that browsers are unable to detect any events sent through Server-Sent

I have successfully implemented server-sent events (HTML5) in my project without using node.js. It is a simple webpage (another JSP page) that makes a call and receives a response. However, when I receive the response, none of the methods/functions (onopen ...

Effortlessly switch between CSS animation styles while adjusting animation settings

My HTML element with animation is defined as follows: <div id="box"></div> The box starts by moving 200 pixels to the right, taking 4 seconds to complete. .anim { animation-name: anim; animation-duration: 4s; animation-t ...