Guide to adding animation to the Bootstrap 4 Dropmenu

There is a collapse animation on the navbar toggler:

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body>
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav mr-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>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Dropdown
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <div class="dropdown-divider"></div>
          <a class="dropdown-item" href="#">Something else here</a>
        </div>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#">Disabled</a>
      </li>
    </ul>
    <form class="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
    </form>
  </div>
</nav>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
  </body>
</html>

How can I achieve the same effect with the drop-down menu?

I have been researching this on various search engines and found some solutions on different forums, but none of those scripts seem to work here. It's possible that they require additional libraries, although there doesn't appear to be any documentation about it.

javascriptcssbootstrap-4

Answer №1

To implement a transition effect on the dropdown menu, you can use the following CSS code snippet:

.dropdown .dropdown-menu {
  -webkit-transition: max-height 0.3s, opacity 0.2s 0.1s, visibility 0s 4s;
  -moz-transition: max-height 0.3s, opacity 0.2s 0.1s, visibility 0s 4s;
  -ms-transition: max-height 0.3s, opacity 0.2s 0.1s, visibility 0s 4s;
  -o-transition: max-height 0.3s, opacity 0.2s 0.1s, visibility 0s 4s;
  transition: max-height 0.3s, opacity 0.2s 0.1s, visibility 0s 4s;
  max-height: 0;
  display: block;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
}

.dropdown.show .dropdown-menu {
  -webkit-transition: max-height 0.3s, opacity 0.2s, visibility 0s;
  -moz-transition: max-height 0.3s, opacity 0.2s, visibility 0s;
  -ms-transition: max-height 0.3s, opacity 0.2s, visibility 0s;
  -o-transition: max-height 0.3s, opacity 0.2s, visibility 0s;
  transition: max-height 0.3s, opacity 0.2s, visibility 0s;
  max-height: 190px;
  opacity: 1;
  visibility: visible;
}

For a practical demonstration, consider the example below:

.dropdown .dropdown-menu {
  -webkit-transition: max-height 0.3s, opacity 0.2s 0.1s, visibility 0s 4s;
  -moz-transition: max-height 0.3s, opacity 0.2s 0.1s, visibility 0s 4s;
  -ms-transition: max-height 0.3s, opacity 0.2s 0.1s, visibility 0s 4s;
  -o-transition: max-height 0.3s, opacity 0.2s 0.1s, visibility 0s 4s;
  transition: max-height 0.3s, opacity 0.2s 0.1s, visibility 0s 4s;
  max-height: 0;
  display: block;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
}

.dropdown.show .dropdown-menu {
  -webkit-transition: max-height 0.3s, opacity 0.2s, visibility 0s;
  -moz-transition: max-height 0.3s, opacity 0.2s, visibility 0s;
  -ms-transition: max-height 0.3s, opacity 0.2s, visibility 0s;
  -o-transition: max-height 0.3s, opacity 0.2s, visibility 0s;
  transition: max-height 0.3s, opacity 0.2s, visibility 0s;
  max-height: 190px;
  opacity: 1;
  visibility: visible;
}
<!doctype html>
<html lang="en">

<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

  <title>Hello, world!</title>
</head>

<body>
  <nav class="navbar navbar-expand-lg navbar-light bg-light">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav mr-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>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Dropdown
        </a>
          <div class="dropdown-menu" aria-labelledby="navbarDropdown">
            <a class="dropdown-item" href="#">Action</a>
            <a class="dropdown-item" href="#">Another action</a>
            <div class="dropdown-divider"></div>
            <a class="dropdown-item" href="#">Something else here</a>
          </div>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled" href="#">Disabled</a>
        </li>
      </ul>
      <form class="form-inline my-2 my-lg-0">
        <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
        <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
      </form>
    </div>
  </nav>

  <!-- Optional JavaScript -->
  <!-- jQuery first, then Popper.js, then Bootstrap JS -->
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
</body>

</html>

Credits

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

Styling an unordered list with CSS in HTML is a powerful

I am working with an unordered list where each list element contains two spans: span A and span B. My goal is to style these elements so that they are displayed horizontally on the screen, with span A above span B in each set. Example: spanAItem1 sp ...

htmlcss

What is the process for incorporating a customized version of the AWS SDK into a ReactJS project?

Looking for help with integrating a custom build of the AWS SDK in ReactJS. Customized AWS SDK Build I have been unable to find any examples or guidance on utilizing this SDK in a ReactJS environment. Could someone offer some assistance or point me in th ...

javascriptreactjsamazon-web-servicesaws-sdk-js

Tips for adding a CSS class to an element while excluding any nested or child elements with the same style

Hey, I'm having some trouble applying a style to a body element without affecting a specific nested element selected by a certain selector. I attempted to use the :not pseudo-class but it doesn't seem to work for child elements. Here's an ex ...

css

Unable to access a specific component of an object once it has been converted to JSON within Google Apps Script

I've been working on creating a script to extract specific information from an API response. Here's my current code: var response = UrlFetchApp.fetch('https://[API_URL]', options); Logger.log(response.getContentText()); var firstC ...

javascriptjsonrestgoogle-apps-scriptgoogle-drive-api

Attempting to create a 6x6 game board using a 2-dimensional array

As a newcomer in the world of coding, I am currently working on completing my year 1 project titled "6x6 Reversi Chess." Right now, my main focus is on constructing the chess board using a 2D array. However, I am facing challenges when it comes to incorpor ...

javascripthtmlarraysmultidimensional-array

Module not found for routing

Encountering the following error message: Cannot find module '.app/routes/favourite.routes' and unsure of why this issue is arising. After meticulous checks on naming and path, everything seems to match perfectly. Below is the content of my serv ...

javascriptnode.jsexpressmern

In strict mode, duplicate data properties are not allowed in object literals when using grunt-connect-proxy

I recently started following a tutorial on AngularJS titled "Hands on Angularjs" by Tutsplus. In the tutorial, the instructor uses the grunt-connect-proxy package to redirect ajax requests to a Rails server running on localhost:3000. However, I believe the ...

javascriptruby-on-railsangularjsnode.jsgrunt-connect-proxy

Targeting elements using CSS3 animations

http://codepen.io/janesmith/pen/dqweasd Need some help with this issue. I am trying to have the div start with a scale of 0 and then scale in when clicked. However, my attempt was unsuccessful. CSS /* Styling for Content Area */ .content div { width ...

htmlcss

single-spa: revolutionizing console.log for each microfrontEnd

Imagine having multiple single-spa react microfrontend apps in your project, such as Cart and Products The goal is to modify console.log, console.error, etc. so that they include a prefix indicating the corresponding microfrontend app: console.log call ...

javascriptreactjsmicro-frontendsingle-spazone.js

Efficiently sift through a vast assortment using a filtering method

Currently, I am developing an application similar to Uber which involves managing a collection of drivers with their current positions (latitude and longitude). One specific requirement is to find drivers who are within a 200-meter distance from the user& ...

javascriptexpressmongoosegeolocation

Is there a foolproof method to confirm the validity of this string as JSON?

I am currently developing an application that requires a function to validate whether a given string parameter is valid JSON. The challenge lies in handling JSON data copied from Jira. For example, the JSON might appear as follows: "{ "query& ...

javascriptjson

modify the color of text in a row within a jquery ajax table

Is it possible to change the font color of values in a row based on a condition inside a function? Specifically, if the TotalStudent count exceeds the room capacity, can we add student information to the table with red font color? Below is my attempt using ...

javascriptjquerycssajax

Enhanced data visualization with Material UI's nested datagrid feature

Is there a way to display nested JSON data on a React Material UI data grid? I'm looking to showcase the phone numbers of users from the JSON in the provided sandbox example. You can check out the demo here. ...

javascriptjsonreactjsmaterial-uireact-data-grid

Calculate the position of an element's top property using dynamic JavaScript calculations

I am currently working on a script to control the scrolling speed of elements on a webpage relative to their parent div. The code I have written so far is as follows: $('#two').css({'top' : 600-($(this).scrollTop() / 1.2)+"px"}); The ...

javascriptjquerycssproperties

Is there a method to prevent data loss on page refresh by persisting data stored in a database?

I'm currently developing a commenting feature for a blog using the latest version of NextJs. The text input collects data and sends it to the 'Vercel' hosted database. I am able to successfully fetch the data from the frontend as expected. ...

javascriptnext.jsvercel

Adjust the width of the list items based on the specified condition

I need assistance with adjusting the width of items in a list. The list includes: <ul> <li>One</li> <li>One-One</li> <li>Two</li> <li>Two-Two</li> </ul> The display should be dyn ...

angularjshtmlcss

Creating a space for showcasing error messages in Angular and CSS

How can I display an error message min 3 char at the bottom of an input field when only 1 character is entered? Referencing this example: https://i.sstatic.net/Eujle.png Currently, the error message appears on the right side of the input field. https:/ ...

cssangularjs

Error: The 'length' property of the twitter object is not defined and cannot be read

I am trying to fetch data from my Twitter account using PHP and JSON. My PHP code is working fine, but I am facing an error with jQuery. Uncaught TypeError: Cannot read property 'length' of undefined $(document).ready(function() { var dm ...

javascriptjqueryjson

Issue with Logo and Header Containers Incorrectly Scaling

I've been working hard to make sure that both my company logo image and the background image resize accordingly based on the screen size. However, I'm facing an issue where if the background image resizes correctly, the logo image remains unchang ...

htmlcssimage

What is the best way to incorporate data from my Express server into my HTML table?

I am seeking a way to dynamically add new rows to a table in my HTML file by fetching data from server.js using Express. I am aware that I can use double curly braces "{{example}}" in the HTML file to insert values from the server file using "res.render(vi ...

javascripthtmlexpressexpress-session