<input class="toggler" type="checkbox" id="title1">
    <input class="toggler" type="checkbox" id="title2">
    <input class="toggler" type="checkbox" id="title3">
    <div class="header">
      <h1 class="HeaderTitle">Heading</h1>
      <nav class="navigation">
        <ul class="mainmenu">
          <li class="has-sub"><label class="toggle toggle1" for="title1">Title1 <small>(Click Me)</small></label>
            <ul class="submenu">
              <li><span>SubTitle1</span></li>
              <li><span>SubTitle2</span></li>
              <li><span>SubTitle3</span></li>
            </ul>
          </li>
          <li class="has-sub"><label class="toggle toggle2" for="title2">Title2 <small>(Click Me)</small></label>
            <ul class="submenu">
              <li><span>SubTitle1</span></li>
              <li><span>SubTitle2</span></li>
              <li><span>SubTitle3</span></li>
            </ul>
          </li>
          <li class="has-sub"><label class="toggle toggle3" for="title3">Title3 <small>(Click Me)</small></label>
            <ul class="submenu">
              <li><span>SubTitle1</span></li>
              <li><span>SubTitle2</span></li>
              <li><span>SubTitle3</span></li>
            </ul>
          </li>
        </ul>
      </nav>
    </div>

html {
  box-sizing: border-box;
}
*,
*:before,
*:after {
  box-sizing: inherit;
}
body {
  margin: 0;
  padding: 10px;
}
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
    Arial, sans-serif;
}
ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
p {
  margin: 0;
}
.header {
  --width: calc(50% - 10px);
  --width2: calc(100% - 10px);
  max-width: 1280px;
  margin: auto;
}
.toggler {
  position: fixed; /*Stop jump*/
  height: 0;
  width: 0;
  border: none;
  overflow: hidden;
  z-index: -1;
}
.HeaderTitle {
  margin: 0 0 2rem;
  border: 1px solid #000;
  padding: 10px;
  background: #ccc;
  width: var(--width);
  transition: 0.5s ease;
}
.toggle {
  display: block;
  padding: 10px;
  border: 1px solid #000;
  font-size: 2rem;
  width: var(--width);
  min-height: 4rem;
  background: #f9f9f9;
  margin: 0 0 1rem;
}
.toggle small {
  font-size: 1rem;
}
.toggle:focus,
.toggle:hover {
  background: #eee;
}
li.has-sub {
  display: flex;
  align-items: flex-start;
  position: relative;
}
.submenu {
  width: var(--width);
  margin-left: 10px;
}
.submenu li {
  display: block;
  padding: 10px;
  border: 1px solid #000;
  margin: 0 0 1rem;
  min-height: 4rem;
}
.submenu li:last-child {
  margin-bottom: 2rem;
}
.submenu {
  position: absolute;
  left: -100vw;
  top: 0;
  opacity: 0;
  transition: left 0s, opacity 2.3s ease;
}

.toggler:checked ~ .header .HeaderTitle {
  width: var(--width2);
}
#title1:checked ~ .header .toggle1 + .submenu,
#title2:checked ~ .header .toggle2 + .submenu,
#title3:checked ~ .header .toggle3 + .submenu {
  width: var(--width);
  position: static;
  opacity: 1;
}

#title1:checked ~ .header .toggle1,
#title2:checked ~ .header .toggle2,
#title3:checked ~ .header .toggle3 {
  background: #ccc;
}
#title1:focus ~ .header .toggle1,
#title2:focus ~ .header .toggle2,
#title3:focus ~ .header .toggle3 {
  background: #ccc;
}