svg-hamburger-menu-html-css-and-javascript

SVG Hamburger Menu Using Html Css And Javascript

Creating an SVG Hamburger Menu using HTML, CSS, and JavaScript is an engaging endeavor that combines the power of these web technologies to craft an interactive and visually appealing navigation element. In this tutorial, we will explore how to design and implement a sleek hamburger menu icon, making use of Scalable Vector Graphics (SVG) for scalability and adaptability across various screen sizes. Through the integration of HTML for structuring, CSS for styling, and JavaScript for interactivity, we will guide you through the process of achieving an elegant and user-friendly navigation solution for your website.

For more gsap animations you can follow the gsap playlist.

You can read more about web development from this playlist.

01. HTML
02. CSS
03. Script
04. Output
05. Youtube Video

Read Also:

HTML:

Let's begin with the foundational structure of an HTML document, as depicted below.

<!DOCTYPE html>
<html>
<head>
  <title>SVG Hamburger Menu Using Html Css And Javascript</title>
</head>
<body>

   // Content

</body>
</html>

Now that we have established the basic HTML structure and ensured that all necessary dependencies are included in the HTML document, it is time to proceed with writing the HTML code, which is provided below.

<!DOCTYPE html>
<html>
<head>
  <title>SVG Hamburger Menu Using Html Css And Javascript</title>
</head>
<body>

<div class="card">
  <div class="row" onclick="handleClick()" role="button" tabindex="0" aria-expanded="false" aria-label="Open Menu">
    <div class="title">MENU</div>
    <svg width="32" height="32" viewBox="0 0 100 100" class="icon">
      <path class="path1">
        <animate class="animate1" attributeName="d" dur="0.35s" repeatCount="1" fill="freeze" />
      </path>
      <path class="path2">
        <animate class="animate2" attributeName="d" dur="0.35s" repeatCount="1" fill="freeze" />
      </path>
      <path class="path3">
        <animate class="animate3" attributeName="d" dur="0.35s" repeatCount="1" fill="freeze" />
      </path>
    </svg>
  </div>
</div>

</body>
</html>

Read Also:

CSS:

body {
   align-items: center;
   background: linear-gradient(20deg,
         rgba(23, 216, 178, 0.3),
         rgba(255, 0, 0, 0) 70.71%),
      linear-gradient(150deg, rgba(247, 255, 92, 0.3), rgba(0, 255, 0, 0) 70.71%),
      linear-gradient(330deg, rgba(83, 9, 71, 0.3), rgba(0, 0, 255, 0) 70.71%);
   display: flex;
   flex-direction: column;
   height: 100vh;
}

.card {
   background-color: #fff;
   border-radius: 20px;
   box-shadow: 0px 1.5px 5.4px rgba(0, 0, 0, 0.054),
      0px 3.7px 10.9px rgba(0, 0, 0, 0.068), 0px 7px 16.8px rgba(0, 0, 0, 0.074),
      0px 12.5px 24.6px rgba(0, 0, 0, 0.076),
      0px 23.4px 38.1px rgba(0, 0, 0, 0.08), 0px 56px 80px rgba(0, 0, 0, 0.1);
   height: 76px;
   margin-top: 16vh;
   transition: height 400ms;
   -webkit-tap-highlight-color: #00000010;
}

.card.active {
   height: 400px;
}

.title {
   font-family: sans-serif;
   font-size: 18px;
   margin-top: 8px;
   user-select: none;
   -webkit-user-select: none;
}

.row {
   align-items: flex-start;
   border-bottom: 1px solid rgba(0, 0, 0, 0.15);
   cursor: pointer;
   display: flex;
   justify-content: space-between;
   padding: 15px 20px;
   transition: height 400ms;
   width: 200px;
}

.icon {
   fill: none;
   margin-top: 0px;
   stroke: #000;
   stroke-width: 12;
   stroke-linecap: square;
   stroke-linejoin: round;
}

Read Also:

SCRIPT:

let isExpanded = false;

const card = document.querySelector(".card");
const row = document.querySelector(".row");
const animate1 = document.querySelector(".animate1");
const animate2 = document.querySelector(".animate2");
const animate3 = document.querySelector(".animate3");

// Keyframes
const values1 = [
  "M 84,24 C 84,24 61.333333,24.001 50,24.001 38.666667,24.001 16,24 16,24",
  "M 82,24 C 82,24 66.957389,30.5 50,30.5 33.042611,30.5 18,24 18,24",
  "M 80,24 C 80,24 61.663104,37 50,37 38.336896,37 20,24 20,24",
  "M 78,24 C 78,24 55.685686,43.5 50,43.5 44.314314,43.5 22,24 22,24",
  "M 76,24 C 76,24 50.055365,50 50,50 49.94463,50 24,24 24,24"
];
const values2 = [
  "M 84,50 H 50 16",
  "M 75.5,50 H 50 24.5",
  "M 67,50 H 50 33",
  "M 58.5,50 H 50 41.5",
  "M 50.001,50 H 50 49.99"
];
const values3 = [
  "M 84,76 C 84,76 61.333333,76.001 50,76.001 38.666667,76.001 16,76 16,76",
  "M 82,76 C 82,76 66.957389,69.5 50,69.5 33.042611,69.5 18,76 18,76",
  "M 80,76 C 80,76 61.663104,63 50,63 38.336896,63 20,76 20,76",
  "M 78,76 C 78,76 55.685686,56.5 50,56.5 44.314314,56.5 22,76 22,76",
  "M 76,76 C 76,76 50.055365,50 50,50 49.944635,50 24,76 24,76"
];

function toggleAnimation(values, animate) {
  animate.setAttribute(
    "values",
    !isExpanded ? values.join("; ") : values.slice().reverse().join("; ")
  );
  animate.beginElement();
}

function handleClick() {
  isExpanded = row.getAttribute("aria-expanded") === "true";

  if (isExpanded) {
    card.classList.remove("active");
  } else {
    card.classList.add("active");
  }

  toggleAnimation(values1, animate1);
  toggleAnimation(values2, animate2);
  toggleAnimation(values3, animate3);

  row.setAttribute("aria-expanded", !isExpanded);
  row.setAttribute("aria-label", !isExpanded ? "Close Menu" : "Open Menu");
}

function initPath(clazz, descriptor) {
  const path = document.querySelector(clazz);
  path.setAttribute("d", descriptor);
}

initPath(".path1", values1[0]);
initPath(".path2", values2[0]);
initPath(".path3", values3[0]);

row.addEventListener("keydown", (event) => {
  if (event.key === "Enter" || event.key === " ") {
    event.preventDefault();
    row.click();
  }
});

Output:

Read Also:

Youtube Video:

We also made a youtube video for "SVG Hamburger Menu Using Html Css And Javascript", if you want to watch demo you can click on below video.

Read Also:

Archive