Cool Hidden Drawer
3d animated hidden drawer that is replacing a dropdown menu on a current project of mine!
A Pen by Matt Litherland on CodePen.
<header class="center"> | |
<a class="open" href="#">Open my drawer!</a> | |
</header> | |
<div class="drawer-out"> | |
<div class="drawer"> | |
<div class="container"> | |
<div class="row"> | |
<div class="col-sm-6"> | |
<form role="form"> | |
<legend>Something</legend> | |
<div class="form-group"> | |
<input type="email" class="form-control" placeholder="Enter email"> | |
</div> | |
<div class="form-group"> | |
<input type="password" class="form-control" placeholder="Password"> | |
</div> | |
<button type="submit" class="btn btn-primary">Submit</button> | |
</form> | |
</div> | |
<!-- Social --> | |
<div class="col-sm-6"> | |
<form action=""> | |
<legend>Social</legend> | |
<div class="form-group"> | |
<a href="#" class="zocial-facebook"></a> | |
<a href="#" class="zocial-twitter"></a> | |
<a href="#" class="zocial-googleplus"></a> | |
<a href="#" class="zocial-vimeo"></a> | |
</div> | |
</form> | |
</div> | |
</div> | |
</div> | |
</div> | |
</div> | |
<div class="content center"> | |
<div class="container"> | |
<div class="row"> | |
<div class="col-sm-12"> | |
<h1>Cool CSS3 Animated Drawer</h1> | |
<p class="lead">Click on the button above to show the animated drawer</p> | |
</div> | |
</div> | |
</div> | |
</div> | |
<footer> | |
<div class="container"> | |
<div class="row"> | |
<div class="col-sm-12">Footer</div> | |
</div> | |
</div> | |
</footer> |
$("a").click(function (event) { | |
event.preventDefault(); | |
$(".drawer-out").toggleClass("opencan"); | |
}); |
// Core | |
*, *:before, *:after { | |
-webkit-box-sizing: border-box; | |
-moz-box-sizing: border-box; | |
box-sizing: border-box; | |
} | |
body, html { | |
width: 100%; | |
height: 100%; | |
background: #e0eafd; | |
line-height: 50px; | |
font-size: 14px; | |
color: #92a5bf; | |
text-align: left; | |
font-family: 'Whitney', sans-serif;} | |
// Additional Helper Class | |
.center { | |
text-align: center !important;} | |
// Override Included Pen | |
a { | |
margin-top: 0; | |
&:hover { | |
color: white; | |
text-decoration: none; | |
} | |
} | |
// For Bootstrap | |
.container { | |
padding: 30px 0; | |
text-align: left; | |
} | |
header { | |
float: left; | |
width: 100%; | |
height: 80px; | |
background: #1ba0eb; | |
color: #fff; | |
z-index: 900; | |
padding: 0; | |
text-align: left; | |
a.open { | |
color: #fff; | |
width: auto; | |
height: auto; | |
font-weight: bold; | |
line-height: 18px; | |
padding: 12px 12px; | |
background: lighten(#1ba0eb, 15%); | |
box-shadow: inset 0px -2px 0px darken(#1ba0eb, 4%); | |
border-radius: 5px; | |
text-decoration: none; | |
margin: 18px 0; | |
display: inline-block; | |
} | |
} | |
.drawer-out { | |
float: left; | |
height: 0px; | |
width: 100%; | |
background: #333; | |
overflow: hidden; | |
position: relative; | |
-webkit-transition: all 0.3s ease-in-out; | |
-moz-transition: all 0.3s ease-in-out; | |
transition: all 0.3s ease-in-out; | |
// Drawer | |
.drawer { | |
float: left; | |
width: 100%; | |
height: 300px; | |
background: #fff; | |
opacity: 0; | |
-webkit-transform: perspective(250px) rotateX(90deg); | |
transform: perspective(250px) rotateX(90deg); | |
-webkit-transition: all 0.3s ease-in-out; | |
-moz-transition: all 0.3s ease-in-out; | |
transition: all 0.3s ease-in-out; | |
} | |
&.opencan { | |
height: 300px; | |
// Drawer | |
.drawer { | |
opacity: 1; | |
-webkit-transform-style: preserve-3d; | |
-moz-transform-style: preserve-3d; | |
transform-style: preserve-3d; | |
-webkit-transform: scale(1) perspective(1000px) rotateX(0deg); | |
-webkit-animation: out 0.75s ease forwards; | |
-moz-animation: out 0.75s ease forwards; | |
animation: out 0.75s ease forwards; | |
} | |
} | |
} | |
@-webkit-keyframes out { | |
0% { | |
-webkit-transform: scale(0.8) perspective(1000px) rotateX(90deg); | |
transform: scale(0.8) perspective(1000px) rotateX(90deg); | |
} | |
100% { | |
-webkit-transform: scale(1) perspective(1000px) rotateX(0deg); | |
transform: scale(1) perspective(1000px) rotateX(0deg); | |
} | |
} | |
@-moz-keyframes out { | |
0% { -moz-transform: scale(0.8) perspective(1000px) rotateX(90deg);} | |
100% { -moz-transform: scale(1) perspective(1000px) rotateX(0deg);} | |
} | |
@keyframes out { | |
0% { | |
-webkit-transform: scale(0.8) perspective(1000px) rotateX(90deg); | |
transform: scale(0.8) perspective(1000px) rotateX(90deg); | |
} | |
100% { | |
-webkit-transform: scale(1) perspective(1000px) rotateX(0deg); | |
transform: scale(1) perspective(1000px) rotateX(0deg); | |
} | |
} | |
.content { | |
float: left; | |
clear: both; | |
height: 1400px; // Testing | |
width: 100%;} | |
footer { | |
float: left; | |
clear: both; | |
width: 100%; | |
height: 120px; | |
text-align: center; | |
background: #333;} | |
p { | |
font-size: 16px; | |
opacity: 1;} |