Is there a way to create unique animations for CSS drop down div

I've been attempting to implement a hover effect on my drop-down cart that makes it fade or slide up similar to submenus.

But, CSS transitions are not my forte! I've tried using generic fades with the transition property, but no luck.

Currently, my drop-down function simply involves displaying a second div upon hovering, which contains PHP functions to fetch the user's cart items and prices.

I'm starting to wonder if there might be a more effective approach to achieve this?

To see an example of the drop-down cart in action within the header of my website, visit: My Website with Cart

Here is a link to my code: https://jsfiddle.net/em2bvxvx/

Below is the CSS for the Cart Drop Down:

.mini-cart {background-color:red;background-repeat:no-repeat;background-size:22px 22px;width:22px;height:22px;font-size:10px;padding-top:6px;padding-left:7.4px;margin-top:13px;margin-left:14px;color:#000;}
    
.shopping-cart {position:relative;display:inline-block;}

.minicart-dropdown {width:300px;display:none;background-color:#fff;min-width:160px;box-shadow:0px 8px 16px 0px rgba(0,0,0,0.2);z-index:1;right:0px;padding:20px;top:40px;}

.minicart-dropdown .size-woocommerce_thumbnail {height:auto;max-width:50px;}

.minicart-dropdown a {color:#fff;padding:12px 16px;text-decoration:none;display:block;}

.minicart-dropdown a:hover {background-color:#ddd}

.shopping-cart:hover .minicart-dropdown {display:block;}

.minicart-dropdown > .cart-buttons {display:flex;color:#fff;margin-top:20px;}

.minicart-dropdown > .cart-buttons > .minicart-vb, .minicart-co {width:49%;text-align:center;background-color:#01273a!important;cursor:pointer;}

.minicart-dropdown > .cart-buttons > .minicart-co {margin-left:15px;}

.minicart-dropdown .content {margin-top:20px;}
htmlcsstwitter-bootstrapbootstrap-4

Answer №1

If you want to achieve a fade effect in CSS, it's quite simple. You just need to create a keyframe animation named fade utilizing the properties visibility, opacity, and transform. By setting the initial state of your div to hidden using opacity and manipulating the position with transform along the X or Y axis.

@keyframes fade {
  from {
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
  }
  to { 
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }
}

.dropdown {
   animation: fade 2s linear forwards;
}

Answer №2

To avoid hiding your box, you can utilize the transform property, opacity, and visibility. These are the properties employed by the website you referenced.

Check out this example: https://jsfiddle.net/RACCH/ypqvtnem/

.minicart-dropdown {
    width: 300px;
    background-color: #fff;
    min-width: 160px;
    box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
    z-index: 1;
    right: 0;
    padding: 20px;
    top: 40px;
    transform: translateY(25%);
    opacity: 0;
    transition: all 1s;
    visibility: hidden;
}
    
.shopping-cart:hover .minicart-dropdown {
    opacity: 1;
    transform: translateY(0%);
    visibility: visible;
}

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

Bootstrap 4 radio buttons are not aligning properly with the padding

There seems to be an issue with the alignment of Bootstrap 4 custom radio buttons and my left padding. Here is a snippet: https://i.sstatic.net/vWTNo.png This is part of the code for displaying an item <div class="p-4"> <ul class="d-flex ...

htmlcssbootstrap-4radio-button

Altering the innerHTML of a <p> tag with a smooth transition

I am a beginner in the world of web design. I am currently working on a project where I need to continuously change the text inside a <p> element with a transition effect similar to a slideshow. Below is the code I have so far: <p id="qu">S ...

javascripthtmlcss

Unable to get Bootstrap 4 overflow hidden to function properly within card layouts during animated transitions

In my project, I have an image inside a card layout and I am working on implementing a zoom effect on mouseover. However, I am facing an issue where during the animation, the image overflows from its parent wrapper. After the animation is completed, the ov ...

cssbootstrap-4

Tips on Switching the Font Family in Bootstrap

Can someone please explain to me how to change the font family in Bootstrap? I looked for the answer and came across this link: . The link provides some guidance, but I'm still struggling to understand how to do it in simple terms. Even though there i ...

fontsbootstrap-4

Video HTML autoplay feature malfunctioning

I have been attempting to use the <embed> tag in order to showcase a video on my webpage. However, I have encountered an issue where the video begins playing automatically when the page loads. In an effort to remedy this situation, I included autost ...

htmltagsembed

Exploring the ins and outs of utilizing pseudo selectors with material-ui

I've been attempting to accomplish a simple task. I wanted to toggle the visibility of my <TreeMenu/> component in material UI v1 using pseudo selectors, but for some reason it's not working. Here is the code: CSS: root: { ba ...

cssreactjsmaterial-ui

Enhancing PrimeNG Components with Custom CSS Styles

I have embarked on a project to develop a sleek user interface utilizing Angular 4, Angular Materials, and PrimeNG components. The most recent challenge I am facing involves the MultiSelect Component from PrimeNG: https://www.primefaces.org/primeng/#/mu ...

htmlcssangularprimeng

What is the process for altering the text contained within a button?

My website uses Bootstrap and a KendoUI data grid where each row has a button like this... <button type="button" id="requestbtn1" class="btn btn-success">Request</button> I've written some JavaScript to handle the click events of these b ...

javascriptjquerycsstwitter-bootstrap

What is the best way to progressively load sections of an HTML table?

I'm facing an issue with a table that is rebuilt asynchronously every time a new option is chosen from a dropdown. The HTML generation works fine, but sending it back across the wire breaks when the size is too large. One idea I had was to query sect ...

jqueryhtmlajaxtwitterhtml-table

Is there a way to set the same href link for the active class in the navbar using bootstrap-vue?

I am currently utilizing this navbar. It works fine when the href links are unique, but I encounter an issue when two pages share the same link - the active class is applied to both list items with that link in the manner I have written. Vue.component(& ...

cssvue.jsbootstrap-vue

What could be causing the malfunction of the Google Maps iframe, preventing it from displaying the location properly

I am having trouble with this Google Maps iframe, it doesn't seem to display the location properly. Why is that? <iframe src="https://www.google.com/maps/place/18%C2%B045'14.7%22N+98%C2%B059'44.0%22E/@18.7540995,98.9933669,17z/data=!3m1! ...

javascriptjquerycssasp.net

How can I align the middle of the element within its parent until it hits the top-left edge, at which point should I stop center

I am trying to center an element within a parent container. It seems simple with methods like transform, flexbox, and grid... The issue arises with overflow behavior. When the parent container shrinks below the dimensions of the child element, scrollbars a ...

htmlcssscrollbaroverflowcentering

Error in CSS Header - Position Shifts when Hovered Over

UPDATED HEADER HTML/CSS I am currently working on the header section of my website at . I encountered a bug where, upon hovering over the links in the header from right to left, the positions of the links become disorganized. I am unsure of what might be ...

jqueryhtmlcss

Designing an intricate layout with the help of Bootstrap-Vue

After exploring the Vue-Bootstrap panel in my previous question, I implemented the following code snippet to generate a panel: <b-card no-body class="mb-1"> <b-card-header header-tag="header" class="p-1" role="tab"> <b-button b ...

javascriptbootstrap-4vuejs2bootstrap-vue

Strategies for handling user typos in a JavaScript prompt

Hi there! Just wanted to say that I'm new to this website, so please forgive any posting mistakes I might make. I'm currently taking a web technology class where we're learning JavaScript. In a previous lesson, we covered HTML5 and CSS. Our ...

javascripthtmluser-interface

The left-floating elements are only partially functional

I recently encountered an issue with my HTML page that features a basic image gallery enhanced by lightboxes (fancybox). The images are meant to align left, with the first row containing three images and the second row containing two. <div class="image ...

htmlcsscss-float

jQuery's slide toggle function is limited to toggling the visibility of just one section at

Welcome to my first post! As a newbie in web development, I have just started my first project. While I feel comfortable with HTML and CSS, jQuery is proving to be a bit challenging for me. In the head section of my intranet page, I have the following cod ...

jqueryhtmlcssslidetoggle

Immersive Elevation Modal Framework

In my Bootstrap modal, I have a plethora of content, such as: https://i.sstatic.net/o6lm4.png However, the bottom of the modal is experiencing an overflow of height like so: https://i.sstatic.net/qlKrl.png I've attempted utilizing the max-height p ...

cssreactjstwitter-bootstrapbootstrap-modalbootstrap-5

Ways to customize the default font in themes by using locally stored fonts

Currently, I am utilizing Quarto for the creation of a website and attempting to modify the default fonts within a specific theme. My ultimate objective is to incorporate local Google fonts rather than relying on the Google API. In my _quarto.yml file, it ...

cssquartogoogle-fonts

Unconventional appearance of WordPress Jetpack sharing buttons on unique custom theme

Currently, my wordpress blog has a unique theme and is powered by Jetpack. I've activated Sharing and added various social media sharing services like Facebook, Twitter, Google+, Digg, among others in the "Enabled Settings" section. However, the sha ...

phphtmlcsswordpress