[ANSWERED] javascript – How to toggle the visibility of a responsive navigation bar?

Question 1

It is Variable declaration issue so only it is not working in your code. I have slightly modified your code. Hope this help you.

let open = false;    
function toggleNav(){
  if(open==false){
      navUl = document.getElementById("navUl");
      navUl.style.display="block";
      open = true;
  }else{
        navUl = document.getElementById("navUl");
        navUl.style.display="none";
        open = false; 
  }
}

Question 2

If the element is visible( i.e display==’block’ ),the element can be hidden.If it is hidden( i.e display==’none’ ),the element can be shown. window.getComputedStyle() will get the css of the particular element.

function toggleNav(){
   let navUl = document.getElementById("navUl");
   // If the element is visible, hide it
   if (window.getComputedStyle(navUl).display === 'block') {
       navUl.style.display = 'none';
   }else{
       navUl.style.display = 'block';//if element is not visible then display
   }
}

Question 3

There are couple of typos in your code

open = false should be declare as global variable, you are assigning
open as false every time you are invoking toggleNav() function.

You can directly check if variable is truthy, simply as if (open)
instead of if (open == true)

Instead of assigning true or false in if/else condition, you can
directly assign opposite of what it is not currently. like open = !open so if open is false then it will become true and vice-versa

Final Code will be like

let open = false;
function toggleNav() {
  open = !open;
  if(open){
    navUl = document.getElementById("navUl");
    navUl.style.display="none";        
  } else {
    navUl = document.getElementById("navUl");
    navUl.style.display="block";

  }
}

Question 4

I’m trying to make a responsive navigation bar, which is visible, if I click a button (icon) and is not visible if I click this button again. I’ve also tried it with .addEventListener(click, …), but I just can’t get it done. (so this would be my preferred way) I think it’s a pretty basic question, but I have’t found a way to solve it. Here’s what I got:

Snippet:

function toggleNav() {
  let open = false;
  if (open == false) {
    navUl = document.getElementById("navUl");
    navUl.style.display = "block";
    open = true;
  }

  if (open == true) {
    navUl = document.getElementById("navUl");
    navUl.style.display = "none";
    open = false;
  }
}

@media screen and (max-width: 800px) {
  /* nav bar */
  #bars {
    display: block;
  }
  nav ul {
    display: none;
  }
  /* heading */
  #opener h1,
  #audioPlayer h1 {
    font-size: 25px;
  }
}

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="main.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  <style>
    body {
      background: url(img/acoustic-gtr.jpg);
      background-repeat: no-repeat;
      background-size: cover;
    }
  </style>
  <script src="main.js"></script>
  <title>Musik von Paul</title>
</head>

<body>
  <nav>
    <a href="index.html"><img src="img/gtr-icon.png" alt="gtr-icon"></a>
    <i class="fa fa-bars" id="bars" onclick="toggleNav()"></i>
    <ul id="navUl">
      <li>CDs
        <ul>
          <li><a href="cd1-akustik.html">1. CD: Akustik Gitarre</a></li>
          <li><a href="cd2-2019.html">2. CD: 2019</a></li>
        </ul>
      </li>
      <li>E-Gitarre
        <ul>
          <li><a href="rock-metal.html">Rock & Metal</a></li>
        </ul>
      </li>

      <li>Akustik Gitarre
        <ul>
          <li><a href="klassik.html">Klassik</a></li>
          <li><a href="fingerstyle.html">Fingerstyle</a></li>
          <li><a href="sonstiges.html">Sonstiges</a></li>
        </ul>
      </li>
    </ul>
  </nav>

  <section id="opener">
    <h1>Gitarrenaufnahmen von Paul</h1>
    <br>
    <a href="cd1-akustik.html">CD 1: Aufnahmen Akustik Gitarre</a>
    <a href="cd2-2019.html">CD 2: Aufnahmen von 2019</a>
  </section>
</body>

</html>

Bollate

[ANSWERED] javascript – How to toggle the visibility of a responsive navigation bar?

By

Solution 1 :

Solution 2 :

Solution 3 :

Problem :

By

Related Post

[ANSWERED] html – How to import/veiw STL files in a wordpress website?

[ANSWERED] javascript – How to handle repeating values in JQuery

[ANSWERED] java – How to send dropdown value to servlet NOT the option text

You missed

[ANSWERED] javascript – Text box to display updated text and save on button click

[ANSWERED] javascript – Pass html tag to angularjs variable from controller

[ANSWERED] html – bootstrap mobile menu not scrolling instead the background is scrolling

[ANSWERED] html – How to play live stream YouTube videos using CEF4Delphi?

Bollate