<html>
<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Dancing+Script">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto">
</head>
<body>
<div class="container">
<header>
<div class="menu-toggle" data-js="menu-toggle">
<span class="menu-toggle-grippy">Toggle</span>
<span class="menu-toggle-label">Menu</span>
</div>
</header>
<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>
</section>
<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>
<ul>
<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>
</ul>
</nav>
<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>
<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>
</div>
</div>
</div>
</div>
</body>
</html>body
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
&.panel-open
left: -250px
.container
@extend %cf
min-height: 1000px
a
outline: 0
text-decoration: none
h1, h2, h3, h4, h5, h6
margin: 0
padding: 0
header
@extend %cf
color: #fff
padding: 3em 5%
position: relative
width: 90%
z-index: 2
.menu-toggle
@extend %cf
cursor: pointer
float: right
font-size: 0.875rem
transition: all 0.3s ease-in-out
&.open
opacity: 0.5
.menu-toggle-grippy
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
&:after
background: #fff
content: ''
display: block
height: 5px
.menu-toggle-label
float: left
font-weight: 700
height: 25px
letter-spacing: 1px
line-height: 25px
text-transform: uppercase
.hidden-panel
background: #333
color: #666
font-size: 0.875rem
height: 100%
position: absolute
right: -250px
top: 0
width: 250px
a
color: #999
transition: color 0.3s ease-out
&:hover
color: #fff
.hidden-panel-close
color: #666
cursor: pointer
position: absolute
right: 20px
top: 3.7em
transition: color 0.3s ease-in-out
&:hover
color: #fff
.hidden-panel-content
padding: 3.65em 10%
.hidden-panel-nav
border-bottom: 1px solid #666
border-bottom: 1px solid rgba(#666, 0.25)
margin-bottom: 1.5em
padding-bottom: 1.5em
text-transform: uppercase
h3
letter-spacing: 1px
margin-bottom: 1em
ul
list-style: none
font-weight: 600
margin: 0
padding: 0
li
padding: 0.25em 0
.hidden-panel-text
line-height: 1.5
p
margin-bottom: 1.5em
&:last-child
margin-bottom: 0
.hidden-panel-credits
font-size: 12px
font-size: 0.75rem
line-height: 1.5
span
display: block
margin-bottom: 0.15em
.banner
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
h1
color: #fff
font-family: 'Dancing Script'
font-size: 4.375rem
margin-bottom: 1em
h2
color: #fff
font-size: 2rem
font-weight: 300
line-height: 1.5
margin: 0 auto
width: 50%
%cf:before, %cf:after
content: ''
display: table
%cf:after
clear: both
var menuToggle = document.querySelector('[data-js="menu-toggle"]');
// Remove this setInterval to trigger the open/close manually through the UI
var interval = setInterval(function() {
menuToggle.click();
}, 2000);
// Clear the interval on any click
document.body.addEventListener('click', function () {
clearInterval(interval);
});
menuToggle.addEventListener('click', function () {
document.body.classList.toggle('panel-open');
menuToggle.classList.toggle('open');
});
var closePanel = document.querySelector('[data-js="hidden-panel-close"]');
closePanel.addEventListener('click', function () {
document.body.classList.remove('panel-open');
menuToggle.classList.remove('open');
});
External CSS
This Pen doesn't use any external CSS resources.