Creating Dynamic Dropdowns with Bootstrap 5 Animation

I've been trying to add animation to a right-aligned Bootstrap dropdown using CSS, but I'm having trouble getting it to work. I attempted setting the transition property to target the element's width, but it doesn't seem to be effective.

Upon inspecting the element in my browser, I noticed that the width is initially set to 0 and changes to "auto" once the menu becomes visible. Manually adjusting the width shows that the transition works, but it doesn't seem to happen when the menu is displayed. I even tried using specific pixel values instead of "auto", but nothing changed.

My goal is to have the menu smoothly slide out to the right while the menu button rotates. Is this achievable?

div.dropdown > .btn {
    transition: transform 0.8s cubic-bezier(0,-0.14,.27,1.55);
    transform: rotate(90deg);
}

div.dropdown > .btn.show {
    transform: rotate(270deg);
}

div.dropdown > .dropdown-menu {
    transition: width 0.8s cubic-bezier(0,-0.14,.27,1.55);
    width: 0;
}

div.dropdown > .btn.show + .dropdown-menu {
    width: auto;
}
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="45272a2a31363137243505706b755c6f647e667649">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="ea8885859e999e988b9aaadfc4dac4dbd3fab7cb">[email protected]</a>/dist/js/bootstrap.bundle.min.js"></script>

<div class="dropdown dropend p-4">
    <button class="btn btn-secondary" type="button" data-bs-toggle="dropdown">
       ++
    </button>
    <ul class="dropdown-menu dropdown-menu-end">
        <li><a class="dropdown-item" href="#">Action</a></li>
        <li><a class="dropdown-item" href="#">Another action</a></li>
    </ul>
</div>

csstwitter-bootstrapcss-animationsbootstrap-5

Answer №1

Give this method a try. The animation during the transition is up to you.

div.dropdown > .btn {
    transition: transform 0.8s cubic-bezier(0,-0.14,.27,1.55);
    transform: rotate(90deg);
}

div.dropdown > .btn.show {
    transform: rotate(270deg);
}

div.dropdown>.dropdown-menu {    
    display: inherit;
    transform: translate(69px, 19px) scaleX(0);
    transition: all 0.8s cubic-bezier(0,-0.14,.27,1.55);
    transform-origin:left;
    left: 0;
}

div.dropdown>.btn.show+.dropdown-menu {
    display: inherit;
    transform: translate(69px, 19px) scaleX(1);
}
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="b2d0ddddc6c1c6c0d3c2f2879c829c829fd0d7c6d381">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="dcbeb3b3a8afa8aebdac9ce9f2ecf2ecf1beb9a8bdef">[email protected]</a>/dist/js/bootstrap.bundle.min.js"></script>

<div class="dropdown dropend p-4">
    <button class="btn btn-secondary" type="button" data-bs-toggle="dropdown">
        ++
    </button>
    <ul class="dropdown-menu dropdown-menu-end">
        <li><a class="dropdown-item" href="#">Action</a></li>
        <li><a class="dropdown-item" href="#">Another action</a></li>
    </ul>
</div>

Adjusted for compatibility with Firefox

div.dropdown>.btn.show+.dropdown-menu {
    display: inherit;
    transform: translate(69px, 19px) scaleX(1);
}

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

How can I integrate checkboxes in a list view with jQuery Mobile?

How can I display the status of users with three different levels in a list view? I need to show whether they are attending or not, similar to the image provided. The issue is that currently the checkbox appears below the name, but I want it to be at the r ...

htmlcssjquery-uijquery-mobile

What is preventing relative paths from functioning with xsl:include?

I am working with an XSL file that converts to PDF. The top of the page contains a lengthy CSS style declaration: <xsl:attribute-set name="Header"> <xsl:attribute name="font-size"> <xsl:value-of select="$font-size"/> < ...

cssxmlxslt

Alternative image loading in a figure element

I'm currently in the process of putting together an image gallery using Angular 4.3.0, where images are displayed as background images within figure elements rather than img tags. The images are initially resized to smaller dimensions before being use ...

javascripthtmlcssangularimage

Opera browser fails to render CSS3 box shadow effect

My menu features CSS3 effects on hover and active states, giving it a unique appearance. Below is the CSS3 styling I have implemented: #Menu a:active, #Menu a.active:before,#Menu a:hover:before { Content: ' '; position:absolute; z-i ...

cssopera

How can you retrieve the value of a CSS file in Javascript and CSS?

Imagine there is an element with the class .selector. This class defines its style. Once the page has finished loading, some JavaScript code is executed - the specifics are not important. What matters is that the CSS properties have set the object's ...

javascriptjquerycss

Is there a way to implement a scrollbar that only scrolls through one specific column in an HTML table?

I need help adding a scrollbar to a specific column in an HTML table. Take a look at this scenario https://jsfiddle.net/6wpdc4tL/: https://i.stack.imgur.com/svzIg.png This table should have two scrollbars, one for the light blue SCROLL column and another ...

javascripthtmlcsshtml-table

Header formatting issue when attempting to implement tablesorter plugin

I implemented the widget-scroller and widget column Selector in my table using the table sorter plugin in jQuery. Has anyone encountered a problem like the one shown in this picture? It seems that my table headers do not align with the columns properly an ...

javascriptjquerycsshtml-tabletablesorter

Tips for refreshing the appearance of a window in angular when it is resized

I have a chat feature integrated into my application. I am looking to dynamically resize an image within the chat window when the width of the window falls below a certain threshold. Is there a method available to modify the CSS style or class based on the ...

cssangulartypescript

Encase children within a view component in React Native

I've been working on the following code: renderActionButtons(actionButtons){ let actionButtonsContent = actionButtons.map((button, i) => { return <TouchableHighlight key={i} onPress={() => {this.updateConversation(button);}} style= ...

cssreactjsreact-nativeflexboxreact-native-flexbox

Is it possible to convert the text.json file into a jQuery animation?

Looking to extract information from text.json and integrate it with my jquery.animation(). My goal is similar to the one demonstrated here. Instead of using "data" attributes like in that example, I want to parse the text based on the "ID" property as a k ...

javascriptjqueryhtmlcssjson

Is there a way to exclude the Unicode character from the first menu item while still utilizing it in the other items on my menu?

I have been working on customizing my menu by using the unicode character \25C6 to represent a black solid diamond as a spacer between labels. After searching for solutions on Stack Overflow, I attempted to implement the suggested method using the bef ...

csswordpressmenuicons

Is there a way to retrieve all CSS styles associated with a specific element?

When I come across a site element that I really like and want to incorporate into my own site, what is a simple way to do so? It can be challenging to navigate through numerous CSS files to find all the necessary styles. ...

htmlcss

Are the references to clip-path: path() on MDN and other sources inaccurate?

I'm attempting to achieve a simple task by using clip-path with the path property and having it scale to fit the entire size of the containing div. After researching extensively, I came across mentions of the [geometry-box] property in some places, bu ...

css

Artwork - Circular design disappears without warning

While working on a clock project purely for enjoyment, I noticed that the minute arc disappears from the canvas as soon as a new minute begins. Any idea why this is happening? Check out the clock in action: https://jsfiddle.net/y0bson6f/ HTML <canvas ...

javascriptcsshtmlcanvas

Printing Strings in JavaScript IF Conditional Block

Hello there! I am looking for assistance with a JavaScript concept. Recently, I created some code where in the HTML file, there is a div element with an id of "GetID" where the string outputs are meant to be displayed. The JavaScript code looks something ...

javascripthtmlcss

Getting rid of the empty spaces between the lines of cards in Bootstrap 4

I want to eliminate the vertical space between the cards in my layout. Essentially, I want the cards to maximize the available space. I am open to using a plugin if necessary, but I have not been able to find any relevant information online (maybe I used t ...

javascripthtmlcssbootstrap-4

Adjusting the height of a div inside a Material-UI Grid using Styled Components

When the mouse hovers over the two cells highlighted in pink, they turn pink. Is there a way to make the entire grid fill with pink when hovered over, both width and height at 100%? Check out the sandbox here ...

cssmaterial-uistyled-components

How to align CSS counters to the right within the ::before pseudo-element

Utilizing CSS counters and the <code> element to display syntax highlighted code snippets with automatic line numbering: JSFiddle HTML: <code> <div class="line"><span>line 1</span></div> <div class="line">< ...

htmlcss

Tips for enhancing the appearance of the dropdown scrollbar in PrimeNG

Just started exploring Angular and I've been struggling to customize the scrollbar on a PrimeNG dropdown. Does anyone have any tips or tricks to achieve this? Here is the HTML code: <p-autoComplete placeholder="- Select -" (onSelect)="onSelect(dh ...

htmlcssangularprimeng

Different method for adding child elements to the DOM

When creating a DOM element, I am following this process: var imgEle = document.createElement('img');     imgEle.src = imgURL;             x.appendChild(imgEle); Instead of appending the last line which creates multiple img elements ev ...

javascripthtmlcssdomappendchild