Dynamic Dropdown Navigation with Bootstrap 4

I noticed that the default Bootstrap (4.0) dropdown animation is not present. How can I achieve a "slide" open effect similar to the collapsed navbar?

It should be mentioned that the dropdown is located within the navbar. You can find the codeply example below: 

<nav class="navbar navbar-dark bg-dark">
  <a class="navbar-brand" href="#">Never expand</a>
  <button class="navbar-toggler collapsed" type="button" data-toggle="collapse" data-target="#navbarsExample01" aria-controls="navbarsExample01" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="navbar-collapse collapse" id="navbarsExample01" style="">
    <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">
        <a class="nav-link disabled" href="#">Disabled</a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="dropdown01" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a>
        <div class="dropdown-menu" aria-labelledby="dropdown01">
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <a class="dropdown-item" href="#">Something else here</a>
        </div>
      </li>
    </ul>
  </div>
</nav>
jquerycssbootstrap-4navbardropdown

Answer №1

Witness the creation of a captivating drop-down animation built solely with CSS using the magical property transform: scale:

SCSS method

.dropdown {
    .dropdown-menu {
        transition: all 0.5s;
        overflow: hidden;
        transform-origin: top center;
        transform: scale(1,0);
        display: block;
    }
    &:hover {
        .dropdown-menu {
            transform: scale(1);
        }
    }
}

Experience the demo firsthand on Codepen

Answer №2

One easy method is to utilize the "collapse" feature for toggling instead of "dropdown". All that's required is a bit of CSS to ensure it remains visible during the collapsing animation. Remember to apply position-relative to the dropdown-menu element.

.dropdown-menu.collapsing {
    display:block;
}

Test it out on Codeply

"Dropdowns are positioned with the assistance of Popper.js (unless they are placed within a navbar)."

Given that dropdowns in the Navbar have unique positioning, here's another illustration utilizing regular button dropdowns:

Alternatively, consider implementing one of the Bootstrap 3.x dropdown animation methods.

Answer №3

This is great. It's simple yet effective!

.dropdown-menu {
   display: block;
   opacity: 0;
   padding: 0;
   max-height: 0;
   overflow: hidden;
   transition: all .3s ease-in;
}
 .dropdown-menu.show {
   max-height: 500px;
   opacity: 1;
   padding: 0.5rem 0;
}

Answer №4

To customize the dropdown appearance, you will need to edit the CSS. Here is a sample CSS code that you can use:

.dropdown-menu {
    display: block;
}

.navbar-nav .dropdown-menu {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s;
}

.navbar-nav .dropdown-menu.show {
    max-height: 500px;
}

Answer №5

Give this code a shot:

            .dropdown-menu {
                float: none;
                position: static;
                padding: 0;
                display: block;
                &.show{
                    max-height: 500px;
                }
            }

            .dropdown-menu {
                max-height: 0;
                overflow: hidden;
                transition: max-height 0.5s;
            }

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

Secret button that remains unresponsive upon initial click after materializing

I am facing a problem with my two buttons in the HTML code. One button is supposed to plot data, while the other is meant to download data. The issue arises when the plot button has data and the Excel download button should become visible. Although this fu ...

javascriptjqueryhtmlbuttonhidden

Incorporating a new variable into the tiptip jQuery functionality

I struggled to come up with a more descriptive title, so I hope it still gets the point across (feel free to correct me if needed). My issue lies in adding tables to a website where the columns automatically resize based on how many columns are added. Add ...

jquerywordpresstiptip

Having trouble with my basic AJAX request; it's not functioning as expected

I am currently diving into the world of Ajax and I've hit a roadblock: 1. HTML : <body> <form> Username: <input type="text" id="username" name="username"/> <input type="submit" id="submit" /> </form> <scrip ...

javascriptphpjqueryajax

Elegant Popup Form

I'm encountering a problem with my ajax form that is embedded within a bootstrap modal. On the first use, the form functions correctly. However, when I attempt to use it again without refreshing the page, the text area no longer appears within the mod ...

jqueryhtmlajaxbootstrap-modal

The text alongside the radio button is not aligned vertically

Hello, I am attempting to vertically align text next to my radio button but encountering some issues. .radio { cursor: pointer; display: inline-flex; } .cui-a-radio-button__input { display: none; } .cui-a-radio-button__input:disabled + .cui-a-rad ...

htmlcss

What is the best way to determine the size of CSS elements relative to other elements?

Is there a way to calculate the size of an element by using calc() or any other method based on the size of another DOM element? ...

htmlcssdomlayout

Tips for updating the color scheme in your CSS file by making hue adjustments to all colors

I have a CSS file and I am looking to automatically generate multiple color variations of the file by altering the hue, similar to using the "colorize" function in GIMP. I came across a tool that does exactly what I need at , however it does not support t ...

cssshellhue

Troubleshooting Ajax POST issues with Laravel

Looking for a way to submit a form with checkboxes representing user interests? Clicking a checkbox will send the checked interest value to the database "Followers" table, allowing the user to start following that interest. To handle this, I decided to cre ...

phpjqueryajaxformslaravel

Create a concise shorthand representation for margins when styling with jss using Material-UI's theme object

When styling the component, I found a way to apply the margin in a specific manner. style.js const styles = theme => ({ button: { margin: '12px 18px', } }) However, I wanted to utilize material-ui's theme.spacing.unit f ...

cssmaterial-uijss

Updating the "onclick" event for a button input doesn't function properly in Internet Explorer versions 8 and 9 and Firefox when using jQuery due to their lack of recognition for the change

<input id="UploadButton" type="button" value="Upload" onclick="xyz"/> <script language="javascript" type="text/javascript"> $(function () { $().SPServices({ operation: "GetList", listName: "Docs", ...

javascriptjquerysharepointonclick

"JavaScript/jQuery: The pattern in the text does not align with the string

I am currently working on validating a text field with the specific data pattern of "I-MH-ABCD-ABC-1222". Below is the regular expression I have implemented, but unfortunately it is not functioning as intended. var router_added_sap = "I-MH-ABCD-ABC-1222" ...

javascriptjqueryregex

Ways to create a fixed top navigation bar that adjusts content similarly to a non-fixed navbar

I'm looking to achieve a fixed navbar at the top that pushes down content when I open the collapse menu, similar to how it functions in static or regular navbars. Something like this example: (https://getbootstrap.com/examples/navbar-static-top/) but ...

javascriptjqueryhtmlcsstwitter-bootstrap

FadeToggle is a jQuery function that allows you to toggle the visibility of an

I'm struggling with creating a dynamic question and answer system on my website. I want the answers to fade in when a user clicks on a specific question, and then fade out when another question is clicked. I was able to achieve this for one paragraph ...

jqueryfadeinfadeout

Transition CSS applied only to links containing images

I am trying to figure out how to apply a transition effect only on links that have images, rather than text. Specifically, I want the transition effect to be applied only to the second link in the following example: <a href="#">no image</a> &l ...

csshyperlinkcss-transitions

Resolving the bothersome complications of self-looping steps in jQuery animate delay

My timeline definition includes selectors and a sequence of delays and animations to apply to an object. I have also provided the option to loop through the steps for a specific object. Here is the function that I use to queue the animations: function an ...

javascriptjqueryjquery-animate

Escaping the iframe barrier to show a pop-up modal on the main parent page

My current challenge is to make a modal window appear outside of an iframe when a user clicks on an image within the iframe. This modal will display a video on the main parent page. I have some code in place, but I need help implementing the JavaScript to ...

jqueryiframeframebusting

Numerous Google Gauges featuring varying sets of options

Currently, I am facing a challenge involving the insertion of multiple instances of Google Gauges (or Highchart Gauges) on a single page. The goal is to utilize different option sets and separate their placement accordingly. Unfortunately, the solution pro ...

javascriptjqueryhtmlhighcharts

obtaining attribute values from chosen items in a multiselect dropdown menu

I am using jQuery to create a multi-select element. For instance, consider the following example: <select multiple id="multiple"> <option value="1" type="Alice">Option 1</option> <option value="2" type="Bob">Option 2</o ...

javascriptjqueryhtml-selectmulti-select

How can I align the kendoMenu in the center when the menu width is unpredictable?

Presenting a modified menu structure: <html class="k-webkit k-webkit40"> <head> <title>Site Title</title> <!-- js and css files referenced here --> </head> <body> <link h ...

jquerycsskendo-menu

The onchange function in JavaScript is malfunctioning

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Product page</title> <!-- Fonts -- ...

javascripthtmlcss