How do I display the list in a navBar when you click on the hamburger menu? Specifically the 'h-CodePudding

'home' and 'about' both have a display: none embedded within a media query. When you click on the hamburger menu I want them to appear but I just can't figure it out. Note that both css and JS are properly linked. Here's my html, I'm really just struggling with the JS.

Html:

 <nav >
      <ul>
        <div>
          <li><img src="./images/favicon.ico" alt=""></li>
        </div>
        <button  id="hamburger" onclick="showText()">
          <i ></i>
        </button>
        <li><a href="#home">Home</a></li>
        <li><a href="#section-title">About</a></li> 
      </ul>
    </nav>

CodePudding user response：

<style type="text/css">
     .topNav{padding: 20px 40px; display: flex; height: auto; position: absolute; width: 100%;background-color: #00ffd729;}
     .topul{margin-bottom: 0px; justify-content: space-between; margin-left: 0px;padding-left:0px;max-height: 0px; overflow: hidden; transition: all 800ms;}
     .hide-ul{display: block; margin-left: 0px;overflow: visible; max-height: 500px;transition: all 800ms;}
     .topul li a{text-decoration: none; color: #000;transition: all 800ms;}
     .hamburger{margin-left: auto; color: #000;}
     ul{list-style: none; padding-left: 0px;}

</style>


<nav >
    <div  >
        <ul>
            <li>
                <a href="#home">Home</a>
            </li>
            <li>
                 <a href="#section-title">About</a>
            </li> 
            <li>
                 <a href="#home">Home</a>
            </li>
            <li>
                 <a href="#section-title">About</a>
            </li>
       </ul>
  </div>
  <a href="#"   id="hamburger">
       <i ></i>
  </a>
</nav>

CodePudding user response：

possibly this might be helpful. I guess link