Skip to content

Instantly share code, notes, and snippets.

@pjchender

pjchender/transition-mobile-menu.html

Last active May 1, 2017 14:06
Show Gist options
  • Save pjchender/79c7a02e2d25d9cc28365da1365955cd to your computer and use it in GitHub Desktop.
Save pjchender/79c7a02e2d25d9cc28365da1365955cd to your computer and use it in GitHub Desktop.
Download ZIP
[Flycan][CSS] lightbox, mobile-menu by transition
Raw
transition-mobile-menu.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
<title>Document</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
list-style:none;
}
#menu-control{ position: absolute; opacity: 0; }
header{
height: 40px;
position: fixed;
width: 100%;
height: 40px;
background-color: #fff;
border-bottom: 1px solid #aaa;
}
.hb{
font-size: 0px;
position: absolute;
width: 36px;
height: 36px;
background-color: #ccc;
right: 4px;
top: 2px;
}
.hb:before{
content: '';
position: absolute;
width: 30px;
height: 4px;
background-color: #fff;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
box-shadow: 0px -8px 0px #fff,
0px 8px 0px #fff;
}
#menu-control:checked ~ header .hb{
background-color: #666;
}
nav{
width: 200px;
position: fixed;
height: calc( 100vh - 41px );
background-color: #000;
left: -200px;
top: 41px;
transition: .5s cubic-bezier(.63,.22,.74,1.71);
}
#menu-control:checked ~ nav{ left: 0; }
nav a{
display: block;
padding: 10px 20px;
background-color: #000;
color: #fff;
border-bottom: 1px solid #fff;
}
</style>
</head>
<body>
<input type="checkbox" name="" id="menu-control">
<header>
<label class="hb" for="menu-control">
展開選單
</label>
</header>
<nav>
<a href="#">link</a>
<a href="#">link</a>
<a href="#">link</a>
<a href="#">link</a>
<a href="#">link</a>
<a href="#">link</a>
<a href="#">link</a>
<a href="#">link</a>
<a href="#">link</a>
<a href="#">link</a>
</nav>
</body>
</html>
Raw
transition_lighbox.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
list-style:none;
}
.lightbox{
width: 100%;
height: 100%;
background-color: rgba(0,0,0,.3);
position: fixed;
top: 0;
left: -100%;
z-index: 10000;
opacity: 0;
/*transition:opacity 1s;*/
transition:opacity 1s 1s,
left 0s 2s;
}
#box:checked ~ .lightbox{
left: 0;
opacity: 1;
transition:opacity 1s;
}
.white{
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
width: 500px;
height: 400px;
background-color: #fff;
opacity: 0;
transition:opacity 1s;
}
#box:checked ~ .lightbox .white{
opacity: 1;
transition:opacity 1s 1s;
}
.white label{
display: block;
position: absolute;
width: 30px;
height: 30px;
background-color: #000;
color: #fff;
right: -15px;
top: -15px;
border-radius: 50%;
text-align: center;
line-height: 30px;
cursor: pointer;
}
</style>
</head>
<body>
<input type="checkbox" name="" id="box">
<label for="box">open</label>
content................
<div class="lightbox">
<div class="white">
<label for="box">X</label>
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment