Animated Kebab Menu in HTML & CSS

This HTML & CSS code snippet helps you to create an animated kebab navigation menu. When clicked, a kebab icon transforms into a cross, revealing a dropdown menu with links. It enhances user navigation and adds a touch of interactivity to your website.

It adds a stylish animated effect when users click on the menu icon, enhancing the overall user experience. Moreover, you can use this code on your website’s navigation bar to create an attractive and user-friendly kebab menu.

How to Create an Animated Kebab Menu In HTML & CSS

1. Before you begin, make sure you have loaded the following assets into the head tag of your HTML document.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<link href='https://fonts.googleapis.com/css?family=Roboto:400,500,300,700' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Nunito:400,700,300' rel='stylesheet' type='text/css'>

2. Create the HTML structure for your menu. Paste the following code into your HTML file:

<ul class="nav">
  <li><a href="#">Home</a></li>
  <li><a href="#">Portfolio</a></li>
  <li><a href="#">Contact</a></li>
  <div class="kebab">
    <figure></figure>
    <figure class="middle"></figure>
    <p class="cross">x</p>
    <figure></figure>
    <ul class="dropdown">
      <li><a href="#">Art</a></li>
      <li><a href="#">Coding</a></li>
      <li><a href="#">Design</a></li>
      <li><a href="#">Web Development</a></li>
    </ul>
  </div>
</ul>

3. Next, apply the necessary CSS styles to create the animation and styling for your menu. Paste the following CSS code into your stylesheet:

body{
  font-family: Roboto, "sans-serif";
}

.kebab {
  cursor: pointer;
  position: relative;
  display: inline-block;
  box-sizing: border-box;
  padding: 0 16px;
  top: 12px;
}
.kebab figure {
  width: 6px;
  height: 6px;
  border-radius: 5px;
  background: #00bcd4;
  margin: 3px 0;
}

.middle {
  transition: all 0.25s cubic-bezier(0.72, 1.2, 0.71, 0.72);
  transform: scale(1);
  position: relative;
  box-shadow: 0 0.1px 0.1px 0 rgba(0, 0, 0, 0.16), 0 0.1px 0.3px 0 rgba(0, 0, 0, 0.12);
  -webkit-filter: blur(0.1px);
  filter: blur(0.1px);
}

.middle.active {
  transform: scale(4.5);
  transition: all 0.25s cubic-bezier(0.32, 2.04, 0.85, 0.54);
  box-shadow: 0 0.1px 0.1px 0 rgba(0, 0, 0, 0.16), 0 0.1px 0.3px 0 rgba(0, 0, 0, 0.12);
}

.cross {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0);
  margin-top: -1px;
  font-family: "Nunito", sans-serif;
  color: white;
  transition: all 0.2s cubic-bezier(0.72, 1.2, 0.71, 0.72);
  font-size: 22px;
  user-select: none;
}

.cross.active {
  transform: translate(-50%, -50%) scale(1);
  transition: all 0.15s cubic-bezier(0.32, 2.04, 0.85, 0.54);
}

h1, a, li {
  font-family: Roboto, sans-serif;
}

a, li {
  color: #6b6b6b;
  text-decoration: none;
}

.nav {
  margin-left: 20%;
}
.nav > li {
  display: inline-block;
  padding: 1em 18px;
  cursor: pointer;
}
.nav > li:hover {
  background: #ebebeb;
}

.dropdown {
  background: #fff;
  position: absolute;
  right: 0;
  top: 3em;
  transition: all 0.25s ease-out;
  transform: scale(0);
  transform-origin: 100% 0;
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.16), 0 2px 8px 0 rgba(0, 0, 0, 0.12);
}
.dropdown li {
  display: block;
  width: 100%;
}
.dropdown li a {
  width: 100%;
  padding: 1em 18px;
  display: inline-block;
  white-space: pre;
  box-sizing: border-box;
}
.dropdown li a:hover {
  background: #ebebeb;
}
.dropdown:hover ul {
  transform: scale(1);
}

.dropdown.active {
  transform: scale(1);
  transition: all 0.25s cubic-bezier(0.5, 1.8, 0.9, 0.8);
}

.follow {
  overflow: hidden;
  width: 42px;
  height: 42px;
  border-radius: 50px;
  background: #03A9F4;
  display: block;
  margin: 300px auto 0;
  white-space: nowrap;
  padding: 13px;
  box-sizing: border-box;
  color: white;
  transition: all 0.2s ease;
  font-family: Roboto, sans-serif;
  text-decoration: none;
  box-shadow: 0 5px 6px 0 rgba(0, 0, 0, 0.2);
}
.follow i {
  margin-right: 20px;
  transition: margin-right 0.2s ease;
}
.follow:hover {
  width: 134px;
}
.follow:hover i {
  margin-right: 10px;
}

@media screen and (max-width: 800px) {
  .follow {
    margin: 400px auto 0;
  }
}

4. Now, let’s add the JavaScript functionality that triggers the animation when the kebab icon is clicked. Insert the following JavaScript code just before the closing </body> tag in your HTML file:

var kebab = document.querySelector('.kebab'),
    middle = document.querySelector('.middle'),
    cross = document.querySelector('.cross'),
    dropdown = document.querySelector('.dropdown');

kebab.addEventListener('click', function() {
  middle.classList.toggle('active');
  cross.classList.toggle('active');
  dropdown.classList.toggle('active');
})

That’s all! hopefully, you have successfully created an Animated Kebab Menu. If you have any questions or suggestions, feel free to comment below.

Asif Mughal

I code and create web elements for amazing people around the world. I like work with new people. New people new Experiences.
I truly enjoy what I’m doing, which makes me more passionate about web development and coding. I am always ready to do challenging tasks whether it is about creating a custom CMS from scratch or customizing an existing system.