Animated Hamburger Menu CSS

This code project provides a simple and interactive animated hamburger menu using HTML and CSS. It allows users to toggle the menu by clicking on the hamburger icon at the top of the page. The menu is created using pure CSS magic and includes smooth transitions and attractive visual effects. This code can be used to enhance the user experience on websites by providing an engaging navigation menu. Feel free to use and customize this code in your projects.

How to Create Animated Hamburger Menu using CSS

1. Create the HTML structure for the hamburger menu as follows:

<h3> Click the hamburger at top of this page to toggle the menu.</h3>
<!--    Made by Erik Terwan    -->
<!--   24th of November 2015   -->
<!--        MIT License        -->
<nav role="navigation">
  <div id="menuToggle">
    <!--
    A fake / hidden checkbox is used as click reciever,
    so you can use the :checked selector on it.
    -->
    <input type="checkbox" />
    
    <!--
    Some spans to act as a hamburger.
    
    They are acting like a real hamburger,
    not that McDonalds stuff.
    -->
    <span></span>
    <span></span>
    <span></span>
    
    <!--
    Too bad the menu has to be inside of the button
    but hey, it's pure CSS magic.
    -->
    <ul id="menu">
      <a href="#"><li>Home</li></a>
      <a href="#"><li>About</li></a>
      <a href="#"><li>Info</li></a>
      <a href="#"><li>Contact</li></a>
      <a href="https://erikterwan.com/" target="_blank"><li>Show me more</li></a>
    </ul>
  </div>
</nav>

2. Use the following CSS code to style the hamburger menu.

/*
 * Made by Erik Terwan
 * 24th of November 2023
 * MIT License
 *
 *
 * If you are thinking of using this in
 * production code, beware of the browser
 * prefixes.
 */
.cd__main{
   min-height: 450px;
}
body{
  font-family: "Avenir Next", "Avenir", sans-serif;
}

#menuToggle
{
  display: block;
  position: fixed;
  top: 50px;
  left: 50px;
  z-index: 1;
  -webkit-user-select: none;
  -moz-user-select: none;
   -ms-user-select: none;
       user-select: none;
}

#menuToggle a
{
  text-decoration: none;
  color: #232323;
  
  transition: color 0.3s ease;
}

#menuToggle a:hover
{
  color: tomato;
}


#menuToggle input
{
  display: block;
  width: 40px;
  height: 32px;
  position: absolute;
  top: -7px;
  left: -5px;
  
  cursor: pointer;
  
  opacity: 0; /* hide this */
  z-index: 2; /* and place it over the hamburger */
  
  -webkit-touch-callout: none;
}

/*
 * Just a quick hamburger
 */
#menuToggle span
{
  display: block;
  width: 33px;
  height: 4px;
  margin-bottom: 5px;
  position: relative;
  
  background: #cdcdcd;
  border-radius: 3px;
  
  z-index: 1;
  
  transform-origin: 4px 0px;
  
  transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
              background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
              opacity 0.55s ease;
}

#menuToggle span:first-child
{
  transform-origin: 0% 0%;
}

#menuToggle span:nth-last-child(2)
{
  transform-origin: 0% 100%;
}

/* 
 * Transform all the slices of hamburger
 * into a crossmark.
 */
#menuToggle input:checked ~ span
{
  opacity: 1;
  transform: rotate(45deg) translate(-2px, -1px);
  background: #232323;
}

/*
 * But let's hide the middle one.
 */
#menuToggle input:checked ~ span:nth-last-child(3)
{
  opacity: 0;
  transform: rotate(0deg) scale(0.2, 0.2);
}

/*
 * Ohyeah and the last one should go the other direction
 */
#menuToggle input:checked ~ span:nth-last-child(2)
{
  transform: rotate(-45deg) translate(0, -1px);
}

/*
 * Make this absolute positioned
 * at the top left of the screen
 */
#menu
{
  box-sizing: border-box;
  position: fixed;
  top: 0;
  width: 300px;
  height: 100%;
  padding: 50px;
  padding-top: 125px;
  background: #ededed;
  list-style-type: none;
  -webkit-font-smoothing: antialiased;
  left: -300px;
  transition: 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
}

#menu li
{
  padding: 10px 0;
  font-size: 22px;
}

/*
 * And let's slide it in from the left
 */
#menuToggle input:checked ~ ul
{
  transition: 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
  left: 0;
}

If you want to customize the menu in the CSS code, you can make changes in the #menu selector and its associated properties. Here are some specific areas you can modify to customize the menu:

1. Width and Height: Adjust the width and height properties in the #menu selector to change the dimensions of the menu.
2. Padding: Modify the padding and padding-top properties in the #menu selector to change the spacing inside the menu items.
3. Background Color: Update the background property in the #menu selector to change the background color of the menu.
4. Font Size: Adjust the font-size property in the #menu li selector to change the font size of the menu items.
5. Text Color: Modify the color property in the #menuToggle a selector to change the color of the menu item text.
6. Transition Effects: Customize the transition property in various selectors to modify the speed and easing of the transition effects.

That’s all! hopefully, you have successfully created an animated hamburger menu using CSS. If you have any questions or suggestions, feel free to comment below.