Rez Nav Collapsible

index.html

<input class="nav-toggle" id="nav-toggle" type="checkbox">
<label for="nav-toggle"></label>

<nav class="nav">
  <ul class="nav-items">
    <li class="nav-item-primary">
      <span>Live the RezLife</span>
    </li>
    <ul class="sub-nav-items first">
      <li class="sub-nav-item">Live here in First-Year</li>
      <li class="sub-nav-item">Live on in your Upper-Years</li>
    </ul>
    <li class="nav-item-primary">
      <span>Buildings</span>
    </li>
    <ul class="sub-nav-items">
      <li class="sub-nav-item primary">Buildings Overview</li>
      <li class="sub-nav-item primary">First-Year Buildings</li>
      <ul class="sub-nav-items secondary">
        <li class="sub-nav-item">Delaware Hall</li>
        <li class="sub-nav-item">Elgin Hall</li>
        <li class="sub-nav-item">Essex Hall</li>
        <li class="sub-nav-item">Medway-Sydenham Hall</li>
        <li class="sub-nav-item">Ontario Hall</li>
        <li class="sub-nav-item">Perth Hall</li>
        <li class="sub-nav-item">Saugeen-Maitland Hall</li>
      </ul>
      <li class="sub-nav-item primary">Upper-Year Buildings</li>
      <ul class="sub-nav-items secondary">
        <li class="sub-nav-item">Alumni House</li>
        <li class="sub-nav-item">London Hall</li>
      </ul>
      <li class="sub-nav-item cta">
        <img src="http://unsplash.it/800/800?image=835" alt="Tour Call to Action image">
        <button class="button cta">Book a tour today</button>
      </li>
    </ul>
    <li class="nav-item-primary">
      <span>Experience</span>
    </li>
    <ul class="sub-nav-items">
      <li class="sub-nav-item">What Our Rez Students Say</li>
      <li class="sub-nav-item">Orientation Week & Programming</li>
      <li class="sub-nav-item">Dining in Residence</li>
      <li class="sub-nav-item">Support & Services</li>
      <li class="sub-nav-item">Student Leadership Opportunities</li>
    </ul>
    <li class="nav-item-primary">
      <span>Applying</span>
    </li>
    <ul class="sub-nav-items">
      <li class="sub-nav-item">Application Process</li>
      <li class="sub-nav-item">Important Dates</li>
      <li class="sub-nav-item">Fees & Payment Plans</li>
    </ul>
    <li class="nav-item-primary">
      <span>Resources</span>
    </li>
    <ul class="sub-nav-items">
      <li class="sub-nav-item">Residence Offerbook</li>
      <li class="sub-nav-item">Residence Contract</li>
      <li class="sub-nav-item">Move-In Guide</li>
      <li class="sub-nav-item">Residence In-Room Guide</li>
      <li class="sub-nav-item">Parents Guide</li>
      <li class="sub-nav-item">International, Exchange & Transfer Student Guide</li>
      <li class="sub-nav-item">Commitment to Diversity</li>
      <li class="sub-nav-item">Forms</li>
    </ul>
    <li class="nav-item-primary">
      <span>Get in Touch</span>
    </li>
    <ul class="sub-nav-items">
      <li class="sub-nav-item">Contact Us</li>
      <li class="sub-nav-item">F.A.Q.</li>
    </ul>
  </ul>
</nav>

<section class="content">
  <header>
    <h1>Residence at Western</h1>
    <div class="nav-banner"></div>
    <div class="header-image">
      <img src="http://unsplash.it/800/800?image=835" alt="Header image">
    </div>
  </header>
  <article>
    <h2>Live the RezLife</h2>
    <p>We choose to go to the moon in this decade and do the other things, not because they are easy, but because they are hard.</p>
  </article>
</section>

rez-nav-collapsible.markdown

Rez Nav Collapsible

A Pen by Mikhail on CodePen.

License.

script.js

var accordion = document.getElementsByClassName("nav-item-primary");

function hideAll(items) {
  for (var i = 0; i < items.length; i++) {
    items[i].nextElementSibling.style.display = "none";
  }
}

for (var i = 0; i < accordion.length; i++) {
  accordion[i].onclick = function() {
    var panel = this.nextElementSibling;
    
    if (panel.style.display === "block") {
      panel.style.display = "none";
    } else {
      hideAll(accordion);
      panel.style.display = "block";
    }
  }
}

style.scss

$western-purple: #4F2683;
$western-grey: #EBEBEB;
$dark-grey: #7f8c8d;
$link: #3678C1;
html,
body {
  max-width: 100%;
  overflow-x: hidden;
}

.nav {
  width: 100vw;
  height: 100%;
  top: 0;
  left: 0;
  position: fixed;
  z-index: 0;
  background-color: $western-grey;
  padding: 3rem 0;
  overflow-y: scroll;
  .nav-items {
    height: 100%;
  }
  .nav-item-primary span {
    color: $western-purple;
    font-weight: 700;
    font-size: 1.5rem;
    width: 90vw;
    margin: 16px 16px 0;
    padding-bottom: 0.5rem;
    border-bottom: 3px solid $western-purple;
    display: inline-block;
  }
  .sub-nav-items {
    display: none;
    width: 90vw;
    margin: 16px 16px;
    list-style: none;
    &.first {
      display: block;
    }
    &.secondary {
      width: 90vw;
      margin: 16px 16px;
      list-style: none;
      display: block;
    }
    .sub-nav-item {
      margin-bottom: 12px;
      color: $link;
      cursor: pointer;
      &.primary {
        font-weight: 600;
        font-size: 1.15rem;
        padding-bottom: 0.5rem;
        margin-top: 0.75rem;
        border-bottom: 1px solid $western-purple;
      }
      &.cta {
        margin: 2rem 0;
        img {
          width: 90vw;
          height: 175px;
          object-fit: cover;
        }
      }
      .button {
        padding: 0.75rem 2rem;
        background: $link;
        border: none;
        border-radius: 5px;
        width: 90vw;
        color: #fff;
        font-size: 1.1rem;
        margin-top: 0.5rem;
      }
    }
  }
}

.content {
  position: relative;
  min-width: 100%;
  min-height: 100%;
  background-color: white;
  margin: auto;
  left: 0;
  z-index: 1;
  padding: 1rem 0;
}

article {
  max-width: 600px;
  margin: auto;
  padding: 0 1rem;
  h2 {
    padding: 1rem 0;
  }
}

header h1 {
  color: $western-purple;
  max-width: 600px;
  margin: auto;
  padding: 0 1rem;
}

header .nav-banner {
  height: 35px;
  background-color: $western-purple;
  margin-top: 0.5rem;
}

.header-image img {
  width: 100%;
  height: 300px;
  object-fit: cover;
}

label[for="nav-toggle"] {
  position: absolute;
  left: 0;
  top: 57px;
  margin-left: 1rem;
  z-index: 2;
  height: 40px;
  width: 120px;
  cursor: pointer;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='86' height='28' viewBox='0 0 86 28'><title>  Artboardburger-menu</title><desc>  Created with Sketch.</desc><g fill='none'><g fill='#ECF0F1'><path d='M8 6L28 6 28 8 8 8 8 6ZM8 12L28 12 28 14 8 14 8 12ZM8 18L28 18 28 20 8 20 8 18Z'/><text font-family='HelveticaNeue-Bold, Helvetica Neue' font-size='16' font-weight='bold'><tspan x='36.2' y='19'>  Menu</tspan></text></g></g></svg>");
  background-size: fit;
  background-repeat: no-repeat;
  outline: 0;
}

.nav-toggle {
  position: absolute;
  clip: rect(0, 0, 0, 0);
}

.nav-toggle + label,
.content {
  transition: left 0.2s;
}

.nav-toggle:checked + label {
  width: 100%;
  background-position: center;
  margin: 0;
  top: 0;
  left: 0;
  background-color: $western-purple;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='86' height='28' viewBox='0 0 86 28'><g fill='none'><g fill='#FFFFFF'><text font-family='HelveticaNeue-Bold, Helvetica Neue' font-size='16' font-weight='bold'><tspan x='20' y='18'>  Close</tspan></text></g></g></svg>");
  background-size: initial;
  outline: 0;
}

.nav-toggle:checked ~ .content {
  left: 100vw;
  overflow: scroll;
}


/* Micro reset */

*,
*:before,
*:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html,
body {
  height: 100%;
  width: 100%;
  font-family: Helvetica, Arial, sans-serif;
}

p {
  margin: 1rem 0;
}