animation for closing the hamburger menu

Having trouble creating a hamburger menu animation. I've set up two divs - one for the basic horizontal lines and one for the X icon. Using jQuery, I can hide and show them (clicking on the lines hides them and shows the X). But now I want to animate the X drawing both "\" and "/" at the same time from top corner to bottom. Here's what I have so far:

<div class="x"> 
 <div></div> 
 <div></div> 
</div>

And here's the CSS:

.x {
position: fixed;
top:47%;
left: 5%; }

.x div {
width: 40px;
height: 2px;
background-color: #000000; }

.x div:nth-child(1) {
transform: rotate(45deg); } 

.x div:nth-child(2) {
transform: rotate(-45deg); }

I tried animating by changing width from 0 (0%) to 40px (100%), but because of the transform property it doesn't behave as desired. Any help is greatly appreciated, my apologies for my poor explanation.

cssanimationmenu

Answer №1

If you're searching for a solution similar to this:

document.addEventListener('DOMContentLoaded', function(){    
  var menus = document.querySelectorAll('.menu');

  var onClick = function(){
    this.classList.toggle('open');
  }

  menus.forEach(function(menu, index){
    menu.addEventListener('click', onClick);
  });
});
body {
  margin: 20px;
}

.menu {
  cursor: pointer;
  height: 24px;
  list-style: none;
  margin: 0;
  padding: 0;
  width: 30px;
  position: relative;
  -webkit-transform: rotate(0deg);
     -moz-transform: rotate(0deg);
       -o-transform: rotate(0deg);
          transform: rotate(0deg);
  -webkit-transition: .3s ease-in-out;
     -moz-transition: .3s ease-in-out;
       -o-transition: .3s ease-in-out;
          transition: .3s ease-in-out;
}

.menu li {
  background-color: #111;
  border-radius: 4px;
  display: block;
  height: 4px;
  left: 0;
  margin: 0;
  opacity: 1;
  padding: 0;
  position: absolute;
  width: 100%;
  -webkit-transform: rotate(0deg);
     -moz-transform: rotate(0deg);
       -o-transform: rotate(0deg);
          transform: rotate(0deg);
  -webkit-transition: .15s ease-in-out;
     -moz-transition: .15s ease-in-out;
       -o-transition: .15s ease-in-out;
          transition: .15s ease-in-out;
} 

.menu li:nth-child(1) {
  top: 0;
  -webkit-transform-origin: left center;
     -moz-transform-origin: left center;
       -o-transform-origin: left center;
          transform-origin: left center;
}

.menu li:nth-child(2) {
  top: 9px;
  -webkit-transform-origin: left center;
     -moz-transform-origin: left center;
       -o-transform-origin: left center;
          transform-origin: left center;
}

.menu li:nth-child(3) {
  top: 18px;
  -webkit-transform-origin: left center;
     -moz-transform-origin: left center;
       -o-transform-origin: left center;
          transform-origin: left center;
}

.menu.open li:nth-child(1) {
  left: 4px;
  top: -1px;
  -webkit-transform: rotate(45deg);
     -moz-transform: rotate(45deg);
       -o-transform: rotate(45deg);
          transform: rotate(45deg);
}

.menu.open li:nth-child(2) {
  opacity: 0;
  width: 0;
}

.menu.open li:nth-child(3) {
  left: 4px;
  top: 20px;
  -webkit-transform: rotate(-45deg);
     -moz-transform: rotate(-45deg);
       -o-transform: rotate(-45deg);
          transform: rotate(-45deg);
}
<ul class="menu">
  <li></li>
  <li></li>
  <li></li>
</ul>

using jQuery

$(document).ready(function(){
  $('.menu').click(function(){
    $(this).toggleClass('open');
  });
});

Answer №2

Hey Bogdan! Here is a personalized example I created for you, based on your question.

Here is the HTML code snippet:

<div id="hamburger" class="hamburger hamburger_active">
    <div class="hamburger__line"></div>
    <div class="hamburger__line"></div>
</div>

And here is the corresponding CSS code:

.hamburger {
    width: 40px;
    height: 40px;
    position: fixed;
    top:50%;
    left: 50%;
    border: 1px solid red; 
}
.hamburger.hamburger_active .hamburger__line {
    width: 100%;
}

.hamburger__line {
    width: 0;
    height: 2px;
    position: absolute;
    transform-origin: 20px 0;
    top: 50%;
    left: 0;
    background-color: #000000;
    transition: width .3s ease;
}

.hamburger__line:nth-child(1) {
    transform: rotate(45deg);
} 

.hamburger__line:nth-child(2) {
    transform: rotate(135deg);  
}

Lastly, the jQuery script to activate the animation:

var $menu = $("#hamburger");

$menu.click(function() {
    $(this).toggleClass('hamburger_active');
});

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

Adjusting the size of the div both horizontally and vertically in Angular 5 using the mouse cursor

As a beginner in Angular 5, I am looking to achieve horizontal and vertical resizing of a div by dragging with the mouse pointer. Can someone assist me in implementing this feature? ...

cssangular

Ways to retrieve all elements, including those that are hidden, within a CSS grid

My goal is to retrieve all the "Available Items" using Javascript in one go. However, I am facing an issue where not all of them are visible at once due to the need to manually scroll through a CSS grid. <div class="gridWrapper" data-dojo-attach-point= ...

javascripthtmlcsspython-3.xselenium

Selenium Webdriver faced challenges in identifying dynamically created scripts using CSS selectors

I am in need of assistance with the following: Requirement: On the homepage, there is a navigation menu bar that changes appearance when scrolling down. This change is reflected in the body class name switching from "home" to "home scriptable persistent-o ...

cssselenium

Clicking on buttons in the header does not lead to the intended section when scrolling

I have just completed a website project for a Udemy course, following all the instructions provided. However, I am facing an issue with the functionality of two buttons on my site. I want these buttons to scroll to specific sections when clicked. The "I&ap ...

javascriptjqueryhtmlcssscroll

Create a variety of colors with a simple click

A form has been created for the footer where clicking on an input causes the text and border-bottom to transition from grey to white. Visit Code Pen HTML: <div class="footer"> <div class="footerContainer"> <form> <inp ...

htmlcssformscss-transitions

Disabling directional focus navigation in CSS: A comprehensive guide

Is there a way to disable directional focus navigation properties, such as 'nav-up', 'nav-right', 'nav-down', 'nav-left', for elements on an HTML page? button { position:absolute } button#b1 { top:0; left:50%; ...

htmlcss

Adjusting Bootstrap buttons to have a margin-left of -1px when clicked outside the designated area

I utilized Bootstrap in my project, implementing the following code: <div class="input-group"> <input type="text" class="form-control input-lg" autofocus> <span class="input-group-btn"> <button class="btn btn-primary btn-lg" t ...

htmlcsstwitter-bootstraptwitter-bootstrap-3

Get a Blob as a PNG File

Hope you had a wonderful Christmas holiday! Just to clarify, I am new to JS and may make some unconventional attempts in trying to download my Blob in PNG format. I am facing an issue with exporting all the visual content of a DIV in either PDF or image ...

javascripthtmljquerycssblob

Conceal table columns on an HTML page using CSS styling

HTML: <table class="list qy"> <tr> <td>cell1</td> <td class="q">cell2</td> <td>cell3</td> <td class="y">cell4</td> </tr> </table> CSS: table.qy td.q, table.qy td.y { displ ...

jqueryhtmlcss

Use the CSS class

To create tables with 3 rows and 2 columns using divs, I have utilized the ng-repeat directive. Within this setup, there are two CSS classes - red and green, that need to be applied in the following manner: - Red class for the 1st column of the 1st row - ...

angularjscsscss-selectors

Sleek Navigation in CSS and HTML

Hello, as I work on my website with multiple pages, I am looking to implement smooth scrolling on a specific page without using the html tag for the entire site. Below is the code snippet I am working with: {% if section.settings.display_product_detail_des ...

htmlcssshopifyliquid

Obtaining a CSS element again to be utilized for boundary checking purposes

Is it possible to retrieve a CSS element? I recently found myself in a situation where I needed to add some code to an Adobe Edge project, specifically involving the manipulation of margin-top and margin-left properties. While experimenting with moving an ...

csshtmladobe-edge

Tips for centering the InputLabel in Material UI?

Upon loading the page, I am looking to have the InputLabel appear as shown in the second picture. However, I haven't been able to find any InputLabel props that achieve this. I attempted using the focused prop, but it didn't give me the desired o ...

javascriptcssreactjsmaterial-ui

Tips for achieving vertically centralized components with uniform height columns in Bootstrap 4

I tried implementing the solution provided in this question: Bootstrap 4 vertical center - equal height cards However, I am still facing an issue. Despite applying the suggested code: <div class="cycle-des h-100 justify-content-center">Product Cycl ...

cssbootstrap-4

The dropdown menu displaying the img-dropdown-content with a display set to none is not functioning as anticipated

Attempting to hide drop down menu with img-dropdown-content but it's not working, possibly being overridden by another element - only using html and css I have experimented with visibility: hidden; both with and without !important as well as display: ...

htmlcss

Implementing text wrapping within input elements for optimal print.css layout

Can you help me with a print.css issue I'm experiencing? I am currently working on my print stylesheet and I've encountered a challenge where I need to word wrap input fields to ensure all the text is displayed correctly. Despite trying various ...

css

Bringing in typefaces to enhance your email signature

I am trying to design a unique email signature with a custom Adobe font. My email account is hosted by Strato, a German mail server. However, when I attempted to insert the signature using Apple Mail, I realized that the CSS <style> part was not bein ...

cssemailfontsadobesignature

The styled component is not reflecting the specified theme

I have a suspicion that the CSS transition from my Theme is not being applied to a styled component wrapped in another function, but I can't pinpoint the exact reason. I obtained the Basic MUI Dashboard theme from this source and here. Initially, inte ...

cssreactjstypescriptmaterial-ui

creating a stunning video background that spans 200 viewport heights

My goal is to incorporate a background video for VH1 and VH2 that remains fixed but stops at VH3. When a user opens the page, they will see #VH1 and the #videoBG as a background video. As they continue scrolling, they will reach #VH2 without the backgrou ...

htmlcss

What is the best way to highlight titles that are unique but still prominent?

.test{ display:none; } .title:nth-child(odd){ background: #ddd; } <div class='title'>lorem</div> <div class='title'>lorem</div> <div class='title test'>lorem</div> <div class='tit ...

htmlcss