Cool Hidden Drawer

Developer
Matt Litherland
Size
4,754 Kb
Views
52,624
  1. Cool Hidden Drawer Previews
  2. Cool Hidden Drawer HTML Codes
  3. Cool Hidden Drawer CSS Codes
  4. Cool Hidden Drawer JS Codes

How do I make an cool hidden drawer?

3d animated hidden drawer that is replacing a dropdown menu on a current project of mine!. What is a cool hidden drawer? How do you make a cool hidden drawer? This script and codes were developed by Matt Litherland on 03 August 2022, Wednesday.

Cool Hidden Drawer Previews
IQ Test

Cool Hidden Drawer - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Cool Hidden Drawer</title> <script src="http://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel='stylesheet prefetch' href='http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css'>
<link rel='stylesheet prefetch' href='css/abdtf.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <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> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Cool Hidden Drawer - Script Codes CSS Codes

*, *: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;
}
.center { text-align: center !important;
}
a { margin-top: 0;
}
a:hover { color: white; text-decoration: none;
}
.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;
}
header a.open { color: #fff; width: auto; height: auto; font-weight: bold; line-height: 18px; padding: 12px 12px; background: #61bdf1; box-shadow: inset 0px -2px 0px #1395de; 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-out .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;
}
.drawer-out.opencan { height: 300px;
}
.drawer-out.opencan .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; width: 100%;
}
footer { float: left; clear: both; width: 100%; height: 120px; text-align: center; background: #333;
}
p { font-size: 16px; opacity: 1;
}

Cool Hidden Drawer - Script Codes JS Codes

$("a").click(function (event) { event.preventDefault(); $(".drawer-out").toggleClass("opencan");
});
Cool Hidden Drawer - Script Codes
Cool Hidden Drawer - Script Codes
Home Page Home
Developer Matt Litherland
Username mattsince87
Uploaded August 03, 2022
Rating 4.5
Size 4,754 Kb
Views 52,624
Do you need developer help for Cool Hidden Drawer?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Matt Litherland (mattsince87) Script Codes
Name
SVG Firework Animation
Responsive Flat UI Kit
Ultimate Pop-Out Menu
Node Waves
Share Your Profile
Smooth Anchor Scrolling
Animated SVG Path
Wishlist Toggle Button
Animated Resposnive SVG Path
Google Inspired CSS Preloader
Create amazing art & images with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!