0

I am studying on how to create a responsive (hamburger) menu bar using vanilla JavaScript. This is a code from W3Schools and I usually understand the concept because they provide an explanation. However, this example throws me off and I have 3 parts where I do not get it. I appreciate a clarification.

  1. In CSS, why is there no space between .topnav and .responsive? Isn't responsive supposed to follow after .topnav? The result shows differently when I put space between two classes. Same goes to a.icon. Why isn't there space between a and .icon?

  2. I read this meaning javascript:void(0); on Stack Overflow but I still do not get it as the meaning seems universal.

  3. x.className += " responsive"; Is it creating a new class called responsive?

Thank you very much in advance.

function myFunction() {
    var x = document.getElementById("myTopnav");
    if (x.className === "topnav") {
        x.className += " responsive";
    } else {
        x.className = "topnav";
    }
}
body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
}

.topnav {
  overflow: hidden;
  background-color: #333;
}

.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

.topnav a:hover {
  background-color: #ddd;
  color: black;
}

.active {
  background-color: #4CAF50;
  color: white;
}

.topnav .icon {
  display: none;
}

@media screen and (max-width: 600px) {
  .topnav a {
    display: none;
  }
  .topnav a.icon {
    float: right;
    display: block;
  }
}

@media screen and (max-width: 600px) {
  .topnav.responsive {
    position: relative;
  }
  .topnav.responsive .icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
}
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="topnav" id="myTopnav">
  <a href="#home" class="active">Home</a>
  <a href="#news">News</a>
  <a href="#contact">Contact</a>
  <a href="#about">About</a>
  <a href="javascript:void(0);" class="icon" onclick="myFunction()">
    <i class="fa fa-bars"></i>
  </a>
</div>
Austin Gordon
  • 69
  • 6
Jun Jung
  • 405
  • 5
  • 19

1 Answers1

2

ok, just answering your questions here:

  1. Having no space between .topnav and .responsive means it will select an element with both class names. If you add the space in between, you would be selected all (if any) element having the responsive class name with a parent (or grandparent, or grand-grand-...-parent) having a topnav class name.
  2. Basically, javascript:void(0); means "do nothing". The javascript: part means the following part is coded in javascript and the void(0) is a statement that does nothing and returns undefined, in javascript.
  3. The line x.className += " responsive"; adds the responsive class name to the x element. If x had the class name topnav, after this line it will have both class names, matching the .topnav.responsive CSS selector.

Hope this helps you!

Arkanoid
  • 1,165
  • 8
  • 17