0

i want to make hamburger menu in my personal web with html, css, and javascript. This hamburger should be slide down when the screen-size width < 800px. But, when i clicked the hamburger, it doesn't work. What's wrong with my code..?i already tried the js file with document.querySelector(.hamburger) but it still didn't work.. please help me..

below is my nav code in html, my nav code when screen width <800px in css, and my js code:

<body>
    <section class="content" id="home">
        <div class="taskbar">
            <h2 class="logo">Personal Web</h2>
            <div class="hamburger">
                <div class="line"></div>
                <div class="line"></div>
                <div class="line"></div>
            </div>
            <nav class="navbar">
                <ul>
                    <li><a href="#home" class="active">Home</a></li>
                    <li><a href="#self-description" class="active">Self Description</a></li>
                    <li><a href="#interest" class="active">Interest</a></li>
                    <li><img src="img/moon.png" id="icon" class="active"></li>
                </ul>
            </nav>
        </div>

.hamburger{
        display: block;
        cursor: pointer;
        padding: 0 10px;
    }

    .hamburger .line{
        width: 30px;
        height: 3px;
        background: #fefefe;
        margin: 6px 0;
    }

    .navbar{
        height: 0;
        position: absolute;
        top: 60px;
        left: 0;
        right: 0;
        width: 100vw;
        background-color: var(--navbar-color);
        transition: 0.2s;
        overflow: hidden
    }

    .navbar.active{
        height: 25%;
        margin: 0;
    }

    .navbar ul{
        text-align: center;
        display: block;
        width: fit-content;
        margin: 55px auto 0 auto;      
        transition: 0.5s;
        opacity: 0;
    }

    .navbar ul li{
        display: block;
        font-size: 0.7rem;
    }

    .navbar.active ul{
        opacity: 1;
    }

    .navbar ul li a{
        margin-bottom: 12px;
        color: aliceblue;
    }

var hamburger = document.getElementsByClassName("hamburger");
document.body.classList.toggle("active")
hamburger.onclick = function() {
navBar = document.getElementsByClassName("navbar");
navBar.classList.toggle("active");
}
Najmi Azzahra
  • 1
  • document.getElementsByClassName returns an array (you can have multiple elements with same class). So you should run hamburger[0].onclick ... – voidbrain Nov 23 '22 at 11:40
  • @voidbrain No, it doesn't return an array, it returns a HTMLCollection object. – Teemu Nov 23 '22 at 11:46
  • Well you can force it to be iterable. HTMLCollection.prototype[Symbol.iterator] = Array.prototype[Symbol.iterator]; – voidbrain Nov 23 '22 at 11:50
  • @voidbrain HTMLCollection is iterable. The key point is, why to go collect all the elements, then throw away all but one? Wouldn't it be more clever to just get a reference to the first element instead (by using `querySelector` instead of `getElementsByClassName`)? – Teemu Nov 23 '22 at 12:11
  • You are right, but I don’t if the element is unique. (Yes it is because it is the menu button). In this case it can be an id too – voidbrain Nov 23 '22 at 12:21
  • @voidbrain i already checked my code and i only has one element by the name "hamburger". – Najmi Azzahra Nov 23 '22 at 13:06
  • @Teemu Sorry, i already write in my question that i already using querySelector and it still the same. – Najmi Azzahra Nov 23 '22 at 13:07
  • The selector is a string, you've to wrap a string literal into quotes. If you've quoted the selector and used `querySelector` in the click handler function too, your code should work as it is (providing all the elements are present at the time they're referred). – Teemu Nov 23 '22 at 13:08

0 Answers0