What is the best way to add animation to the hide/show function?

    <div class="overlay"></div>

CSS:

    .overlay::after
     {
           position: fixed;
           top: 0;
           left: 0;
           width: 100%;
           content: "";
           z-index: -1;
           height: 100%;
           transition: all 0.5s ease-in-out;
           opacity: 0.5;
        }

        .popup::before
        {
           content: "";
           position: absolute;
           top: 0;
           left: 0;
           width: 100%;. 
           height: 100%;
           z-index: -1;
           transition: all 0.5s ease-in-out;
        }

I have created an overlay class to act as a mask for popups. However, I am facing an issue where the animations are not displaying despite having the transition property set. My goal is to slide it from left to right smoothly without using negative left values when hidden and positive left values when shown. Any suggestions on how to achieve this effect without using negative left values?

htmlcss

Answer №1

Here is an example of pure CSS implementation:

*{box-sizing: border-box}
menu{
  position: absolute;
  top: 40px;
  left: -200px;
  width: 200px;
  display: block;
  background: black;
  color: white;
  transition: left .3s ease
}
menu li{padding: 10px 14px}
input:checked + menu{
  left: 0
}
label{cursor: pointer}
<label for=toogleMenu >Click to toggle the Menu </label>
<input type=checkbox id=toogleMenu hidden />
<menu>
  <li>Home</li>
  <li>Work</li>
  <li>Contact</li>
  <li>Help</li>
</menu>

An alternative approach using transform property:

*{box-sizing: border-box}
menu{
  position: absolute;
  top: 40px;
  left: 0px;
  width: 200px;
  display: block;
  background: black;
  color: white;
  transform: translateX(-200px);
  transition: transform .3s ease
}
menu li{padding: 10px 14px}
input:checked + menu{
  transform: translateX(0);
}
label{cursor: pointer}
<label for=toogleMenu >Click to toggle the Menu </label>
<input type=checkbox id=toogleMenu hidden />
<menu>
  <li>Home</li>
  <li>Work</li>
  <li>Contact</li>
  <li>Help</li>
</menu>

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

Struggling to determine if the checkbox has been ticked?

I have integrated a like button on my website using socket io to ensure that it updates for all users when the like button is clicked. I have successfully implemented a like() function that emits liked, increments a counter, and displays it on the page. Ho ...

javascripthtmlnode.jscheckboxsocket.io

Can two div elements be positioned next to each other without relying on CSS float?

Every time I try to use CSS float to align two elements next to each other on a webpage, IE and Firefox always throw unexpected surprises my way. Is there an alternative method to position two divs side by side on a website without relying on CSS float? ...

htmlcsslayout

Retrieve the Query String Information from a Link and Generate a New Link in Another List

I am looking to extract information from a link in #list and then use that information to create a new link in #list3. The link I have is http://jsfiddle.net/4y5V6/24/. Is there a way to set it up so that when a link is clicked, it automatically gets added ...

javascriptjqueryhtml

Sending values from multiple input fields created in PHP using AJAX can be done by following these steps

https://i.sstatic.net/GKcRc.png Within this snippet, there is a portion of a form that consists of 4 different fields/divs like the one shown. I am struggling to figure out how to send the values of these input fields to PHP using AJAX. I apologize if ...

javascriptphphtmlarraysajax

Show that a CPU-intensive JavaScript function is executing (animated GIF spinners do not spin)

Displaying animated indicator or spinner gifs, then hiding them, is an effective way to communicate to the user that their action is being processed. This helps to assure the user that something is happening while they wait for the action to complete, espe ...

javascriptcsscss-transitionsanimated-gifactivity-indicator

In Google Chrome, the :after element on the left is cleared, while other browsers do not

In an effort to create a button using background images in the :before and :after pseudo-selectors for cross-browser compatibility, an issue arose where only Chrome did not display it correctly (Safari results were unknown). HTML: <div class="btn-cont ...

cssgoogle-chrome

The HTML button fails to respond when clicked

My website development process has hit a snag with the header buttons not functioning properly. I suspect the issues lie within lines 12 to 15 of the code snippet below: <!DOCTYPE html> <html> <head> <script src="https: ...

javascripthtmlcssweb

Previewing multiple images with multiple file inputs

I am trying to find a way to preview multiple images uploaded from different inputs. When the button is pressed, the content from a textarea containing <img src="$img" id="img1"> is written inside a div called seeimg. The IDs for these images range f ...

javascriptjqueryhtmlcss

Document the user's input by recording it in a text file

After experimenting with a simple HTML code like this: <label for="fname">First name:</label><br> <input type="text" id="fname" name="fname" value="John"><br> <label for="lname">Last name:</label><br> ...

htmlinputtextuser-input

Learn how to display a web page in a tab view similar to the toggle device toolbar option

Is it possible to simulate the toggle device toolbar of a web page using JavaScript? https://i.stack.imgur.com/M9oB0.png For example, can we set up a webpage to always display in tab or mobile view like on YouTube? ...

javascriptjquerycss

Tips for Providing Real-Time Data for a Dynamic Chart in d3

I have a line chart sample from D3, and the issue I'm facing is that I need to continuously feed live data from a server at certain time intervals and use D3 to draw the chart based on this dynamic data. Despite my efforts to search for a solution, I ...

javascripthtmlcssd3.js

"Transitioning from Bootstrap version 3.3.7 to the latest Bootstrap version 4.1.3

Everywhere I look, it says that Bootstrap 4.1 is compatible with Bootstrap 3, but when I update my project to the newer version, a lot of things stop working, such as this cookie consent feature. @{ Layout = ""; } @using Microsoft.AspNetCore.Http ...

cssbootstrap-4

Setting the class attribute dynamically using code behind

Below is a snippet of code I am working with: div1.Attributes.Add("class", "displayNone"); It functions properly during page load but fails to do so during an OnClick event. The issue arises from the fact that my HTML element <div id="div1"></d ...

c#asp.nethtmlajax

Proper Alignment of Multiple Elements Floating to the Right in a Menu

Although this question has been asked previously, I am facing challenges in getting it to work for my specific scenario. My objective is to showcase a menu bar with a search option and inline text to its left. However, when I attempt to float both elements ...

htmlcsstwitter-bootstrap

Ways to eliminate additional whitespace in CSS Grid styling techniques

Currently, I am utilizing material ui to establish a grid system for showcasing videos in 2 rows. While I have successfully set up the general layout, I am facing difficulty in eliminating the white space/padding between the elements. Despite trying nowrap ...

cssreactjsmaterial-ui

a container holding two floating divs

I have been attempting to create two divs positioned side by side, with one containing content and the other acting as a sidebar. Both of these divs are contained within another larger container div. Despite my efforts, I have not been successful in achiev ...

htmlcsscontainers

Issues with div placement arise when incorporating relative positioning and floats

I have been attempting to position two divs with images next to the other divs but they appear underneath them instead. Can someone help me figure out what I am missing? FIDDLE CSS #main { margin: 0 auto; } #header { clear:both; float:left; ...

htmlcss

The Card Component from Core UI fails to appear in the Print Preview feature

I'm currently experimenting with the Card Component from the Core UI framework. However, I'm facing an issue where the color of the Card component and its associated icon do not appear in the Preview when trying to print the page. I attempted to ...

cssvue.jscore-ui

How can you include a key event handler that specifically looks out for the Space key being pressed?

When a user presses the Enter key (and button is in focus), the button opens. However, I would like to also open the link button when the user presses the space bar. Buttons should be activated using the Space key, while links should be activated with the ...

javascripthtml

Experience the ultimate entertainment with Flowplayer by watching multiple videos simultaneously in two separate views

I have two separate players in two different views within the DOM. Each player retrieves a video file asynchronously from my database using a unique ID. The first player functions correctly, but I am uncertain how to replicate this for ...

jqueryajaxhtmlflowplayer