Home
Programming

Simple Hamburger Button in HTML

Syiainfoku make a Simple Hamburger Button in HTML
Simple Hamburger Button in HTML

Hello!

Today you will learn together on the Syiainfoku blog how to make Simple Hamburger Button in HTML

Okay, let's get started

Preview Simple Hamburger Button in HTML

Preview Simple Hamburger Button in HTML

More or less the result will be like in the image above.

Source Code and Brief Explanation

First, create an HTML file with the name index.html and paste the given code in your HTML file. Remember, you must create a file with an .html extension.

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Simple Hamburger Button | hitoricoding</title>
    <link rel="stylesheet" href="./assets/style.css">
</head>

<body>
    <div class="wrapper">
        <div class="lines line1"></div>
        <div class="lines line2"></div>
        <div class="lines line3"></div>
    </div>
    <script src="./assets/main.js"></script>
</body>

</html>

Second, create a CSS file with the name style.css and paste the given code in your CSS file. Remember, you must create a file with a .css extension.

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    width: 100%;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(to top left, rgb(33, 33, 77), rgb(122, 31, 92));
}

.wrapper {
    height: 60px;
    width: 70px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
}

.lines {
    height: 10px;
    width: 100%;
    background-color: #fefefe;
    border-radius: 5px;
    transition: all 0.5s;
}

.line1 {
    transform-origin: right;
}

.line3 {
    transform-origin: right;
}

.line2 {
    transform-origin: left;
}

Finally, create a JS file with the name main.js and paste the given code in your CSS file. Remember, you must create a file with a .js extension.

const wrapper = document.querySelector(".wrapper");
const lines = document.querySelector(".lines");
const line1 = document.querySelector(".line1");
const line2 = document.querySelector(".line2");
const line3 = document.querySelector(".line3");

wrapper.addEventListener("click", getCross);

function getCross(e) {
    if (line2.style.width !== "0px") {
        line1.style.transform = "translateX(-11px) rotate(-45deg";
        line3.style.transform = "translateX(-11px) rotate(45deg";
        line2.style.width = "0px";
        line2.style.transform = "translateX(-50px)";
        line2.style.opacity = "0"
    } else {
        line1.style.transform = "rotate(0deg)";
        line3.style.transform = "rotate(0deg)";
        line2.style.width = "100%";
        line2.style.transform = "translateX(0px)";
        line2.style.opacity = "1"
    }
}

That's it, now you have successfully created a Simple Hamburger Button, If your code is not working or you are facing any error/problem, please download the source code file from the given download button. It's free and a .zip file will be downloaded then you have to extract it.

Download 

Closing

Thank you for those of you who have read and downloaded this source code, hopefully it can be useful and add to your insight.

If you found this article useful, you can share it. That's all from me, and THANK YOU

Post a Comment