Skip to content

Instantly share code, notes, and snippets.

@MaxySpark
Created January 20, 2017 16:16
Show Gist options
  • Select an option

  • Save MaxySpark/4cd8bde10d456ba6ba28f9e3e2199edc to your computer and use it in GitHub Desktop.

Select an option

Save MaxySpark/4cd8bde10d456ba6ba28f9e3e2199edc to your computer and use it in GitHub Desktop.
Slideoutjs Shortcut
.slideout-menu {
position: fixed;
left: 0;
top: 0;
bottom: 0;
right: 0;
z-index: 0;
width: 256px;
/*overflow-y: scroll;*/
-webkit-overflow-scrolling: touch;
display: none;
}
.slideout-panel {
position: relative;
z-index: 1;
will-change: transform;
}
.slideout-open,
.slideout-open body,
.slideout-open .slideout-panel {
overflow: hidden;
}
.slideout-open .slideout-menu {
display: block;
}
/*slideout style*/
.menu {
background-color: #1D1F20;
background-image: linear-gradient(145deg, #1D1F20, #404348);
text-align: center;
}
a {
text-decoration: none;
}
.menu a {
color: #fff;
}
.menu a:hover {
text-decoration: underline;
}
.menu-section {
margin: 25px 0;
}
.menu-section-title {
text-transform: uppercase;
color: #85888d;
font-weight: 200;
font-size: 2em;
letter-spacing: 1px;
padding: 0 20px;
margin:0;
}
.menu-section-list {
padding:0;
margin: 10px 0;
list-style:none;
}
.menu-section-list a {
font-size: 1.5em;
display: block;
padding: 10px 20px;
font-family: "Arial Black";
}
.menu-section-list a:hover {
background-color: rgba(255, 255, 255, 0.1);
text-decoration: none;
}
<nav id="menu" class="menu">
<section class="menu-section">
<h3 class="menu-section-title">OPTIONS</h3>
<hr>
<ul class="menu-section-list">
<li><a href="#">PROFILE</a></li>
<li><a href="#">CONTACT</a></li>
<li><a href="#">SHARE</a></li>
<li><a href="#">SETTINGS</a></li>
</ul>
</section>
</nav>
var slideout = new Slideout({
'panel': document.getElementById('panel'),
'menu': document.getElementById('menu'),
'padding': 256,
'tolerance': 70
});
// Toggle button
document.querySelector('.toggle-button').addEventListener('click', function() {
slideout.toggle();
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment