Close Menu
    HTML & CSS

    How to make Juicy Hamburgers Menu using HTML and CSS

    Coding StellaBy Updated:No Comments14 Mins Read

    Let’s create a Juicy Hamburgers Menu using HTML and CSS. This project focuses on building a mouth-watering food menu with a clean layout and attractive styling.

    We’ll use:

    • HTML to structure the menu items, names, prices, and descriptions.
    • CSS to style everything with juicy colors, smooth hover effects, and a modern food-menu look.

    This project is perfect for practicing layout, spacing, fonts, and visual design using only HTML and CSS. Whether you’re a beginner or polishing your UI skills, this menu design is a great addition to your frontend projects. Let’s start cooking some tasty UI! 🍔🔥

    HTML :

    This HTML builds an animated hamburger menu UI using SVG and CSS. Each menu button is a “plate” containing an SVG burger icon made from path lines, along with an SVG X icon for the close state. When you click a plate, the active class toggles using inline onclick, and CSS handles the animation that morphs the burger lines into an X. The SVG filter at the top creates a gooey blur effect for smoother, organic transitions. All visuals and animations are driven by SVG paths and CSS, while JavaScript is only used for basic interaction control.

    <!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Juicy Hamburgers Menu | @coding.stella</title>
  <link rel="stylesheet" href="./style.css">
</head>

<body>
  <svg>
    <defs>
      <filter id="gooeyness">
        <feGaussianBlur in="SourceGraphic" stdDeviation="2.2" result="blur" />
        <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 20 -10"
          result="gooeyness" />
        <feComposite in="SourceGraphic" in2="gooeyness" operator="atop" />
      </filter>
    </defs>
  </svg>
  <div class="plates">
    <div class="plate plate1" onclick="this.classList.toggle('active')">
      <svg class="burger" version="1.1" height="100" width="100" viewBox="0 0 100 100">
        <path class="line line1" d="M 30,65 H 70" />
        <path class="line line2"
          d="M 70,50 H 30 C 30,50 18.644068,50.320751 18.644068,36.016949 C 18.644068,21.712696 24.988973,6.5812347 38.79661,11.016949 C 52.604247,15.452663 46.423729,62.711864 46.423729,62.711864 L 50.423729,49.152542 L 50.423729,16.101695" />
        <path class="line line3"
          d="M 30,35 H 70 C 70,35 80.084746,36.737688 80.084746,25.423729 C 80.084746,19.599612 75.882239,9.3123528 64.711864,13.559322 C 53.541489,17.806291 54.423729,62.711864 54.423729,62.711864 L 50.423729,49.152542 V 16.101695" />
      </svg>
      <svg class="x" version="1.1" height="100" width="100" viewBox="0 0 100 100">
        <path class="line" d="M 34,32 L 66,68" />
        <path class="line" d="M 66,32 L 34,68" />
      </svg>
    </div>
    <div class="plate plate2" onclick="this.classList.toggle('active')">
      <svg class="burger" version="1.1" height="100" width="100" viewBox="0 0 100 100">
        <path class="line line1"
          d="M 50,65 H 70 C 70,65 75,65.198488 75,70.762712 C 75,73.779026 74.368822,78.389831 66.525424,78.389831 C 22.092231,78.389831 -18.644068,-30.508475 -18.644068,-30.508475" />
        <path class="line line2"
          d="M 50,35 H 70 C 70,35 81.355932,35.300135 81.355932,25.635593 C 81.355932,20.906215 78.841706,14.830508 72.881356,14.830508 C 35.648232,14.830508 -30.508475,84.322034 -30.508475,84.322034" />
        <path class="line line3"
          d="M 50,50 H 30 C 30,50 12.288136,47.749959 12.288136,60.169492 C 12.288136,67.738339 16.712974,73.305085 40.677966,73.305085 C 73.791674,73.305085 108.47458,-19.915254 108.47458,-19.915254" />
        <path class="line line4"
          d="M 50,50 H 70 C 70,50 81.779661,50.277128 81.779661,36.607372 C 81.779661,28.952694 77.941689,25 69.067797,25 C 39.95532,25 -16.949153,119.91525 -16.949153,119.91525" />
        <path class="line line5"
          d="M 50,65 H 30 C 30,65 17.79661,64.618439 17.79661,74.152543 C 17.79661,80.667556 25.093813,81.355932 38.559322,81.355932 C 89.504001,81.355932 135.59322,-21.186441 135.59322,-21.186441" />
        <path class="line line6"
          d="M 50,35 H 30 C 30,35 16.525424,35.528154 16.525424,24.152542 C 16.525424,17.535987 22.597755,13.559322 39.40678,13.559322 C 80.617882,13.559322 94.067797,111.01695 94.067797,111.01695" />
      </svg>
      <svg class="x" version="1.1" height="100" width="100" viewBox="0 0 100 100">
        <path class="line" d="M 34,32 L 66,68" />
        <path class="line" d="M 66,32 L 34,68" />
      </svg>
    </div>
    <div class="plate plate3" onclick="this.classList.toggle('active')">
      <svg class="burger" version="1.1" height="100" width="100" viewBox="0 0 100 100">
        <path class="line line1" d="M 50,35 H 30 C 6.9919512,35 5.5084746,123.72881 5.5084746,123.72881" />
        <path class="line line2" d="M 50,35 H 70 C 98.006349,35 92.796611,119.91525 92.796611,119.91525" />
        <path class="line line3" d="M 50,50 H 30 C 8.2796577,50 5.9322035,138.1356 5.9322035,138.1356" />
        <path class="line line4" d="M 50,50 H 70 C 91.152643,50 91.949152,133.21754 91.949152,133.21754" />
        <path class="line line5"
          d="M 50,65 C 50,65 47.570314,65 30,65 C 4.9857853,65 9.3220337,147.88136 9.3220337,147.88136" />
        <path class="line line6" d="M 50,65 H 70 C 91.937316,65 88.559322,144.91525 88.559322,144.91525" />
      </svg>
      <svg class="x" version="1.1" height="100" width="100" viewBox="0 0 100 100">
        <path class="line" d="M 34,32 L 66,68" />
        <path class="line" d="M 66,32 L 34,68" />
      </svg>
    </div>
    <div class="plate plate4" onclick="this.classList.toggle('active')">
      <svg class="burger" version="1.1" height="100" width="100" viewBox="0 0 100 100">
        <path class="line line1" d="M 50,35 H 30" />
        <path class="line line2" d="M 50,35 H 70" />
        <path class="line line3" d="M 50,50 H 30" />
        <path class="line line4" d="M 50,50 H 70" />
        <path class="line line5" d="M 50,65 H 30" />
        <path class="line line6" d="M 50,65 H 70" />
      </svg>
      <svg class="x" version="1.1" height="100" width="100" viewBox="0 0 100 100">
        <path class="line" d="M 34,32 L 66,68" />
        <path class="line" d="M 66,32 L 34,68" />
      </svg>
    </div>
    <div class="plate plate5" onclick="this.classList.toggle('active')">
      <svg class="burger" version="1.1" height="100" width="100" viewBox="0 0 100 100">
        <path class="line line1" d="M 30,35 H 70 " />
        <path class="line line2" d="M 50,50 H 30 L 34,32" />
        <path class="line line3" d="M 50,50 H 70 L 66,68" />
        <path class="line line4" d="M 30,65 H 70 " />
      </svg>
      <svg class="x" version="1.1" height="100" width="100" viewBox="0 0 100 100">
        <path class="line" d="M 34,32 L 66,68" />
        <path class="line" d="M 66,32 L 34,68" />
      </svg>
    </div>
    <div class="plate plate6" onclick="this.classList.toggle('active')">
      <svg class="burger" version="1.1" height="100" width="100" viewBox="0 0 100 100">
        <path class="line line1" d="M 50,35 H 30 M 50,35 H 70 V 38 H 30 V 41 H 70" />
        <path class="line line2" d="M 50,50 H 30 V 47 H 70 V 44 H 30" />
        <path class="line line3" d="M 50,50 H 70 V 53 H 30 V 56 H 70" />
        <path class="line line4" d="M 50,65 H 70 M 50,65 H 30 V 62 H 70 V 59 H 30" />
      </svg>
      <svg class="x" version="1.1" height="100" width="100" viewBox="0 0 100 100">
        <path class="line" d="M 34,32 L 66,68" />
        <path class="line" d="M 66,32 L 34,68" />
      </svg>
    </div>
    <div class="plate plate7" onclick="this.classList.toggle('active')">
      <svg class="burger" version="1.1" height="100" width="100" viewBox="0 0 100 100">
        <path class="line line1"
          d="M 30,35 H 60 C 63.595663,35 65,32.357023 65,30 C 65,27.642977 62.357023,25 60,25 C 57.642977,25 55,25.933659 55,30 V 77.828008" />
        <path class="line line2"
          d="M 70,35 H 50 C 46.404337,35 45,32.357023 45,30 C 45,27.642977 47.642977,25 50,25 C 52.357023,25 55,25.933659 55,30 V 77.828008" />
        <path class="line line3"
          d="M 30,50 H 55 C 58.595665,50 60.000005,47.357023 60.000005,45 C 60.000005,42.642977 57.357025,40 55,40 C 52.642977,40 50,40.933659 50,45 V 92.828008" />
        <path class="line line4"
          d="M 70,50 H 45 C 41.404337,50 40,47.357023 40,45 C 40,42.642977 42.642977,40 45,40 C 47.357023,40 50,40.933659 50,45 V 92.828008" />
        <path class="line line5"
          d="M 30,65 H 50 C 53.595665,65 55.000005,62.357023 55.000005,60 C 55.000005,57.642977 52.357025,55 50,55 C 47.642977,55 45,55.933659 45,60 V 107.82801" />
        <path class="line line6"
          d="M 70,65 H 40 C 36.404337,65 35,62.357023 35,60 C 35,57.642977 37.642977,55 40,55 C 42.357023,55 45,55.933659 45,60 V 107.82801" />
      </svg>
      <svg class="x" version="1.1" height="100" width="100" viewBox="0 0 100 100">
        <path class="line" d="M 34,32 L 66,68" />
        <path class="line" d="M 66,32 L 34,68" />
      </svg>
    </div>
    <div class="plate plate8" onclick="this.classList.toggle('active')">
      <svg class="burger" version="1.1" height="100" width="100" viewBox="0 0 100 100">
        <path class="line line1"
          d="M 50,35 H 30 C 30,35 20,33.951333 20,25 C 20,16.048667 30,15 30,15 C 38.261288,15 35.285955,25 40,25 C 44.714045,25 45.285955,15 50,15 C 54.714045,15 55.285955,25 60,25 C 64.714045,25 65.285955,15 70,15 C 74.714045,15 75.285955,25 80,25 C 84.714045,25 85.285955,15 90,15 C 94.714045,15 95.285955,25 100,25 C 104.71405,25 105.28595,15 110,15 C 114.71405,15 115.28595,25 120,25 C 124.71405,25 125.33898,15 130,15" />
        <path class="line line2"
          d="M 50,35 H 69.999999 C 69.999999,35 79.999999,36.048667 79.999999,45 C 79.999999,53.951333 69.999999,55 69.999999,55 C 61.738709,55 64.714049,45 59.999999,45 C 55.28596,45 54.71405,55 50,55 C 45.285955,55 44.714045,45 40,45 C 35.285955,45 34.714045,55 30,55 C 25.285955,55 24.714045,45 20,45 C 15.285955,45 14.714045,55 10,55 C 5.285955,55 4.714045,45 0,45 C -4.71405,45 -5.28595,55 -10,55 C -14.71405,55 -15.28595,45 -20,45 C -24.71405,45 -25.33898,55 -30,55" />
        <path class="line line3"
          d="M 50,50 H 30 C 30,50 20,48.95133 20,40 C 20,31.04867 30,30 30,30 C 38.261288,30 35.285955,40 40,40 C 44.714045,40 45.285955,30 50,30 C 54.714045,30 55.285955,40 60,40 C 64.714045,40 65.285955,30 70,30 C 74.714045,30 75.285955,40 80,40 C 84.714045,40 85.285955,30 90,30 C 94.714045,30 95.285955,40 100,40 C 104.71405,40 105.28595,30 110,30 C 114.71405,30 115.28595,40 120,40 C 124.71405,40 125.33898,30 130,30" />
        <path class="line line4"
          d="M 50,50 H 69.999999 C 69.999999,50 79.999999,51.04867 79.999999,60 C 79.999999,68.95133 69.999999,70 69.999999,70 C 61.738709,70 64.714049,60 59.999999,60 C 55.28596,60 54.71405,70 50,70 C 45.285955,70 44.714045,60 40,60 C 35.285955,60 34.714045,70 30,70 C 25.285955,70 24.714045,60 20,60 C 15.285955,60 14.714045,70 10,70 C 5.285955,70 4.714045,60 0,60 C -4.71405,60 -5.28595,70 -10,70 C -14.71405,70 -15.28595,60 -20,60 C -24.71405,60 -25.33898,70 -30,70" />
        <path class="line line5"
          d="M 50.000001,65 H 30.000001 C 30.000001,65 20.000001,63.95133 20.000001,55 C 20.000001,46.048664 30.000001,44.999997 30.000001,44.999997 C 38.261289,44.999997 35.285956,55 40.000001,55 C 44.714046,55 45.285956,44.999997 50.000001,44.999997 C 54.714046,44.999997 55.285956,55 60.000001,55 C 64.714046,55 65.285956,44.999997 70.000001,44.999997 C 74.714046,44.999997 75.285956,55 80.000001,55 C 84.714046,55 85.285956,44.999997 90.000001,44.999997 C 94.714046,44.999997 95.285956,55 99.999998,55 C 104.71405,55 105.28595,44.999997 110,44.999997 C 114.71405,44.999997 115.28595,55 120,55 C 124.71405,55 125.33898,44.999997 130,44.999997" />
        <path class="line line6"
          d="M 50.000001,65 H 70 C 70,65 80,66.04866 80,75 C 80,83.95133 70,85 70,85 C 61.73871,85 64.71405,75 60,75 C 55.285961,75 54.714051,85 50.000001,85 C 45.285956,85 44.714046,75 40.000001,75 C 35.285956,75 34.714046,85 30.000001,85 C 25.285956,85 24.714046,75 20.000001,75 C 15.285956,75 14.714046,85 10.000001,85 C 5.2859559,85 4.7140459,75 0,75 C -4.7140491,75 -5.2859491,85 -9.9999991,85 C -14.714049,85 -15.285949,75 -19.999999,75 C -24.714049,75 -25.338979,85 -29.999999,85" />
      </svg>
      <svg class="x" version="1.1" height="100" width="100" viewBox="0 0 100 100">
        <path class="line" d="M 34,32 L 66,68" />
        <path class="line" d="M 66,32 L 34,68" />
      </svg>
    </div>
  </div>

  <script src="./script.js"></script>

</body>
</html>

    CSS :

    This CSS centers the layout on the screen and styles multiple animated hamburger menu buttons called plates. Each plate contains SVG lines that form a burger icon, and when the active class is added on click, those lines animate using stroke-dasharray, stroke-dashoffset, transforms, and delays to smoothly morph into a close (X) icon. Every plate has a different animation style, controlled by separate .plate1 to .plate8 rules, while transitions handle timing and smoothness. The gooey SVG filter adds a soft, fluid feel to the burger lines, and media queries keep the layout responsive on smaller screens.

    body {
  align-items: center;
  display: flex;
  height: 100vh;
  justify-content: center;
  margin: 0;
  background-color: #252432;
}

svg {
  height: 80px;
  position: absolute;
  width: 80px;
}

.plates {
  display: flex;
  flex-wrap: wrap;
  max-height: 160px;
  width: 640px;
  cursor: pointer;
}

@media (max-width: 640px) {
  .plates {
    width: 320px;
  }
}

.plate {
  height: 80px;
  width: 80px;
}

.burger {
  filter: url(#gooeyness);
}

.x {
  transform: scale(0);
  transition: transform 400ms;
}

.line {
  fill: none;
  stroke: rgb(255, 255, 255);
  stroke-width: 6px;
  stroke-linecap: round;
  stroke-linejoin: round;
  transform-origin: 50%;
  transition: stroke-dasharray 500ms 200ms, stroke-dashoffset 500ms 200ms, transform 500ms 200ms;
}

.x .line {
  stroke-width: 5.5px;
}

/* First plate */
.plate1 .line2 {
  stroke-dasharray: 40 200;
  stroke-dashoffset: 0px;
}

.plate1 .line3 {
  stroke-dasharray: 40 179;
  stroke-dashoffset: 0px;
}

.active .line {
  transition: stroke-dasharray 500ms, stroke-dashoffset 500ms, transform 500ms;
}

.active.plate1 .line1 {
  transform: scale(0, 1);
  transition: transform 500ms 100ms;
}

.active.plate1 .line2 {
  stroke-dasharray: 5px 200;
  stroke-dashoffset: -164px;
}

.active.plate1 .line3 {
  stroke-dasharray: 5px 179;
  stroke-dashoffset: -142px;
}

.active .x {
  transform: scale(1);
  transition: transform 400ms 350ms;
}

/* El segundo plato */
.plate2 .line1 {
  stroke-dasharray: 21 185.62753295898438;
  transition-delay: 0;
}

.plate2 .line2 {
  stroke-dasharray: 21 178.6514129638672;
  transition-delay: 30ms;
}

.plate2 .line3 {
  stroke-dasharray: 21 197.92425537109375;
  transition-delay: 60ms;
}

.plate2 .line4 {
  stroke-dasharray: 21 190.6597137451172;
  transition-delay: 90ms;
}

.plate2 .line5 {
  stroke-dasharray: 21 208.52874755859375;
  transition-delay: 120ms;
}

.plate2 .line6 {
  stroke-dasharray: 21 186.59703063964844;
  transition-delay: 150ms;
}

.active.plate2 .line1 {
  stroke-dasharray: 5 185.62753295898438;
  stroke-dashoffset: -141px;
}

.active.plate2 .line2 {
  stroke-dasharray: 5 178.6514129638672;
  stroke-dashoffset: -137px;
}

.active.plate2 .line3 {
  stroke-dasharray: 5 197.92425537109375;
  stroke-dashoffset: -176px;
}

.active.plate2 .line4 {
  stroke-dasharray: 5 190.6597137451172;
  stroke-dashoffset: -159px;
}

.active.plate2 .line5 {
  stroke-dasharray: 5 208.52874755859375;
  stroke-dashoffset: -139px;
}

.active.plate2 .line6 {
  stroke-dasharray: 5 186.59703063964844;
  stroke-dashoffset: -176px;
}

.active.plate2 .x {
  transition: transform 400ms 250ms;
}

/* O terceiro prato */
.plate3 .line {
  transition: stroke-dasharray 300ms 200ms, stroke-dashoffset 300ms 200ms, transform 300ms 200ms;
}

.plate3 .line1 {
  stroke-dasharray: 21 109;
}

.plate3 .line2 {
  stroke-dasharray: 21 112;
}

.plate3 .line3 {
  stroke-dasharray: 21 102;
}

.plate3 .line4 {
  stroke-dasharray: 21 103;
}

.plate3 .line5 {
  stroke-dasharray: 21 110;
}

.plate3 .line6 {
  stroke-dasharray: 21 115;
}

.plate3 .x {
  transition: transform 400ms 50ms;
}

.active.plate3 .line {
  transition: stroke-dasharray 400ms, stroke-dashoffset 400ms, transform 400ms;
}

.active.plate3 .line1 {
  stroke-dasharray: 5 109;
  stroke-dashoffset: -95px;
}

.active.plate3 .line2 {
  stroke-dasharray: 5 112;
  stroke-dashoffset: -96px;
}

.active.plate3 .line3 {
  stroke-dasharray: 5 102;
  stroke-dashoffset: -79px;
}

.active.plate3 .line4 {
  stroke-dasharray: 5 103;
  stroke-dashoffset: -78px;
}

.active.plate3 .line5 {
  stroke-dasharray: 5 110;
  stroke-dashoffset: -63px;
}

.active.plate3 .line6 {
  stroke-dasharray: 5 115;
  stroke-dashoffset: -64px;
}

.active.plate3 .x {
  transition: transform 400ms 100ms;
}

/* Die vierte teller */
.plate4 .x {
  transition: transform 400ms;
}

.plate4 .line {
  transform-origin: 50%;
  transition: transform 400ms 100ms;
}

.active.plate4 .line {
  transition: transform 400ms;
}

.active.plate4 .line1 {
  transform: translateX(18px) translateY(-3px) rotate(-45deg) scale(.7);
}

.active.plate4 .line2 {
  transform: translateX(-18px) translateY(-3px) rotate(45deg) scale(.7);
}

.active.plate4 .line3 {
  transform: translateY(0px) rotate(45deg) scale(.7);
}

.active.plate4 .line4 {
  transform: translateY(0px) rotate(-45deg) scale(.7);
}

.active.plate4 .line5 {
  transform: translateX(18px) translateY(3px) rotate(45deg) scale(.7);
}

.active.plate4 .line6 {
  transform: translateX(-18px) translateY(3px) rotate(-45deg) scale(.7);
}

.active.plate4 .x {
  transition: transform 400ms 100ms;
  transform: scale(1);
}

/* Den femte rätten */
.plate5 .line {
  transition: stroke-dasharray 400ms 100ms, stroke-dashoffset 400ms 100ms, transform 400ms 100ms;
}

.plate5 .line1 {
  stroke-dasharray: 40 40;
}

.plate5 .line2 {
  stroke-dasharray: 21 39;
}

.plate5 .line3 {
  stroke-dasharray: 21 39;
}

.plate5 .line4 {
  stroke-dasharray: 40 40;
}

.plate5 .x {
  transition: transform 400ms 50ms;
}

.active.plate5 .line {
  transition: stroke-dasharray 400ms, stroke-dashoffset 400ms, transform 400ms;
}

.active.plate5 .line1 {
  stroke-dasharray: 1 40;
  stroke-dashoffset: -33px;
}

.active.plate5 .line2 {
  stroke-dasharray: 5 39;
  stroke-dashoffset: -37px;
}

.active.plate5 .line3 {
  stroke-dasharray: 5 39;
  stroke-dashoffset: -37px;
}

.active.plate5 .line4 {
  stroke-dasharray: 1 40;
  stroke-dashoffset: -33px;
}

.active.plate5 .x {
  transition: transform 400ms 50ms;
}

/* Шестая пластина */
.plate6 .line {
  transition: stroke-dasharray 400ms 100ms, stroke-dashoffset 400ms 100ms, transform 400ms 100ms;
}

.plate6 .line1 {
  stroke-dasharray: 21 127;
}

.plate6 .line2 {
  stroke-dasharray: 21 106;
}

.plate6 .line3 {
  stroke-dasharray: 21 106;
}

.plate6 .line4 {
  stroke-dasharray: 21 126;
}

.plate6 .x {
  transition: transform 400ms 50ms;
}

.active.plate6 .line {
  transition: stroke-dasharray 400ms, stroke-dashoffset 400ms, transform 400ms;
}

.active.plate6 .line1 {
  stroke-dasharray: 2 127;
  stroke-dashoffset: -94px;
}

.active.plate6 .line2 {
  stroke-dasharray: 2 106;
  stroke-dashoffset: -91px;
}

.active.plate6 .line3 {
  stroke-dasharray: 2 106;
  stroke-dashoffset: -91px;
}

.active.plate6 .line4 {
  stroke-dasharray: 2 127;
  stroke-dashoffset: -94px;
}

.active.plate6 .x {
  transition: transform 400ms 50ms;
}

/* 제 7 판 */
.plate7 .line {
  transition: stroke-dasharray 400ms 100ms, stroke-dashoffset 400ms 100ms, transform 400ms 100ms;
}

.plate7 .line1 {
  stroke-dasharray: 21 102;
}

.plate7 .line2 {
  stroke-dasharray: 21 92;
}

.plate7 .line3 {
  stroke-dasharray: 21 97;
}

.plate7 .line4 {
  stroke-dasharray: 21 97;
}

.plate7 .line5 {
  stroke-dasharray: 21 92;
}

.plate7 .line6 {
  stroke-dasharray: 21 102;
}

.plate7 .x {
  transition: transform 400ms 50ms;
}

.active.plate7 .line {
  transition: stroke-dasharray 400ms, stroke-dashoffset 400ms, transform 400ms;
}

.active.plate7 .line1 {
  stroke-dasharray: 2 102;
  stroke-dashoffset: -102px;
}

.active.plate7 .line2 {
  stroke-dasharray: 2 92;
  stroke-dashoffset: -92px;
}

.active.plate7 .line3 {
  stroke-dasharray: 2 97;
  stroke-dashoffset: -97px;
  transition-delay: 20ms;
}

.active.plate7 .line4 {
  stroke-dasharray: 2 97;
  stroke-dashoffset: -97px;
  transition-delay: 20ms;
}

.active.plate7 .line5 {
  stroke-dasharray: 2 92;
  stroke-dashoffset: -90px;
  transition-delay: 40ms;
}

.active.plate7 .line6 {
  stroke-dasharray: 2 102;
  stroke-dashoffset: -100px;
  transition-delay: 40ms;
}

.active.plate7 .x {
  transition: transform 400ms 50ms;
}

/* Όγδοο πιάτο */
.plate8 .line {
  transition: stroke-dasharray 400ms 100ms, stroke-dashoffset 400ms 100ms, transform 400ms 100ms;
}

.plate8 .line1 {
  stroke-dasharray: 21 201;
}

.plate8 .line2 {
  stroke-dasharray: 21 201;
  transition-delay: 20ms;
}

.plate8 .line3 {
  stroke-dasharray: 21 201;
  transition-delay: 40ms;
}

.plate8 .line4 {
  stroke-dasharray: 21 201;
  transition-delay: 60ms;
}

.plate8 .line5 {
  stroke-dasharray: 21 201;
  transition-delay: 80ms;
}

.plate8 .line6 {
  stroke-dasharray: 21 201;
  transition-delay: 100ms;
}

.plate8 .x {
  transition: transform 400ms 50ms;
}

.active.plate8 .line {
  transition: stroke-dasharray 400ms, stroke-dashoffset 400ms, transform 400ms;
}

.active.plate8 .line1 {
  stroke-dasharray: 5 201;
  stroke-dashoffset: -158px;
}

.active.plate8 .line2 {
  stroke-dasharray: 5 201;
  stroke-dashoffset: -158px;
  transition-delay: 20ms;
}

.active.plate8 .line3 {
  stroke-dasharray: 5 201;
  stroke-dashoffset: -158px;
  transition-delay: 40ms;
}

.active.plate8 .line4 {
  stroke-dasharray: 5 201;
  stroke-dashoffset: -158px;
  transition-delay: 60ms;
}

.active.plate8 .line5 {
  stroke-dasharray: 5 201;
  stroke-dashoffset: -158px;
  transition-delay: 80ms;
}

.active.plate8 .line6 {
  stroke-dasharray: 5 201;
  stroke-dashoffset: -158px;
  transition-delay: 100ms;
}

.active.plate8 .x {
  transition: transform 400ms 50ms;
}

    In conclusion, creating a Juicy Hamburgers Menu with HTML and CSS is a fun and creative way to improve your design skills. With simple structure and smart styling, you can build an eye-catching menu that looks delicious and professional. Keep experimenting with colors, animations, and layouts to make your designs even better!

    If your project has problems, don’t worry. Just click to download the source code and face your coding challenges with excitement. Have fun coding!

    Share.

    Related Posts

    Add A Comment
    Leave A Reply