Toggle Nav DropDown

Toggle-able drop down for a nav element to use in responsive websites!

by Nate

HTML

<input type="checkbox" id="menuCheckBox" />
<label id="menuBox" for="menuCheckBox">Click Me!</label>

<nav>
  <div class="pages">
    <a href="index.html" class="active">home</a>
    <a href="about.html">about</a>
    <a href="blog.html">blog</a>
  </div>
  <hr id="navDiv" />
  <div class="contact">
    <a href="https://github.com/nathanblair" target="_blank">
      <img class="contact-icon" src="_res/icons/github.png" alt="X">
    </a>
    <a href="https://facebook.com/TheGr8Nate" target="_blank">
      <img class="contact-icon" src="_res/icons/facebook.png" alt="X">
    </a>
    <a href="https://linked.com/in/engineerblair/" target="_blank">
      <img class="contact-icon" src="_res/icons/linkedin.png" alt="X">
    </a>
  </div>
</nav>

CSS

body {
  height: 100%;
  width: 100%;
  padding: 0;
  margin: 0;
}

/*Hide the checkbox graphic*/
#menuCheckBox {
  display: none;
}

/*Settings for the checkbox label*/
#menuBox {
  background-color: white;
  text-align: center;
  
  display: block;
  z-index: 5;
  /* background-image: url('../_res/icons/menu.png'); */
  background-size: 48px;
  background-repeat: no-repeat;
  background-position-x: center;
  background-position-y: center;
  height: 50px;
  padding: 8px 0;
}

/*Hide the nav menu until the toggle is activated*/
nav {
  display: none;
  width: 100%;
  overflow: hidden;
}

/*Make the links look like they're used for page navigation*/
nav a {
  box-sizing: border-box;
  border: solid 1px;
  text-decoration: none;
  display: block;
  text-align: center;
}

/*Settings for site page navigation links - adjust to your liking*/
.pages a {
  padding: 0.5em 0;
}

/*Settings for contact icon links - keep display settings, adjust anything else*/
.contact a {
  display: flex;
  justify-content: center;
  padding: 0.5em 0;
}

/*Display the nav element properly if the toggle is activated*/
#menuCheckBox:checked ~ nav {
  display: inline-block;
  z-index: 5;
  position: absolute;
}

/*Nominally change the background image of the toggle label to something else*/
#menuCheckBox:checked ~ #menuBox {
  /* background-image: url('../_res/icons/close.png'); */
}