Animated Menu Button
Animated Menu Button

Hello Friends, In this tutorial, we will create an animated menu button. The menu button is the most important element for a website and an app. The Menu Button is used to show navigation links.

In our design, when a user hovers on the icon, a pulse animation starts as an icon shadow. when the button is clicked, menu items are shown with simple fade-in animation. On the hover of menu items, the background changes to light gray, and text and icon color changes to dark black.

When the menu button was clicked, the menu icon was changed to cross sign. In the end, a user clicks the cross icon menu items are disappeared With suspense where it is gone! 😱

Let’s create our animated menu button

Table of Contents

Animated Menu Button

index.html

<!DOCTYPE html>
<head>
  <title>Animated Menu Button</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="list-container">
    <button class="more-button" aria-label="Menu Button">
      <div class="menu-icon-wrapper">
        <div class="menu-icon-line half first"></div>
        <div class="menu-icon-line"></div>
        <div class="menu-icon-line half last"></div>
      </div>
    </button>
    <ul class="more-button-list">
      <li class="more-button-list-item">
        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-settings">
          <circle cx="12" cy="12" r="3"/>
          <path d="M19.4 15a1.65 1.65 0 00.33 1.82l.06.06a2 2 0 010 2.83 2 2 0 01-2.83 0l-.06-.06a1.65 1.65 0 00-1.82-.33 1.65 1.65 0 00-1 1.51V21a2 2 0 01-2 2 2 2 0 01-2-2v-.09A1.65 1.65 0 009 19.4a1.65 1.65 0 00-1.82.33l-.06.06a2 2 0 01-2.83 0 2 2 0 010-2.83l.06-.06a1.65 1.65 0 00.33-1.82 1.65 1.65 0 00-1.51-1H3a2 2 0 01-2-2 2 2 0 012-2h.09A1.65 1.65 0 004.6 9a1.65 1.65 0 00-.33-1.82l-.06-.06a2 2 0 010-2.83 2 2 0 012.83 0l.06.06a1.65 1.65 0 001.82.33H9a1.65 1.65 0 001-1.51V3a2 2 0 012-2 2 2 0 012 2v.09a1.65 1.65 0 001 1.51 1.65 1.65 0 001.82-.33l.06-.06a2 2 0 012.83 0 2 2 0 010 2.83l-.06.06a1.65 1.65 0 00-.33 1.82V9a1.65 1.65 0 001.51 1H21a2 2 0 012 2 2 2 0 01-2 2h-.09a1.65 1.65 0 00-1.51 1z"/>
        </svg>
        <span>Settings</span>
      </li>
      <li class="more-button-list-item">
        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-copy">
          <rect x="9" y="9" width="13" height="13" rx="2" ry="2"/>
          <path d="M5 15H4a2 2 0 01-2-2V4a2 2 0 012-2h9a2 2 0 012 2v1"/>
        </svg>
        <span>Copy</span>
      </li>
      <li class="more-button-list-item">
        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-share">
          <path d="M4 12v8a2 2 0 002 2h12a2 2 0 002-2v-8M16 6l-4-4-4 4M12 2v13"/>
        </svg>
        <span>Share</span>
      </li>
      <li class="more-button-list-item">
        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-trash-2">
          <path d="M3 6h18M19 6v14a2 2 0 01-2 2H7a2 2 0 01-2-2V6m3 0V4a2 2 0 012-2h4a2 2 0 012 2v2M10 11v6M14 11v6"/>
        </svg>
        <span>Delete</span>
      </li>
    </d>
  </div>
  
  <script type="text/javascript" src="script.js"></script>
</body>
</html>

Here we have used SVG to create icons and the menu icon button is created using div.

<button class="more-button" aria-label="Menu Button">
      <div class="menu-icon-wrapper">
        <div class="menu-icon-line half first"></div>
        <div class="menu-icon-line"></div>
        <div class="menu-icon-line half last"></div>
      </div>
</button>


Here we have used a button to create the outer part of the menu button, then another div is created inside the button to create the icon. Here all three lines are created using three more divs inside the “menu-icon-wrapper” div. These all divs are converted to lines using CSS.

style.css

first, we have imported fonts.

@import url("https://fonts.googleapis.com/css2?family=Montserrat&display=swap");


then the universal box-sizing is set to border-box and the body width, height, and color value are given.

* {
  box-sizing: border-box;
}

body {
  width: 100%;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #ffffff;
  font-family: "Montserrat", sans-serif;
}

In this part, we gave the values to the .list-container and its child elements.

.list-container {
  position: relative;
}
.list-container.active .more-button-list {
  opacity: 1;
  transform: scale(1);
}


when a user clicks on the button at that time only the menu is shown not the icons. Here we had applied this property on .list-container because it is the parent for .more-button-list.

.list-container.active .more-button-list-item {
  animation: fadeInItem 0.6s 0.2s forwards;
}
.list-container.active .more-button-list-item:nth-child(2) {
  animation-delay: 0.4s;
}
.list-container.active .more-button-list-item:nth-child(3) {
  animation-delay: 0.6s;
}
.list-container.active .more-button-list-item:nth-child(4) {
  animation-delay: 0.8s;
}

It is the most important part of our fade-in animation. we applied animation on .more-button-list-items (every item of our menu list) and then we applied animation-delay to every element using :nth-child, so it looks like each menu item is shown after the first one.

.list-container:hover > .more-button {
  animation: Pulse 0.6s linear infinite;
}
.list-container.active .more-button{
  animation-play-state: paused;
}


when a user hovers on the menu icon the pulse animation starts and if the button is clicked (active) the animation will be paused.

.list-container.active .menu-icon-wrapper {
  transform: rotate(-45deg);
}
.list-container.active .menu-icon-line.first {
  transform: rotate(-90deg) translateX(1px);
}
.list-container.active .menu-icon-line.last {
  transform: rotate(-90deg) translateX(-1px);
}


It is the code for changing menu icon lines to cross. First, when a user clicked on the menu icon, it rotates 45 degrees then both the top and bottom line rotates to -90 degree to look like a cross.

.more-button {
  background-color: #5c67ff;
  box-shadow: 0px 0px 0px 0px rgba(92, 103, 255, 0.3);
  border-radius: 50%;
  width: 50px;
  height: 50px;
  border: none;
  padding: 0;
  cursor: pointer;
  transition: 0.2s ease-in;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  position: relative;
  z-index: 2;
}
.more-button:hover {
  box-shadow: 0px 0px 0px 8px rgba(92, 103, 255, 0.3);
  background-color: #4854ff;
}
.more-button:focus {
  outline: 0;
}


In this section, we designed our menu button. The menu button color changes on the hover, when it is clicked it should not create any outline so we set the outline value to 0.

.more-button-list {
  background-color: #fff;
  border-radius: 8px;
  list-style-type: none;
  width: 140px;
  height: 170px;
  box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.2);
  padding: 0;
  position: absolute;
  right: 24px;
  bottom: 0;
  opacity: 0;
  transform: scale(0);
  transform-origin: bottom right;
  transition: all 0.3s ease 0.1s;
}
.more-button-list li {
  opacity: 0;
}
.more-button-list-item {
  display: flex;
  align-items: center;
  color: #1c3991;
  padding: 10px;
  border-radius: 4px;
  cursor: pointer;
  position: relative;
  transition: 0.2s ease-in;
  transform: translatex(-10px);
  padding: 6pxs;
}
.more-button-list-item:hover {
  color: #000000;
  background-color: #EEEEEE;
}
.more-button-list-item:after {
  content: "";
  position: absolute;
  height: 1px;
  width: calc(100% - 24px);
  left: 12px;
  bottom: 0;
  background-color: rgba(132, 160, 244, 0.1);
}
.more-button-list-item:last-child:after {
  display: none;
}
.more-button-list-item svg {
  width: 18px;
  height: 18px;
}
.more-button-list-item span {
  display: inline-block;
  line-height: 20px;
  font-size: 14px;
  margin-left: 8px;
}


Here we designed our menu items and set the background color change when the user hovers on any of the items.

@keyframes Pulse {
  0% {
    box-shadow: 0px 0px 0px 0px rgba(92, 103, 255, 0.3);
  }
  50% {
    box-shadow: 0px 0px 0px 12px rgba(92, 103, 255, 0.1);
  }
  100% {
    box-shadow: 0px 0px 0px 4px rgba(92, 103, 255, 0.3);
  }
}


The pulse animation is applied on the menu icon button when a user hovers on it.


@keyframes fadeInItem {
  100% {
    transform: translatex(0px);
    opacity: 1;
  }
}


This is our second animation, when the user clicks on the menu button it displays the menu item with a fade-in effect.

.menu-icon-line {
  background-color: #fff;
  border-radius: 2px;
  width: 100%;
  height: 2px;
}
.menu-icon-line.half {
  width: 50%;
}
.menu-icon-line.first {
  transition: transform 300ms cubic-bezier(0.52, -0.8, 0.52, 0.52);
  transform-origin: right;
}
.menu-icon-line.last {
  align-self: flex-end;
  transition: transform 300ms cubic-bezier(0.52, -0.8, 0.52, 0.52);
  transform-origin: left;
}

As I told you, we designed our menu icon using divs, so here is the CSS for that divs.

script.js

document.querySelector('.more-button').addEventListener('click', function () {
    document.querySelector('.list-container').classList.toggle('active');
});


Here we added a simple function when the user clicks on the menu icon it adds class “active” to the list-container (our parent div after the body).

Hope you guys enjoyed this. If you are having any issues with this code then visit our GitHub account link given below!

Click Here!

Thank You!

You Might Like This:

Our Courses:

HTML – Beginner to Advance

CSS – Beginner to Advance

Oh, hi there πŸ‘‹ It’s nice to meet you.

Sign up to receive awesome content in your inbox, every week.

We don’t spam! Read our privacy policy for more info.

Leave a Reply