<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Dancing+Script">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto">
    <div class="container">
      <div class="menu-toggle" data-js="menu-toggle">
        <span class="menu-toggle-grippy">Toggle</span>
        <span class="menu-toggle-label">Menu</span>
    <section class="banner" role="banner">
      <h1>Hello there</h1>
      <h2>This is an experimental CodePen which utilises an absolutely positioned hidden panel which can be triggered by clicking a toggle.</h2>
    <div class="hidden-panel">
      <span class="hidden-panel-close" data-js="hidden-panel-close">Close</span>
      <div class="hidden-panel-content">
        <nav class="hidden-panel-nav">
          <h3>Quick Look</h3>
            <li><a href="#" title="Home">Home</a></li>
            <li><a href="#" title="About">About</a></li>
            <li><a href="#" title="Blog">Blog</a></li>
            <li><a href="#" title="Work">Work</a></li>
            <li><a href="#" title="Contact">Contact</a></li>
        <div class="hidden-panel-text">
          <p>This is an experimental CodePen which utilises an absolutely positioned hidden panel which can be triggered by clicking a toggle.</p>
        <div class="hidden-panel-credits">
          <span>Coded by <a href="https://twitter.com/darrenhuskie" title="Darren Huskie">Darren Huskie</a>.</span>
          <span>Powered by <a href="#" title="some framework">some framework</a>.</span>
          <span>Hosted by a <a href="#" title="web host">web host</a>.</span>

  color: #878787
  font-family: Roboto, sans-serif
  left: 0
  line-height: 1.35
  margin: 0
  overflow: hidden
  position: relative
  text-rendering: optimizeLegibility
  -webkit-font-smoothing: antialiased
  transition: left 0.3s ease-in-out
    left: -250px

  @extend %cf
  min-height: 1000px

  outline: 0
  text-decoration: none 

h1, h2, h3, h4, h5, h6
  margin: 0
  padding: 0

  @extend %cf
  color: #fff
  padding: 3em 5%
  position: relative
  width: 90%
  z-index: 2

  @extend %cf
  cursor: pointer
  float: right
  font-size: 0.875rem
  transition: all 0.3s ease-in-out
    opacity: 0.5

  border-bottom: 5px solid #fff
  border-top: 5px solid #fff
  float: left
  line-height: 0
  margin-right: 1em
  padding: 5px 0
  text-indent: -999em
  width: 35px
    background: #fff
    content: ''
    display: block
    height: 5px

  float: left
  font-weight: 700
  height: 25px
  letter-spacing: 1px
  line-height: 25px
  text-transform: uppercase

  background: #333
  color: #666
  font-size: 0.875rem
  height: 100%
  position: absolute
  right: -250px
  top: 0
  width: 250px
    color: #999
    transition: color 0.3s ease-out
      color: #fff

  color: #666
  cursor: pointer
  position: absolute
  right: 20px
  top: 3.7em
  transition: color 0.3s ease-in-out
    color: #fff

  padding: 3.65em 10%

  border-bottom: 1px solid #666
  border-bottom: 1px solid rgba(#666, 0.25)
  margin-bottom: 1.5em
  padding-bottom: 1.5em
  text-transform: uppercase
    letter-spacing: 1px
    margin-bottom: 1em
    list-style: none
    font-weight: 600
    margin: 0
    padding: 0
    padding: 0.25em 0

  line-height: 1.5
    margin-bottom: 1.5em
      margin-bottom: 0

  font-size: 12px
  font-size: 0.75rem
  line-height: 1.5
    display: block
    margin-bottom: 0.15em

  background: #f5756c
  background: linear-gradient(#f5756c,#fd5480),#f5756c
  box-sizing: border-box
  height: 100%
  left: 0
  padding: 5em 0
  position: absolute
  text-align: center
  top: 0
  width: 100%
  z-index: 1
    color: #fff
    font-family: 'Dancing Script'
    font-size: 4.375rem
    margin-bottom: 1em
    color: #fff
    font-size: 2rem
    font-weight: 300
    line-height: 1.5
    margin: 0 auto
    width: 50%

%cf:before, %cf:after
  content: ''
  display: table

  clear: both
View Compiled
var menuToggle = document.querySelector('[data-js="menu-toggle"]');

// Remove this setInterval to trigger the open/close manually through the UI
var interval = setInterval(function() {
}, 2000);

// Clear the interval on any click
document.body.addEventListener('click', function () {

menuToggle.addEventListener('click', function () {

var closePanel = document.querySelector('[data-js="hidden-panel-close"]');

closePanel.addEventListener('click', function () {

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. //cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js