• Jobs
  • About Us
  • professionals
    • Home
    • Jobs
    • Courses and challenges
  • business
    • Home
    • Post vacancy
    • Our process
    • Pricing
    • Assessments
    • Payroll
    • Blog
    • Sales
    • Salary Calculator

0

115
Views
Hamburger Drop Down Not Responding To Click Event

In my title , I wrote hamburger dd but none of my component seem to be responding to me clicking on them. Have no idea why is this happening and would love if anyone here could help me. (In short , nothing happens when I click on the hamburger menu).

<!DOCTYPE html>
   <html lang="en">
      <head>
         <title>MY CSS WEBSITE</title>
         <link rel="stylesheet" href="style.css">
      </head>
      <body>
         <nav>
            <ul class="topnav" id="dropdownClick">
            
              <li>
                  <a href="#home">Home</a>
              </li>
              <li>
                  <a href="#about">About</a>
              </li>
              <li>
                  <a href="#news">News</a>
              </li>
              <li>
                  <a href="#contact">Contact</a>
              </li>
              <li class="topnav-right">
                  <a href="#signUp">Sign Up</a>
              </li>
              <li class="topnav-right">
                  <a href="#signIn">Sign In</a>
              </li>
              <li class="dropdownIcon">
                  <a href="javascript:void(0)" onclick="dropdownMenu">☰</a>
              </li>
          </ul>
        </nav>     
    <script> 
        function dropdownMenu(){
            console.log(hello);
            var x = document.getElementById("dropdownClick");
            if(ddc.className === "topnav"){
                x.className += " responsive";
            }
            /*change topnav to topnav.responsive*/
            else{
                x.className = "topnav";
            }
        }

    </script>
</body>
about 3 years ago · Juan Pablo Isaza
1 answers
Answer question

0

You have quite a few issues in your js. First of all, you need to make sure you are keeping variable names consistent. (You were using ddc instead of x in places. Furthermore, make sure that strings are inside of quotes, otherwise, they are treated as variables.

Fixed code:

<!DOCTYPE html>
   <html lang="en">
      <head>
         <title>MY CSS WEBSITE</title>
         <link rel="stylesheet" href="style.css">
      </head>
      <body>
         <nav>
            <ul class="topnav" id="dropdownClick">
            
              <li>
                  <a href="#home">Home</a>
              </li>
              <li>
                  <a href="#about">About</a>
              </li>
              <li>
                  <a href="#news">News</a>
              </li>
              <li>
                  <a href="#contact">Contact</a>
              </li>
              <li class="topnav-right">
                  <a href="#signUp">Sign Up</a>
              </li>
              <li class="topnav-right">
                  <a href="#signIn">Sign In</a>
              </li>
              <li class="dropdownIcon">
                  <a href="javascript:dropdownMenu()">☰</a>
              </li>
          </ul>
        </nav>     
    <script> 
        function dropdownMenu(){
            console.log("hello");
            var x = document.getElementById("dropdownClick");
            if(x.className === "topnav"){
                x.className += " responsive";
            }
            /*change topnav to topnav.responsive*/
            else{
                x.className = "topnav";
            }
        }

    </script>
</body>
about 3 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Our process Sales
Legal
Terms and conditions Privacy policy
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recommend me some offers
I have an error