To prevent the animation from overflowing, set the parent element to have hidden overflow while still displaying the child element

I am facing an issue with two menus that can be toggled using a switch. Each menu item has a dropdown that appears when clicked. The problem arises when switching between the menus, as there is an animation for the transition (slide in and slide out). I want this sliding animation to only occur within the menu element, so I used overflow-y: hidden;. However, this causes my dropdown menus to be cut off since they are contained within the parent with overflow: hidden.

I have created a codepen demonstrating the problem here:

https://codepen.io/twan2020/pen/jOMMoom

Switching between the menus shows that the animation overflows the menu container.

When I apply the following code, the animation works smoothly but the menu no longer opens when clicking on an item:

.categoriemenu .categorielijst {
  width: 100%;
  margin-bottom: 0px;
  display: flex;
  justify-content: space-evenly;
  position: relative;
  overflow-y: hidden;
}

Is there a way to fix this issue without setting the product-menu (dropdown menu) to position:fixed, which breaks the styling? My menu also has variable heights, so I am looking for a simpler solution to resolve this problem.

javascripthtmljquerycss

Answer №1

To resolve the issue, I implemented a timer on the overflow-hidden during the animation process as shown below:

$('.toggle-switch input').on('change', function() {
    if ($('input[name=switch]:checked', '.toggle-switch').val() == 1) {
        $(".categorielijst").css('overflow-y', 'hidden');
        $("#menu1").addClass('animate__slideInUp');
        $("#menu2").addClass('animate__slideOutUp');
        $("#menu1").css('display', 'flex');
        $("#menu1").removeClass('animate__slideOutDown');
        $("#menu2").removeClass('animate__slideInDown');
        setTimeout(function() {
            $(".categorielijst").css('overflow-y', 'visible');
        }, 600);
    } else if ($('input[name=switch]:checked', '.toggle-switch').val() == 2) {
        $(".categorielijst").css('overflow-y', 'hidden');
        $("#menu1").css('position', 'absolute')
        $("#menu1").addClass('animate__slideOutDown');
        $("#menu2").addClass('animate__slideInDown');
        $("#menu2").css('display', 'flex');
        $("#menu1").removeClass('animate__slideInDown');
        $("#menu2").removeClass('animate__slideOutUp');
        setTimeout(function() {
            $(".categorielijst").css('overflow-y', 'visible');
        }, 600);
    }
});

Although it's not flawless and may exhibit mild glitches if clicked rapidly, the solution is effective for normal usage.

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

Utilizing JSON to transfer PHP array data for display using JQuery

Currently, I am working on a jQuery script that is responsible for fetching a PHP array from the MySQL database and converting it into a JSON object. The process is functioning correctly, as I can successfully output the raw JSON data along with the keys. ...

phpjavascriptjqueryajaxjson

Adjusting an element within an array obtained from a computed property

Within my Vuex store, I retrieve an array of rooms from a Firebase/Firestore API call. This array structure is as follows: [{label:'Kitchen', description:'...'}, ...]. To make this array accessible to my application, I utilize a Vuex ge ...

javascriptvue.jsvuejs2vuexcomputed-properties

Tips for saving data in a database using Ajax with ExtJS?

In my current project, I have a set of items displayed in a row-wise order in the view using JavaScript. My goal is to implement an auto-save feature that will save the details of the clicked rows into a database using AJAX within ExtJS. ...

javascriptjavaajaxextjsextjs6

Assign ratings to values based on stars

I am currently facing an issue with implementing a star rating system on my web application. The problem lies in retrieving previously rated values and displaying them as blinking stars. For example, if a user had previously rated something with 4 stars, t ...

jqueryasp.netcss

Removing a single div box causes a ripple effect on another div box, despite their lack of connection

I'm struggling to remove the white box underneath the "features" section on this website (). The structure of the div is quite simple: <div class="donatenew"></div> and here's the CSS: .donatenew { width:100%; background: #f8f ...

csshtmlspacing

Show a table with rows that display an array from a JSON object using JavaScript

My current code includes JSON data that I need to display in table rows, but I'm struggling to understand how to do so effectively. The output I am currently seeing is all the rows from the array stacked in one row instead of five separate rows as in ...

javascripthtmljson

Ensure that the keyboard remains open in an Ionic chat app when a button is clicked

Having some trouble with my Ionic v1 chat application. Everything is set up, but I'm running into an issue where clicking on the send button causes the keyboard to lose focus from the input and then close. I've tried several solutions, but none ...

htmlangularjscordovaionic-frameworkandroid-softkeyboard

Transfer all image files from Node.js to the frontend

What is the best way to send all image files from my backend nodejs server folder to my Reactjs client? I have set up a website where users can sign in and upload their files. However, I am facing an issue where only one file is visible on the client side, ...

javascriptnode.jsreactjsexpress

Locate all inputs containing a special attribute name, wherein a portion of the name corresponds to a JavaScript variable

$("td[id^='td' + myvar + '_']") Can someone help me with a solution to substitute the static value of 0 in this code snippet with the dynamic variable myvar? Thanks! ...

javascriptjquery

Switch between including 'light' or 'dark' styles using Javascript?

I am currently working on a project where I aim to incorporate a dark mode toggle feature. To maintain organization and scalability, I have chosen to implement the SASS (.scss) architecture rather than plain CSS. My plan is to utilize variables within my ...

javascripthtmlcsssass

Users using an iPhone are unable to adjust the scale or scroll on this website

I find myself wondering what I might be overlooking in this situation Here is the HTML code: <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <link rel="shortcut icon" href="../../nImg/favicon.ico" ...

iphonehtmlcssscale

Experiencing difficulties with NPM installation

Screenshot of my terminal in VSCode Despite attempting to uninstall and reinstall node and clearing the cache, I am still unable to resolve this issue. Any suggestions? If it's relevant, I am using Windows 10. ...

javascriptnode.jsreactjsnpm

Clicking on an element will result in the removal of

I have a specific DIV element that I want to remove when clicking on a link inside that same DIV. Below is the code snippet of what I currently have: <div id="clients-edit-wrapper"> <div class="close-wrapper"> <a href="#" class= ...

jquery

Apply criteria to an array based on multiple attribute conditions

Given an array containing parent-child relationships and their corresponding expenses, the task is to filter the list based on parents that have a mix of positive and negative expenses across their children. Parents with only positive or negative child exp ...

javascripttypescriptloopsfilterecmascript-6

Menu Design Inspired by Amazon Using jQuery

Can someone please assist me in locating a jQuery Amazon-style menu example? I would like to implement something similar and am hoping to avoid having to write it from scratch. Thank you! ...

jqueryhtmlcss

Utilizing JavaScript to Parse RSS XML Feeds Across Domains

Looking to parse an RSS (XML) file without relying on the Google RSS feed. I have attempted using JSONP, but it resulted in downloading the file and throwing an error "Uncaught SyntaxError: Unexpected token < ". $.ajax({ type: "GET", ur ...

javascriptjqueryajaxxmlrss

The res.render function is failing to render the view and instead, it is generating

When making a call to express/node like this: jQuery.ajax({ url : url, type: "GET", data: {names : names}, success: function(data) { console.log("ajax post success"); }, ...

node.jsjqueryexpress

Implementing HTML template into Express.js for seamless web development

Is there a way to include my HTML/JS/CSS files in express.js? Can I manage templates in a specific way? I am looking to use HTML exclusively, without the use of Jade. <head> <DATA> </head> <header> <? ...

jquerynode.jsexpresssocket.iopug

The One-Click File Upload Dilemma

I have replaced the regular upload input + submit button with an icon. My goal is to automatically start the upload process when a file is chosen by the user. However, currently nothing happens after the file selection. <form action="upload.php" method ...

javascriptjqueryhtmlfile-upload

Troubleshooting: Issues with VueJS Class Binding Functionality

In my form, I have an input field that is validated to check if it is empty or not. If the input field is empty, a red border is applied using class binding. However, when the user focuses on the input field after receiving the error, the error message sh ...

javascriptvue.js