Animated Kebab Menu in HTML & CSS

Animated Kebab Menu in HTML & CSS
Code Snippet:Animated Kebab Menu
Author: Ben Mildren
Published: January 10, 2024
Last Updated: January 22, 2024
Downloads: 1,475
License: MIT
Edit Code online: View on CodePen
Read More

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.

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.

About CodeHim

Free Web Design Code & Scripts - CodeHim is one of the BEST developer websites that provide web designers and developers with a simple way to preview and download a variety of free code & scripts. All codes published on CodeHim are open source, distributed under OSD-compliant license which grants all the rights to use, study, change and share the software in modified and unmodified form. Before publishing, we test and review each code snippet to avoid errors, but we cannot warrant the full correctness of all content. All trademarks, trade names, logos, and icons are the property of their respective owners... find out more...

Please Rel0ad/PressF5 this page if you can't click the download/preview link

X