The following is an example of a campus popout used on http://www.harvestchristianfellowship.org/

<div id="sidebar">
  <div class="campuses">
    <div class="mask">
      <cfoutput>
      <div class="campus">
        <h4>Title</h4>
        <!-- Content -->
        <a href="/">Visit Campus Page</a>
      </div>
      <div class="campus">
        <h4>Title</h4>
        <!-- Content -->
        <a href="/">Visit Campus Page</a>
      </div>
      <div class="campus">
        <h4>Title</h4>
        <!-- Content -->
        <a href="/">Visit Campus Page</a>
      </div>
      </cfoutput>
    </div>
  </div>
  <div class="links">
    <div class="link">
      <img src="/images/layouts/A10910/pin.png"/><br/>
      Campuses
    </div>
    <a href="/" target="_blank" class="link">
      <img src="/images/layouts/A10910/key.png"/><br/>
      Login
    </a>
  </div>
</div>

#sidebar {
  position: fixed;
  left: 0;
  top: 120px;
  background: #222222;
  z-index: 201;
  overflow: hidden;
}

#sidebar .campuses, 
#sidebar .links {
  float: left;
}

#sidebar .campuses {
  position: relative;
  width: 0px;
  height: 166px;
  color: #b5b5b5;
  overflow: hidden;
  transition: 0.5s ease-in-out;
}

#sidebar.active .campuses {
  width: 630px;
}

#sidebar .mask {
  position: absolute;
  width: 630px;
  overflow: hidden;
}

#sidebar .campus {
  padding: 20px;
  float: left;
  font-size: 12px;
  line-height: 20px;
  color: #fff;
}

#sidebar .campus h4 {
  margin: 0;  
  font-size: 15px;
  line-height: 20px;
  color: #fff;
  text-transform: uppercase;      
}

#sidebar .campus a {
  font-size: 11px;
  line-height: 20px;
  color: #c79746;
  font-weight: bold;
  text-transform: uppercase;
}

#sidebar .link {
  padding: 16px 9px 16px;
  text-align: center;
  font-weight: bold;
  color: #b5b5b5;
  display: block;
}

#sidebar .link:hover {
  cursor: pointer;
}

#sidebar .link img {
  margin: 0 0 5px;
}

$("sidebar").select(".link")[0].on("click", function(event,element){
  $("sidebar").toggleClassName("active")
});
$(document).on("scroll", function() {
  scrolled = document.viewport.getScrollOffsets().top;
  if ($("sidebar").hasClassName("active") && scrolled > 200){
    $("sidebar").removeClassName("active")
  }
});