Skip to content

Instantly share code, notes, and snippets.

@p-baleine

p-baleine/hoge.html

Last active May 12, 2020 14:43
Show Gist options
  • Save p-baleine/c3e94b27e4abc7495a129509e5964060 to your computer and use it in GitHub Desktop.
Save p-baleine/c3e94b27e4abc7495a129509e5964060 to your computer and use it in GitHub Desktop.
Download ZIP
「早くタップすると逆になっちゃうやつ」の解決案、あと玲音
Raw
hoge.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<style>
html {
font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji;
font-size: 32px;
}
body {
margin: 0;
}
ul, li {
list-style: none;
margin: 0;
padding: 0;
}
#main {
background-image: url(https://i.redd.it/dx9832bz1s811.png);
width: 100vw;
height: 100vh;
}
#header {
position: fixed;
top: 0;
left: 0;
height: calc(3.5rem + 1px);
width: 100vw;
display: flex;
background-color: #fff;
border-bottom: 1px solid #808080;
text-align: center;
}
#menu {
display: inline-flex;
font-size: 2rem;
padding: 0.75rem 1rem;
cursor: pointer;
}
#title {
display: inline-flex;
font-size: 1.2rem;
padding: 0.75rem 0;
width: 100%;
text-align: center;
}
#title span {
width: 100%;
margin-left: -1rem;
}
#navbar {
position: absolute;
left: 0;
top: calc(3.5rem + 2px);
background-color: #fff;
width: 50vw;
height: 100vh;
transform: translateX(-50vw);
transition: .45s transform;
}
#navbar.show {
transform: translateX(0);
}
#overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100vh;
background: #fff;
opacity: 0;
transition: .45s opacity;
}
#overlay.show {
opacity: 0.3;
}
.navbar-item {
font-size: 1.2rem;
border-bottom: 1px solid #808080;
padding: 1rem 1rem;
line-height: 1.5rem;
}
</style>
<script
src="https://code.jquery.com/jquery-3.5.1.min.js"
integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="
crossorigin="anonymous"></script>
</head>
<body>
<div id="overlay"></div>
<div id="header">
<span id="menu" class="material-icons">
menu
</span>
<div id="title">
<span>早くタップすると逆になっちゃうやつ</span>
</div>
</div>
<div id="main"></div>
<div id="navbar">
<ul>
<li class="navbar-item">レイン</li>
<li class="navbar-item">玲音</li>
<li class="navbar-item">れいん</li>
</ul>
</div>
<script>
$(() => {
$('#menu').click(() => $('#navbar,#overlay').toggleClass('show'));
});
</script>
</body>
</html>
@p-baleine
Copy link
Author

hogera

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment