Base Code from SatNav

<style>

/* main stuff */

body {
  margin: 0;
  padding: 0;
  border: 0;
  font-family: "Open sans", sans-serif;
  font-size: 16px;
  font-weight: 100;
  color: white;
}

.container {
  width: 100%;
  height: 100%;
  position: relative;
}

/* links */

a {text-decoration:none;
      -webkit-transition: all 0.4s ease;
  transition: all 0.4s ease;
}

/* nav bar styling */

.container form {
  padding: 22px;
  position: fixed;
  height: 100%;
  -webkit-inline-flex;
  display: inline-flex;
  -webkit-flex-direction: column; /* row or column depending on which way you want it */
  -ms-flex-direction: column;
  flex-direction: column;
}

/* nav bar buttons */

.container form input {
  height: 12px;
  margin: 25px 0;
  z-index: 1;
}

/* code for buttons when selected */

#slide1:checked ~ .labels label {
  -webkit-transform: translateY(0%);
  transform: translateY(0%);
}

#slide2:checked ~ .labels label {
  -webkit-transform: translateY(-100%);
  transform: translateY(-100%);
}

#slide3:checked ~ .labels label {
  -webkit-transform: translateY(-200%);
  transform: translateY(-200%);
}

#slide4:checked ~ .labels label {
  -webkit-transform: translateY(-300%);
  transform: translateY(-300%);
}

#slide5:checked ~ .labels label {
  -webkit-transform: translateY(-400%);
  transform: translateY(-400%);
}

/* panels - don't touch this bit  */

.container form .labels {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
}

/* default background colour and transition time for panel movement */

.container form .labels label {
  min-width: 100%;
  min-height: 100%;
  background-color: #2B2B38;
  z-index: 0;
    -webkit-transition: all 0.4s ease;
  transition: all 0.4s ease;
}

/* background colours */

#slide1 {
  background-color: #c0392b;
}

#slide2 {
  background-color:#e6a92e;
}

#slide3 {
  background-color:#36bc9b;
}

#slide4 {
  background-color:#34495e;
}

#slide5 {
  background-color:#3498db;
}

/* styling for content boxes */

.content {
  width: 100%;
  box-sizing: border-box;
  padding: 0 10px;
}


</style>
</head>

<body>
<div class="container">
  <form>
   <input type="radio" id="Slide1" name="slid" checked>
    <input type="radio" name="slid" id="Slide2">
    <input type="radio" name="slid" id="Slide3">
    <input type="radio" name="slid" id="Slide4">
    <input type="radio" name="slid" id="Slide5">

    <div class="labels">

      <label for="Slide1" id="Slide1" class="Slide">
      <div class="content">
slide 1
      </div>
      </label>

      <label for="Slide2" id="Slide2" class="Slide">
      <div class="content">
slide 2
      </div>
      </label>

      <label for="Slide3" id="Slide3" class="Slide">
      <div class="content">
slide 3
      </div>
      </label>

      <label for="Slide4" id="Slide4" class="Slide">
      <div class="content">
slide 4
      </div>
      </label>

       <label for="Slide5" id="Slide5" class="Slide">
      <div class="content">
slide 5
      </div>
      </label>


  </form>
</div>

</body>
</html>