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

Trigger an event when the menu is outside the viewport and then lock the menu to the top of the viewport

I am trying to create a menu element that remains fixed at the top of the browser viewport as the user scrolls, ensuring it is always visible. In my webpage layout, the menu sits below some text in the header initially. Once the user scrolls past the heade ...

javascriptjqueryhtmlcss

Problem with CSS creating the Typewriter effect when the third line of text is added

I've been working on a website for my new company and I want to incorporate a typewriter effect on the main page. I came across a tutorial on Medium.com but I'm having trouble adding an additional span to the provided code. Take a look at the lin ...

htmlcss

Is there a way to conceal the scrollbar while still permitting scrolling?

I'm interested in creating a custom scrollbar, but in order to do so I need to hide the default scrollbar while still allowing scrolling functionality. I've attempted: overflow-y:hidden; but this method hides the scrollbar and prevents scrolli ...

jqueryhtmlcss

In the realm of HTML Canvas, polygons intricately intertwine with one another

Currently, I am attempting to create multiple polygons from a large JSON file. Instead of being separate, the polygons seem to be connected in some way. The project is being developed in next.js. Below are the relevant code snippets: Canvas.tsx // ../co ...

cssreactjsnext.jshtml5-canvaspolygon

Seeking to achieve perfect vertical alignment of two columns within zurb foundation

I'm currently working with Zurb Foundation alongside Sass Compass, though this issue can extend to any CSS framework. Here's an example of the code I have: <div class="row"> <div class="small-6 column">...</div> <di ...

htmlcsssassvertical-alignmentzurb-foundation

Is it achievable through CSS alone to eliminate the bullet point in a UL list when it consists of just a single item?

Is it feasible to achieve a solution using CSS alone that remains functional even on IE8, ensuring the following criteria: If a <ul> list contains 2 or more items, then maintain the bullets in front of each item as per usual. When there is only one ...

css

Embedding a picture logo within a CSS-designed content box

I am trying to create a unique layout for my website that reveals content using labelled radio buttons, without the use of scripts. Instead of using <a href='#'>, I want to achieve a specific layout like the one shown in this example. When ...

htmlcsstabs

How can I locate specific images within a CSS sprite?

Are you searching for the correct process to pinpoint specific image locations within an image sprite? If, for example, you aim to create 10 div images in your header using the image provided below, how can you determine the exact location of each one? Is ...

css

React Nested Menu Selection

Having trouble displaying TextField values in my React app. Utilizing material UI and material-ui-phone-number packages. Noticed that values appear behind when clicking the flag due to zIndex issue. Looking for modifications only on dialog2.js For code ex ...

cssreactjsmaterial-uireact-hooksjss

What are some strategies for efficiently positioning buttons using CSS to prevent unwanted consequences?

Below is the CSS and HTML code, detailing a specific issue. * { box-sizing: border-box; font-family: Georgia, 'Times New Roman', Times, serif; } body { margin: 0; font-family: Georgia, 'Times New Roman', Times, serif; } .topn ...

htmlcssbutton

Is there a way to set the content to be hidden by default in Jquery?

Can anyone advise on how to modify the provided code snippet, sourced from (http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_hide_show), so that the element remains hidden by default? <!DOCTYPE html> <html> <head> <scrip ...

javascriptjqueryhtmlcssajax

centering headers using tailwind styles

I am facing a challenge with positioning my main title, logo, and subtitle. I want the subtitle to be centered regardless of the logo's width. Currently, the position of the sub title changes based on the logo's width, resulting in it not aligni ...

htmlcsstailwind-css

CSS: ways to set a maximum height for a datalist container

Hello, I have a datalist with over 100 options and I would like to set a maximum height for it to ensure the design looks tidy. Can anyone please help me out with this? Thank you! <input type="text" list="suggestions" class="f ...

htmlcsswebbootstrap-4

Which web browser(s) can properly display the CSS property display: run-in?

Compatibility with IE7 and FF2.0 Suitable for IE8 and Opera 9+ Works only on IE7 Optimized for IE8 and FF3.5 Supports IE7 and Safari This question came up in a quiz, but I don't have all the browsers to test it. Any assistance would be greatly apprec ...

css

Is there a way to utilize PHP/HTML to exhibit a diverse array of random images as dynamic background visuals?

I'm currently learning the process of constructing a website. I've successfully constructed the index page, and below you will find the PHP and HTML code: <?php session_start(); $pngFiles = array('image1.png', 'image2.jpeg' ...

phphtmlcss

Images for navigating forward and backward in a jQuery datepicker

I'm experimenting with setting custom images for the previous and next month buttons. I attempted to utilize the prevText / nextText options of the datepicker in order to include a span with my own CSS class definition. However, this resulted in the c ...

jquerycssjquery-uidatepicker

Troubleshooting custom fonts not displaying on a .NET website: Importing fonts for web use

https://i.stack.imgur.com/uWSsY.pngI am well-versed in HTML, but my knowledge of VB.NET is limited. In standard CSS, including a font like the one below would typically work, but I have encountered issues when attempting to do so in .NET. @font-face { f ...

htmlcssvb.netfonts

Is there a way to conceal a component using Twitter Bootstrap while having the ability to reveal it with the help of

Suppose I generate an HTML element in the following manner, <div id="unique-div" class="concealed">Hello, TB3</div> <div id="unique-div" class="hide-me">Greetings, TB4</div> <div id="u ...

javascriptjqueryhtmlcsstwitter-bootstrap

Aligning images in center of list

I'm in need of some CSS expertise to assist with this layout. Here is the current structure: <div class="movieList"> <div class="image" selected = true> <img class="poster" src="image1" selected = true/> </div> <d ...

htmlcssasp.net-mvc

Is it possible to personalize the Facebook like box appearance?

Is there a way to modify the number of feeds and enable auto scroll feature in a Facebook likebox? I've been experimenting with the code snippet below but have hit a roadblock. <div id="fb-root"></div><script>(function(d, s, id) {va ...

javascriptjquerycsshtmlfacebook-likebox