Skip to content

Instantly share code, notes, and snippets.

@Aarbel

Aarbel/dabblet.css

Last active November 24, 2018 18:10
Show Gist options
  • Save Aarbel/9f4dffd8311bdfb53c930820da4f9b2f to your computer and use it in GitHub Desktop.
Save Aarbel/9f4dffd8311bdfb53c930820da4f9b2f to your computer and use it in GitHub Desktop.
Download ZIP
Untitled
Raw
dabblet.css
html {
height: 100%;
font-family: 'Source Sans Pro', sans-serif;
}
body {
background: linear-gradient(90deg, #6bafd2 0%, #a4c8dc 38%, #d6cbca 58%, #eabc96 79%, #db8876 100%);
min-height: 100%;
height: 100%;
position: relative;
display: flex;
flex-direction: column;
}
.absolute-button {
width: 80px;
height: 80px;
position: absolute;
background-color: black;
border-radius: 50%;
bottom: 32px;
left: calc(50% - 32px);
right: auto;
cursor: pointer;
display: flex;
font-size: 16px;
color: white;
justify-content: center;
align-items: center;
user-select: none;
z-index: 2;
}
.absolute-button:active {
background-color: red;
}
.fixed-menu {
right: 0;
left: 0;
top: 0;
bottom: 0;
z-index: 1;
display: flex;
color: white;
font-size: 30px;
justify-content: center;
align-items: center;
transition: opacity, transform;
transition-duration: 0.15s;
position: fixed;
background-color: black;
visibility: hidden;
opacity: 0;
transform: translateY(50vh) scale(0) translateZ(0);
}
.fixed-menu.open {
visibility: visible;
opacity: 1;
transform: translateY(0) scale(1) translateZ(0);
}
.scroll-container {
display: flex;
flex-direction: column;
justify-content: flex-start;
overflow-y: scroll;
margin-bottom: 6px;
flex-basis: 100%;
flex-grow: 1;
flex-shrink: 0;
width: 100%;
height: 100%;
min-height: 100%;
overflow: hidden;
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
}
.item {
width: 100%;
height: 64px;
min-height: 64px;
border-radius: 6px;
background-color: white;
margin-bottom: 12px
}
Raw
dabblet.html
<body>
<div id="absolute-button" class="absolute-button"> MENU </div>
<div id="fixed-menu" class="fixed-menu"> MENU CONTENT </div>
<div class="scroll-container">
<div class="item"> </div>
<div class="item"> </div>
<div class="item"> </div>
<div class="item"> </div>
<div class="item"> </div>
<div class="item"> </div>
<div class="item"> </div>
<div class="item"> </div>
<div class="item"> </div>
<div class="item"> </div>
<div class="item"> </div>
<div class="item"> </div>
<div class="item"> </div>
<div class="item"> </div>
<div class="item"> </div>
<div class="item"> </div>
<div class="item"> </div>
<div class="item"> </div>
<div class="item"> </div>
<div class="item"> </div>
<div class="item"> </div>
<div class="item"> </div>
<div class="item"> </div>
<div class="item"> </div>
<div class="item"> </div>
<div class="item"> </div>
<div class="item"> </div>
<div class="item"> </div>
<div class="item"> </div>
<div class="item"> </div>
<div class="item"> </div>
<div class="item"> </div>
<div class="item"> </div>
<div class="item"> </div>
<div class="item"> </div>
<div class="item"> </div>
<div class="item"> </div>
<div class="item"> </div>
<div class="item"> </div>
<div class="item"> </div>
<div class="item"> </div>
<div class="item"> </div>
<div class="item"> </div>
<div class="item"> </div>
<div class="item"> </div>
<div class="item"> </div>
<div class="item"> </div>
<div class="item"> </div>
<div class="item"> </div>
<div class="item"> </div>
<div class="item"> </div>
<div class="item"> </div>
<div class="item"> </div>
<div class="item"> </div>
<div class="item"> </div>
<div class="item"> </div>
<div class="item"> </div>
<div class="item"> </div>
<div class="item"> </div>
<div class="item"> </div>
<div class="item"> </div>
<div class="item"> </div>
<div class="item"> </div>
<div class="item"> </div>
<div class="item"> </div>
<div class="item"> </div>
<div class="item"> </div>
<div class="item"> </div>
<div class="item"> </div>
<div class="item"> </div>
<div class="item"> </div>
<div class="item"> </div>
<div class="item"> </div>
<div class="item"> </div>
<div class="item"> </div>
<div class="item"> </div>
<div class="item"> </div>
<div class="item"> </div>
<div class="item"> </div>
<div class="item"> </div>
</div>
</body>
Raw
dabblet.js
const button = document.getElementById('absolute-button');
const menu = document.getElementById('fixed-menu');
button.onclick = function(e){
console.log("Button is clicked");
menu.classList.toggle("open");
}
Raw
settings.json
{"view":"split-vertical","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment