What is the best way to create a dynamic menu icon using CSS?

I am currently developing a CSS animation that is inspired by this. I have made progress and almost reached my goal, but I am facing some difficulties in getting it to work perfectly. For those unable or unwilling to visit the links: I aim to create an animation using CSS that transforms a three-bar menu icon into an X shape. Although I have managed to make the bars overlap and rotate, the symmetry of the strokes is not ideal.

Check out my code below:

<div class="container">
 <div class="centerized">    
  <div class="bar1"> </div>
  <div class="bar2"> </div>
  <div class="bar3"> </div>      
 </div> 
</div>

Here's my SCSS code snippet:

@keyframes ani1{
 0% {margin-bottom: 16%;} 
 50% {margin-bottom: none; transform: translate(0, 20px);} 
 100% {margin-bottom: none; transform: rotate(30deg);}
}

@keyframes ani2{
 0% {margin-bottom: 16%; opacity: 1;} 
 75% {margin-bottom: none; opacity: 0;} 
 100% {margin-bottom: none; opacity: 0;} 
}

@keyframes ani3{
 0% {margin-bottom: 16%;} 
 50% {margin-bottom: none; transform: translate(0px, -20px);} 
 100% {margin-bottom: none; transform: rotate(-30deg);} 
}

I suspect that the positioning of elements during the animation might be causing the issue. For a comprehensive view of the code, please click on the provided link above.

htmlcssanimationsass

Answer №1

I have implemented the CSS code into your HTML in order to create that animation effect you desire. It seems like you are looking for a hover effect similar to the one in your CodePen:

.You-need-this-container {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 400px;
  height: 400px;
  margin-top: -200px;
  margin-left: -200px;
  border-radius: 2px;
  box-shadow: 1px 2px 10px 0px rgba(0, 0, 0, 0.3);
  background: #3FAF82;
  color: #fff;
}

.container {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
...
</div>

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

using http to handle a 404 error

This specific function is designed to fetch data under normal circumstances and to return a value of 0 in the event of a 404 error. function retrieveData(url) { if (window.XMLHttpRequest) { xmlhttp=new XMLHttpRequest(); ...

javascripthtmlajaxget

Adjusting Bootstrap CSS Styles

After recently installing bootstrap 3.0 on my website and experimenting with it, I have a few questions. I am looking to customize certain aspects of the jumbotron (and other classes) in my personal .css file named "mycss.css". Here is the code I have add ...

htmlcsstwitter-bootstrap

JavaScript does not seem to be functioning properly when loading data through ajax

I have created an image gallery using PHP and implemented a JavaScript code to create a CSS "overlay" effect when the image is clicked. <script type="text/javascript"> $(".button").click(function(e) { e.preventDefault(); $.ajax({ ...

javascriptphpjqueryhtmlajax

Angular - Modify the Background Color of a Table Row Upon Button Click

I am struggling to change the background color of only the selected row after clicking a button. Currently, my code changes the color of all rows. Here is a similar piece of code I have been working with: HTML <tr *ngFor="let data of (datas$ | asyn ...

cssangularhtml-tableangular8

Hide a parent div in jQuery depending on the checkbox status

I have a code snippet that I need help with. You can view the code here. $("#filters :checkbox").change(function() { $(".listing-details > div").hide(); $("#filters :checkbox:checked").each(function() { $(".listing-details ." + $(this). ...

jquerycss

Customize the width and padding of your data tables

I have several tables with different padding and width settings. Previously, I had set these inline without any issues. However, now that I am using data tables, the inline styles are not working. If you need more information about Datatables, check out t ...

javascriptjquerycssdatatables

Guide on creating a div container that spans the full width of the HTML page with a horizontal scrollbar

I'm facing an issue where the div container is not extending over the entire HTML page with a horizontal scroll bar. Here's a visual representation of my problem: Image Despite using MathJax to display math formulas, the div container does not ...

htmlcssscrollbarcontainersmathjax

Centering the header image on the screen creates a visually appealing focal point

Looking to design a header image for my website that always stays centered. I want the image to stand out and remain in the middle even when the browser window is resized. I found an example on this website that achieves this effortlessly. ...

htmlcss

The color scheme detection feature for matching media is malfunctioning on Safari

As I strive to incorporate a Dark Mode feature based on the user's system preferences, I utilize the @media query prefers-color-scheme: dark. While this approach is effective, I also find it necessary to conduct additional checks using JavaScript. de ...

javascripthtmlcsstypescript

What is the best way to display just the border of a background image while hiding the content?

The demonstration at this codepen https://codepen.io/Chester/pen/QPoyjN showcases a border animation effect. While it works effectively with a white background, I am interested in making the box's background dynamic. <div class="rainbow"& ...

htmlcsssasscss-selectors

Looking to design an interactive grid for generating dynamic thumbnails

I am a beginner in the field of web development and I have a desire to create a website for showcasing my portfolio. This website should feature project thumbnails along with brief descriptions, all of which should be displayed dynamically. Although I poss ...

phpjavascriptjqueryhtmlcss

Creating an automatic image carousel using a combination of Jquery, Javascript, and CSS

I have been working on creating a slider using jQuery and javascript, but I am facing some issues with the autoplay functionality and the next-previous buttons. This slider is intended for displaying images as a title indicates. Can anyone assist me with i ...

javascriptjqueryhtmlcss

What steps do I need to take in order to transform this code into a MUI component complete with

Having some trouble converting my hero banner code to MUI in a React project. The styling is not coming out correctly. Here is the HTML code: <svg data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120 ...

javascripthtmlcssreactjsmaterial-ui

Should buttons be wrapped based on the text of the link?

I'm struggling to include buttons in my design but I can't seem to achieve the desired outcome. The image below illustrates what I am attempting to create but have been unsuccessful in replicating: https://i.sstatic.net/CnYLV.png However, the ...

htmlcss

Notification with jQuery

I am looking to display an alert message when val = -1. However, the issue I am facing is that this message always appears at the bottom of the page regardless of the value of val. if ($val == -1) echo ' <script> $( ...

phpjquerycsshtml

Unable to apply nativeElement.style.width property within ngOnChanges lifecycle method

My current task involves adjusting the width of containers while also monitoring changes in my @Input since the DOM structure is dependent on it. @Input('connections') public connections = []; @ViewChildren('containers', { read: Elemen ...

cssangular

implementing jqBarGraph on my webpage

Hey there! I have been trying to add a graph to my HTML page for quite some time now. After doing some research, I discovered that using the jqBarGraph plug-in makes it easier to create the desired graph. Below you will find the code that I have on my webp ...

javascriptjqueryhtml

Having trouble accessing NSE Bhavcopy zip file in R due to a HTTP status of '403 Forbidden'

My current project involves automating the process of downloading a zip file in R. On the specific webpage I am working with, I can easily download the zip file by clicking on it or by right-clicking and saving the file. However, my challenge lies in down ...

htmlr

Tips for formatting list items to display quotes in a scrolling ticker

How to format the <li> element HTML: <div id="patTest" style="width: 95%; padding: 0; margin: 0; text-align: center;"> <ul id="patTestUL"> <li> <div style="padding: 0; margin: 0; width: 98%;" ...

htmlcss

Problem with BeautifulSoup table parsing

I've been trying to create a table with expenses, amounts, and actions, but I'm having trouble with the alignment. I attempted to adjust it by changing the width, but that didn't solve the issue. Can someone point out what I'm doing wro ...

htmlangular