Çözüldü Açılan menü için HTML'i sınırlandırma

<label>
    <input type="checkbox">
    <span class="menu"> <span class="hamburger"></span> </span>
    <ul>
      <li><a href="#" class="a">Home</a></li>
      <li><a href="#" class="b">About</a></li>
      <li><a href="#" class="c">Contact</a></li>
    </ul>
  </label>

*, *:before, *:after
        { box-sizing: border-box; }

        label .menu {
          position: absolute;
          left: -100px;
          top: -100px;
          z-index: 100;
          width: 200px;
          height: 200px;
          background: #282E34;
          border-radius: 50% 50% 50% 50%;
          -webkit-transition: .5s ease-in-out;
          transition: .5s ease-in-out;
          box-shadow: 0 0 0 0 #282E34, 0 0 0 0 #282E34;
          cursor: pointer;
          user-select: none;
        }

        label .hamburger {
          position: absolute;
          top: 135px;
          right: 50px;
          width: 30px;
          height: 3px;
          background: white;
          display: block;
          -webkit-transform-origin: center;
          transform-origin: center;
          -webkit-transition: .5s ease-in-out;
          transition: .5s ease-in-out;
          user-select: none;
        }

        label .hamburger:after, label .hamburger:before {
          -webkit-transition: .5s ease-in-out;
          transition: .5s ease-in-out;
          content: "";
          position: absolute;
          display: block;
          width: 100%;
          height: 100%;
          background: white;
          user-select: none;
        }

        label .hamburger:before { top: -10px; }

        label .hamburger:after { bottom: -10px; }

        label input { display: none; }

        label input:checked + .menu {
          box-shadow: 0 0 0 100vw #282E34, 0 0 0 100vh #282E34;
          border-radius: 0;
         
        }

        label input:checked + .menu .hamburger {
          -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
         
        }

        label input:checked + .menu .hamburger:after {
          -webkit-transform: rotate(90deg);
          transform: rotate(90deg);
          bottom: 0;
         
        }

        label input:checked + .menu .hamburger:before {
          -webkit-transform: rotate(90deg);
          transform: rotate(90deg);
          top: 0;
         
        }

        label input:checked + .menu + ul { opacity: 1; }

        label ul {
          font-size: 50px;
          z-index: 200;
          position: absolute;
          top: 50%;
          left: 50%;
          -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
          opacity: 0;
          -webkit-transition: .25s 0s ease-in-out;
          transition: .25s 0s ease-in-out;
          list-style: none;
        }

        label a {
          margin-bottom: 1em;
          display: block;
          color: White;
          text-decoration: none;
         
        }

       
h1 {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  width: 80%;
  text-align: center;
}

        body, html {
        height: 100%;
        margin: 0;
        font: 400 15px/1.8 "Lato", sans-serif;
        color: #777;
        }

        .bgimg-1, .bgimg-2, .bgimg-3 {
        position: relative;
        opacity: 0.65;
        background-attachment: fixed;
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;

        }
        .bgimg-1 {
        background-image: url("messi.jpg");
        min-height: 100%;
        }

        .bgimg-2 {
        background-image: url("messi2.jpg");
        min-height: 400px;
        }

        .bgimg-3 {
        background-image: url("messi3.jpg");
        min-height: 400px;
        }

        .caption {
        position: absolute;
        left: 0;
        top: 50%;
        width: 100%;
        text-align: center;
        color: #000;
        }

        .caption span.border {
        background-color: #111;
        color: #fff;
        padding: 18px;
        font-size: 25px;
        letter-spacing: 10px;
        }