How to turn into Humberger Menu

gyran619 · ‎09-24-2024

This is the code.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Custom Links Drawer</title>
<style>
body{margin:0;font-family:Arial,sans-serif}
.custom-links-section{background:#132446;padding:10px 20px;text-align:left}
.drawer-toggle{color:#fff;cursor:pointer;font-size:24px}
.custom-links-container{display:none;position:fixed;top:0;left:0;height:100%;width:80%;background:#132446;padding:20px;z-index:999;transition:transform 0.3s;transform:translateX(-100%)}
.custom-links-container.open{transform:translateX(0)}
.custom-link{color:#fff;text-transform:uppercase;font-weight:bold;text-decoration:none;display:block;margin-bottom:10px;transition:color 0.3s}
.custom-link:hover{color:#add8e6}
@media (max-width:749px){
.drawer-toggle{display:block}
.custom-links-container{display:block}
}
@media (min-width:750px){
.drawer-toggle{display:none}
.custom-links-container{display:none}
}
</style>
</head>
<body>
<div class="custom-links-section">
<div class="drawer-toggle" onclick="toggleDrawer()">☰</div>
<div class="custom-links-container" onclick="closeDrawer()">
<a href="https://4way-stretch.com/collections/carpet-lining" class="custom-link">Carpet Lining</a>
<a href="https://4way-stretch.com/collections/rubber-matting" class="custom-link">Rubber Matting</a>
<a href="https://4way-stretch.com/collections/upholstery-fabrics" class="custom-link">Upholstery Fabrics</a>
<a href="https://www.4way-stretch.com/collections/vinyl-flooring" class="custom-link">Vinyl Flooring</a>
<a href="https://4way-stretch.com/collections/insulation" class="custom-link">Insulation</a>
<a href="https://4way-stretch.com/collections/adhesive" class="custom-link">Adhesive</a>
</div>
</div>

<script>
function toggleDrawer() {
var drawer = document.querySelector('.custom-links-container');
drawer.classList.toggle('open');
}

function closeDrawer() {
var drawer = document.querySelector('.custom-links-container');
drawer.classList.remove('open');
}

document.addEventListener('click', function(event) {
var drawer = document.querySelector('.custom-links-container');
if (!drawer.contains(event.target) && !document.querySelector('.drawer-toggle').contains(event.target)) {
drawer.classList.remove('open');
}
});
</script>
</body>
</html>

I make the code but i don't know where i can put the codes

0xsnowman · ‎09-24-2024

To turn your existing code into a hamburger menu that toggles open and closed, you just need to ensure that the button (the hamburger icon) opens the drawer and closes it when clicked outside. Your current implementation is already quite close. Below are some improvements and clarifications to enhance the hamburger menu functionality.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Custom Links Drawer</title>
    <style>
        body {
            margin: 0;
            font-family: Arial, sans-serif;
        }
        .custom-links-section {
            background: #132446;
            padding: 10px 20px;
            text-align: left;
            position: relative;
        }
        .drawer-toggle {
            color: #fff;
            cursor: pointer;
            font-size: 24px;
        }
        .custom-links-container {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            height: 100%;
            width: 80%;
            background: #132446;
            padding: 20px;
            z-index: 999;
            transition: transform 0.3s;
            transform: translateX(-100%);
        }
        .custom-links-container.open {
            transform: translateX(0);
            display: block;
        }
        .custom-link {
            color: #fff;
            text-transform: uppercase;
            font-weight: bold;
            text-decoration: none;
            display: block;
            margin-bottom: 10px;
            transition: color 0.3s;
        }
        .custom-link:hover {
            color: #add8e6;
        }
        @media (max-width: 749px) {
            .drawer-toggle {
                display: block;
            }
            .custom-links-container {
                display: block; /* Temporarily display for mobile */
            }
        }
        @media (min-width: 750px) {
            .drawer-toggle {
                display: none; /* Hide toggle for larger screens */
            }
            .custom-links-container {
                display: none; /* Hide drawer */
            }
        }
    </style>
</head>
<body>
    <div class="custom-links-section">
        <div class="drawer-toggle" onclick="toggleDrawer()">☰</div>
        <div class="custom-links-container" onclick="closeDrawer()">
            <a href="https://4way-stretch.com/collections/carpet-lining" class="custom-link">Carpet Lining</a>
            <a href="https://4way-stretch.com/collections/rubber-matting" class="custom-link">Rubber Matting</a>
            <a href="https://4way-stretch.com/collections/upholstery-fabrics" class="custom-link">Upholstery Fabrics</a>
            <a href="https://www.4way-stretch.com/collections/vinyl-flooring" class="custom-link">Vinyl Flooring</a>
            <a href="https://4way-stretch.com/collections/insulation" class="custom-link">Insulation</a>
            <a href="https://4way-stretch.com/collections/adhesive" class="custom-link">Adhesive</a>
        </div>
    </div>

    <script>
        function toggleDrawer() {
            var drawer = document.querySelector('.custom-links-container');
            drawer.classList.toggle('open');
        }

        function closeDrawer() {
            var drawer = document.querySelector('.custom-links-container');
            drawer.classList.remove('open');
        }

        document.addEventListener('click', function(event) {
            var drawer = document.querySelector('.custom-links-container');
            if (!drawer.contains(event.target) && !document.querySelector('.drawer-toggle').contains(event.target)) {
                drawer.classList.remove('open');
            }
        });
    </script>
</body>
</html>

banned

How to turn into Humberger Menu

How to turn into Humberger Menu

Community Blog Articles