I am trying to make a responsive nav bar-CodePudding

I have the idea of having the anchor tags show up when they're set to active and I have tried using JavaScript to access them and make them active when clicking on a div/button (I tried with button but it didn't work out.).

The problem is that nothing happens. I ran through my code and didn't find where I can be wrong.

Index.html:

<!DOCTYPE html>
<html>
<head>
<title>Начало</title>
<link rel="shortcut icon" type="image/png" href="favicon.jpg">
<link rel="stylesheet" href="IndexStyle.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://kit.fontawesome.com/d2896764d5.js" crossorigin="anonymous"></script>
<script src="ResponsiveMenu.js" ></script>
</head>
<body>

<nav >
    <button >
      <span  style="background-color: transparent; width: 5px; height: 5px;"></span>
      <span  style="background-color: #ff4757;"></span>
      <span  style="background-color: #ffa502"></span>
      <span  style="background-color: #2ed573;"></span>
  </button>
    <ul >
      <li><a  href="Index.html"><i ></i>&nbsp;&nbsp;НАЧАЛО</a></li>
      <li><a  href="HtmlPage.html"><i ></i>&nbsp;&nbsp;HTML&CSS</a></li>
      <li><a  href="#"><i ></i>&nbsp;&nbsp;ИНСТРУМЕНТИ</a></li>
      <li><a  href="#"><i ></i>&nbsp;&nbsp;ЗАДАЧИ</a></li>
      <li><a  href="#"><i ></i>&nbsp;&nbsp;ЗА НАС</a> </li>
    </ul>
  </nav>

</body>
</html>

IndexStyle.css:

body {
  background-image: url(1.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: bold;
  margin: 0;
}

.pro_column1 {
  width: 15%;
}

.pro_column2 {
  width: 85%;
}

.nav {
  overflow: hidden;
  background-color: white;
  /*opacity: 60%;*/
  margin: 10px;
  border-radius: 10px;
  width: 850px;
  /*background:#3c6382;
  /*box-shadow:0px 5px 20px rgba(0,0,0,0.1);*/
  /*border: solid black 2px;*/
}

.nav-list {
  display:none;
}

.nav-list.active {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav a {
  color: #747d8c;
  text-align: center;
  padding: 35px 10px;
  text-decoration: none;
  font-size: 17px;
  margin: 0;
  border-radius: 10px;
  transition: 1s;
}

.nav a:hover {
  background-color: #ddd;
  color: black;
  -webkit-animation: 1s ease-in forwards;
}

.dot_a {
  /*float: right;*/
  color: #747d8c;
  /*display: block;*/
  text-align: center;
  padding: 30px 10px;
  text-decoration: none;
  font-size: 17px;
  margin: 0;
  display: inline-block;
  border-radius: 10px;
  transition: 1s;
  /*justify-content: center;*/
  /*position: fixed; /* or absolute */
}

i {
  /*float: right;*/
  font-size: 20px;
  border: none;
  outline: none;
  color: #747d8c;
  padding: 32px 5px;
  font-family: inherit;
  margin: 0px;
  border-radius: 20px;
  transition: 1s;
}

.dot {
  height: 15px;
  width: 15px;
  border-radius: 50%;
  display: inline-block;
  margin: 0px;
}

.column {
  float: left;
  width: 33.33%;
  padding: 10px;
  height: 300px;
}

.row:after {
  content: "";
  display: table;
  clear: both;
}

@media screen and (max-width: 870px) {
  .nav a {
    padding-top: 5px;
    padding-bottom: 5px;
  }
  div.dot_a {
    padding-top: 3px;
    padding-bottom: 0px;
  }
  .nav {
    width: 90%;
  }
  .dot {
    margin-top: 15px;
    margin-bottom: 15px;
  }
  .nav a:active {
    display: block;
  }
}



ResponsiveMenu.js:
const toggleButton = document.querySelector('.dot_a');
const navbarLinks = document.querySelector('.nav-list');

toggleButton.addEventListener('click', () => {
  navbarLinks.classList.toggle('active')
})

CodePudding user response：

Lets take this one step at a time, first lets look at the HTML. The center tag is no longer supported in HTML5 so I removed it. Second you had an extra quotation mark in your last anchor which I removed. In order to get all the links to show at once you should wrap them in a container. In this case a list makes the most sense. I have created a nav-list for you and wrapped all your anchor tags in an li tag.

As far as your CSS I noticed you were using .anchor:active which is a Pseudo class. This is not the same as having a class of anchor AND a class of active. If you want to select a class of anchor that also has a class of active you would use .anchor.active. In this case the active class is going on the nav-list so I style it using .nav-list.active

Now for the Javascript. Instead of using it to loop over all the anchor tags and setting them to active individually you can now just toggle the active class on your nav-list. This will make all the links appear at the same time.

const toggleButton = document.querySelector('.dot_a');
const navbarLinks = document.querySelector('.nav-list');

toggleButton.addEventListener('click', () => {
  navbarLinks.classList.toggle('active')
})

body {
  background-image: url(1.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: bold;
  margin: 0;
}

.pro_column1 {
  width: 15%;
}

.pro_column2 {
  width: 85%;
}

.nav {
  overflow: hidden;
  background-color: white;
  /*opacity: 60%;*/
  margin: 10px;
  border-radius: 10px;
  width: 850px;
  /*background:#3c6382;
  /*box-shadow:0px 5px 20px rgba(0,0,0,0.1);*/
  /*border: solid black 2px;*/
}

.nav-list {
  display:none;
}

.nav-list.active {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav a {
  color: #747d8c;
  text-align: center;
  padding: 35px 10px;
  text-decoration: none;
  font-size: 17px;
  margin: 0;
  border-radius: 10px;
  transition: 1s;
}

.nav a:hover {
  background-color: #ddd;
  color: black;
  -webkit-animation: 1s ease-in forwards;
}

.dot_a {
  /*float: right;*/
  color: #747d8c;
  /*display: block;*/
  text-align: center;
  padding: 30px 10px;
  text-decoration: none;
  font-size: 17px;
  margin: 0;
  display: inline-block;
  border-radius: 10px;
  transition: 1s;
  /*justify-content: center;*/
  /*position: fixed; /* or absolute */
}

i {
  /*float: right;*/
  font-size: 20px;
  border: none;
  outline: none;
  color: #747d8c;
  padding: 32px 5px;
  font-family: inherit;
  margin: 0px;
  border-radius: 20px;
  transition: 1s;
}

.dot {
  height: 15px;
  width: 15px;
  border-radius: 50%;
  display: inline-block;
  margin: 0px;
}

.column {
  float: left;
  width: 33.33%;
  padding: 10px;
  height: 300px;
}

.row:after {
  content: "";
  display: table;
  clear: both;
}

@media screen and (max-width: 870px) {
  .nav a {
    padding-top: 5px;
    padding-bottom: 5px;
  }
  div.dot_a {
    padding-top: 3px;
    padding-bottom: 0px;
  }
  .nav {
    width: 90%;
  }
  .dot {
    margin-top: 15px;
    margin-bottom: 15px;
  }
  .nav a:active {
    display: block;
  }
}

<nav >
  <button >
    <span  style="background-color: transparent; width: 5px; height: 5px;"></span>
    <span  style="background-color: #ff4757;"></span>
    <span  style="background-color: #ffa502"></span>
    <span  style="background-color: #2ed573;"></span>
</button>
  <ul >
    <li><a  href="Index.html"><i ></i>&nbsp;&nbsp;НАЧАЛО</a></li>
    <li><a  href="HtmlPage.html"><i ></i>&nbsp;&nbsp;HTML&CSS</a></li>
    <li><a  href="#"><i ></i>&nbsp;&nbsp;ИНСТРУМЕНТИ</a></li>
    <li><a  href="#"><i ></i>&nbsp;&nbsp;ЗАДАЧИ</a></li>
    <li><a  href="#"><i ></i>&nbsp;&nbsp;ЗА НАС</a> </li>
  </ul>
</nav>

CodePudding user response：

As I understood you want to make the nav items active on click here's some issues to fix

1- querySelector returns only the first element in the list, so here you have 5 elements with class of anchors so it'll return the first anchor tag with class of .anchors and therefore you need querySelectorAll

Read more about querySelector here https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector

And querySelectorAll in here https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll

Briefly querySelectorAll returns a nodeList that you can treat as an array so you need to loop over this array and set the onclick event on each element like so

const navbarLinks = document.querySelectorAll(".anchors");

navbarLinks.forEach((link) =>
    link.addEventListener("click", (e) => {
        e.target.classList.toggle("active");
    })
);

2- you don't appear to have a class called active so classList.toggle would not work add this to your css

.active {
    background-color: #ddd !important;
    color: black;
}

3- you have a small bug in your html, the last anchor tag (a href="#"") notice that it has 2 double quotes for closing

4- with the previous code in (2) you'll notice being able to select multiple values which is not what we want therefore you should remove active class from all other anchor tags when 1 is active and you can achieve this with the following code

link.addEventListener("blur", (e) => {
    link.classList.remove("active");
});

blur works when you're not focusing on the element anymore check MDN here for more info https://developer.mozilla.org/en-US/docs/Web/API/Element/blur_event

here's a working example

const toggleButton = document.querySelector(".dot_a");
const navbarLinks = document.querySelectorAll(".anchors");

navbarLinks.forEach((link) => {
  link.addEventListener("click", (e) => {
    e.target.classList.add("active");
  });

  link.addEventListener("blur", (e) => {
    link.classList.remove("active");
  });
});

body {
  background-image: url(1.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: bold;
  margin: 0;
}

.pro_column1 {
  width: 15%;
}

.pro_column2 {
  width: 85%;
}

.nav {
  overflow: hidden;
  background-color: white;
  /*opacity: 60%;*/
  margin: 10px;
  border-radius: 10px;
  width: 850px;
  /*background:#3c6382;
  /*box-shadow:0px 5px 20px rgba(0,0,0,0.1);*/
  /*border: solid black 2px;*/
}

.nav a {
  /*float: right;*/
  color: #747d8c;
  /*display: block;*/
  text-align: center;
  padding: 35px 10px;
  text-decoration: none;
  font-size: 17px;
  margin: 0;
  border-radius: 10px;
  transition: 1s;
  /*justify-content: center;*/
  /*position: fixed; /* or absolute */
}

.anchors {
  /*float: right;*/
  color: #747d8c;
  /*display: block;*/
  text-align: center;
  padding: 35px 10px;
  text-decoration: none;
  font-size: 17px;
  margin: 0;
  border-radius: 10px;
  transition: 1s;
  /*justify-content: center;*/
  /*position: fixed; /* or absolute */
}

.nav a:hover {
  background-color: #ddd;
  color: black;
  -webkit-animation: 1s ease-in forwards;
}
.active {
  background-color: #ddd !important;
  color: black !important;
}
.dot_a {
  /*float: right;*/
  color: #747d8c;
  /*display: block;*/
  text-align: center;
  padding: 30px 10px;
  text-decoration: none;
  font-size: 17px;
  margin: 0;
  display: inline-block;
  border-radius: 10px;
  transition: 1s;
  /*justify-content: center;*/
  /*position: fixed; /* or absolute */
}

i {
  /*float: right;*/
  font-size: 20px;
  border: none;
  outline: none;
  color: #747d8c;
  padding: 32px 5px;
  font-family: inherit;
  margin: 0px;
  border-radius: 20px;
  transition: 1s;
}

.dot {
  height: 15px;
  width: 15px;
  border-radius: 50%;
  display: inline-block;
  margin: 0px;
}

.column {
  float: left;
  width: 33.33%;
  padding: 10px;
  height: 300px;
}

.row:after {
  content: "";
  display: table;
  clear: both;
}

@media screen and (max-width: 870px) {
  .nav a {
    display: none;
    padding-top: 5px;
    padding-bottom: 5px;
  }

  div.dot_a {
    padding-top: 3px;
    padding-bottom: 0px;
  }

  .nav {
    width: 90%;
  }
  .dot {
    margin-top: 15px;
    margin-bottom: 15px;
  }

  .nav a:active {
    display: block;
  }
}

<head>
  <title>Начало</title>
  <link rel="shortcut icon" type="image/png" href="favicon.jpg">
  <link rel="stylesheet" href="IndexStyle.css">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <script src="ResponsiveMenu.js" defer></script>
  <script src="https://kit.fontawesome.com/d2896764d5.js" crossorigin="anonymous"></script>
  <script src="ResponsiveMenu.js"></script>
</head>

<body>
  <center>
    <nav >
      <div  style="pointer-events: none;">
        <span  style="background-color: transparent; width: 5px; height: 5px;"></span>
        <span  style="background-color: #ff4757;"></span>
        <span  style="background-color: #ffa502"></span>
        <span  style="background-color: #2ed573;"></span>
      </div>

      <a  href="#"><i ></i>&nbsp;&nbsp;НАЧАЛО</a>

      <a  href="#"><i ></i>&nbsp;&nbsp;HTML&CSS</a>

      <a  href="#"><i ></i>&nbsp;&nbsp;ИНСТРУМЕНТИ</a>

      <a  href="#"><i ></i>&nbsp;&nbsp;ЗАДАЧИ</a>

      <a  href="#"><i ></i>&nbsp;&nbsp;ЗА НАС</a>
    </nav>
  </center>

</body>