How to do an animated sidebar?-CodePudding

I just started learning about web design and would like to create a sidebar. I looked it up on w3school and liked the design but could not understand some of the expressions such as the a after the .overlay class, javascript:void(0), @media screen and (max-height: 450px) etc. Can somebody teach me about what everyone of the lines do? Thank you for your help.

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
  font-family: 'Lato', sans-serif;
}

.overlay {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: rgb(0,0,0);
  background-color: rgba(0,0,0, 0.9);
  overflow-x: hidden;
  transition: 0.5s;
}

.overlay-content {
  position: relative;
  top: 25%;
  width: 100%;
  text-align: center;
  margin-top: 30px;
}

.overlay a {
  padding: 8px;
  text-decoration: none;
  font-size: 36px;
  color: #818181;
  display: block;
  transition: 0.3s;
}

.overlay a:hover, .overlay a:focus {
  color: #f1f1f1;
}

.overlay .closebtn {
  position: absolute;
  top: 20px;
  right: 45px;
  font-size: 60px;
}

@media screen and (max-height: 450px) {
  .overlay a {font-size: 20px}
  .overlay .closebtn {
  font-size: 40px;
  top: 15px;
  right: 35px;
  }
}
</style>
</head>
<body>

<div id="myNav" >
  <a href="javascript:void(0)"  onclick="closeNav()">&times;</a>
  <div >
    <a href="#">About</a>
    <a href="#">Services</a>
    <a href="#">Clients</a>
    <a href="#">Contact</a>
  </div>
</div>

<h2>Fullscreen Overlay Nav Example</h2>
<p>Click on the element below to open the fullscreen overlay navigation menu.</p>
<p>In this example, the navigation menu will slide in, from left to right:</p>
<span style="font-size:30px;cursor:pointer" onclick="openNav()">&#9776; open</span>

<script>
function openNav() {
  document.getElementById("myNav").style.width = "100%";
}

function closeNav() {
  document.getElementById("myNav").style.width = "0%";
}
</script>
     
</body>
</html>

CodePudding user response：

Okay I'll just try answering your questions one after the other

The <a> elements after the .overlay-content element are the links in the sidebar.
javascript:void(0) specifies to the browser that the link shouldn't redirect to any page or reload the current page. This is because the link is used for a particular function (opening and closing the sidebar). However, this isn't semantic. Use a <button> element if you want to perform a click action.
@media screen and (max-height: 450px) is a breakpoint that contains rules that meet the condition (from 0px height to 450px height). Hence, all the rules here only apply when the screen height is 450px or less.

CodePudding user response：

@media screen and (max-height: 450px) applies the specified condition only when the browser window is 450 px