Code Snippet </> Info
Snippet Name: Pure CSS3 Simple Drawer Transition Menu Navigation
Description: Add a pure CSS3 simple drawer menu navigation with transitions to your web page. This is a complete website template ready for your content. Example: View Code Demo
Note:
Author: SnapBuilder <snippets@snapbuilder.com>
Last Modified: 2015-03-20 00:20:00
Language: css
Highlight Mode: css
|
Copy Codes: Use Free Notepad ++ |
|
Snap HTML Code Editor: Paste the source code, make changes and instantly see it in live preview. Snap HTML Code Editor
|
|
Copied To Clipboard!
<!doctype html>
<html>
<head>
<title>Pure HTML5 CSS3 Simple Drawer Transition Menu Navigation</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<style>
/* Begin Pure HTML5 CSS3 Simple Drawer Transition Menu Navigation */
/* == This Script Free To Use Providing This Notice Remains == */
/* == This Script Has Been Found In The http://snapbuilder.com Free Public Codes Library == */
BODY {font-family:verdana,arial,ms sans serif; font-size:90%; background-color:#ffffff; color:#000000; text-shadow:0px 1px 1px rgba(0,0,0,0.2);}
a {color:#69C;text-decoration:none;}
a:hover {color:#F60;}
* {
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
-o-box-sizing:border-box;
box-sizing:border-box;
-webkit-transition:.25s ease-in-out;
-moz-transition:.25s ease-in-out;
-o-transition:.25s ease-in-out;
transition:.25s ease-in-out;
margin:0;
padding:0;
-webkit-text-size-adjust:none;
}
/* Let's be sure that everything is set to 100% height */
html,body {
height:100%;
overflow:hidden;
}
/* Let's style the label */
#drawer-toggle {
position:absolute;
opacity:0;
}
#drawer-toggle-label {
-webkit-touch-callout:none;
-webkit-user-select:none;
-khtml-user-select:none;
-moz-user-select:none;
-ms-user-select:none;
user-select:none;
left:0px;
height:50px;
width:50px;
display:block;
position:fixed;
background:rgba(255,255,255,.0);
z-index:1;
}
/* Let's style the menu icon */
#drawer-toggle-label:before {
content:'';
display:block;
position:absolute;
height:2px;
width:24px;
background:#8d8d8d;
left:13px;
top:18px;
box-shadow:0 6px 0 #8d8d8d, 0 12px 0 #8d8d8d;
}
header {
width:100%;
position:fixed;
left:0px;
background:#efefef;
padding:10px 10px 10px 50px;
font-size:30px;
line-height:30px;
z-index:0;
/* bottom border color */
border-bottom:solid 1px #ddd;
/* bottom border shadow - remove or comment out if not wanted */
box-shadow:0 0 6px rgba(0, 0, 0, 0.5);
-moz-box-shadow:0 0 6px rgba(0, 0, 0, 0.5);
-webkit-box-shadow:0 0 6px rgba(0, 0, 0, 0.5);
}
/* Let's style the drawer menu pane */
#drawer {
position:fixed;
top:0;
left:-300px;
height:100%;
width:300px;
background:#eee;
overflow-x:hidden;
overflow-y:scroll;
padding:20px;
-webkit-overflow-scrolling:touch;
}
/* Let's style the page content pane */
#page-content {
margin-left:0px;
margin-top:50px;
width:100%;
height:calc(100% - 50px);
overflow-x:hidden;
overflow-y:scroll;
-webkit-overflow-scrolling:touch;
padding:20px;
}
/* Checked styles (menu open state) */
#drawer-toggle:checked ~ #drawer-toggle-label {
height:100%;
width:calc(100% - 300px);
background:rgba(255,255,255,.8);
}
#drawer-toggle:checked ~ #drawer {
left:0;
}
#drawer-toggle:checked ~ #drawer-toggle-label, #drawer-toggle:checked ~ header {
left:300px;
}
#drawer-toggle:checked ~ #page-content {
margin-left:300px;
}
/* Let's style the menu items with transitions */
#drawer ul {
list-style-type:none;
}
#drawer li a {
background-color:#eee;
width:100px;
padding:5px 15px;
margin-top:7px;
display:block;
text-decoration:none;
color:#333;
font-family:verdana, arial, helvetica, sans-serif;
font-size:12px;
-webkit-border-radius:10px;
-moz-border-radius:10px;
-o-border-radius:10px;
-ms-border-radius:10px;
border-radius:10px;
-webkit-box-shadow:3px 3px 3px rgba(0,0,0,.3);
-moz-box-shadow:3px 3px 3px rgba(0,0,0,.3);
-o-box-shadow:3px 3px 3px rgba(0,0,0,.3);
-ms-box-shadow:3px 3px 3px rgba(0,0,0,.3);
box-shadow:3px 3px 3px rgba(0,0,0,.3);
-webkit-transition:all 0.25s ease;
-moz-transition:all 0.25s ease;
-o-transition:all 0.25s ease;
-ms-transition:all 0.25s ease;
transition:all 0.25s ease;
}
#drawer li a:hover {
background-color:#666;
color:#eee;
-webkit-transform:scale(1.2);
-moz-transform:scale(1.2);
-o-transform:scale(1.2);
-ms-transform:scale(1.2);
transform:scale(1.2);
z-index:2;
margin-left:25px;
}
/* Let's not forget Responsive Media Queries */
@media all and (max-width:350px) {
#drawer-toggle:checked ~ #drawer-toggle-label {
height:100%;
width:50px;
}
#drawer-toggle:checked ~ #drawer-toggle-label, #drawer-toggle:checked ~ header {
left:calc(100% - 50px);
}
#drawer {
width:calc(100% - 50px);
left:-100%;
}
#drawer-toggle:checked ~ #page-content {
margin-left:calc(100% - 50px);
}
}
</style>
</head>
<body>
<input type="checkbox" id="drawer-toggle" name="drawer-toggle"/>
<label for="drawer-toggle" id="drawer-toggle-label"></label>
<header>
<!-- insert your own logo image or use font text -->
<img src="http://snapbuilder.com/images/logo.png">
</header>
<nav id="drawer">
<!-- add as many links that you need -->
<ul class="nav">
<li><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Projects</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</nav>
<div id="page-content">
<h3>Pure CSS3 Drawer Transition Menu Navigation</h3>
<br />
<p>Simply click on the drawer toggle <img src="http://snapbuilder.com/code_snippets/view_code_example/css/menu_and_navigation/images/icon-menu.png"> at the top of the page for an example of the drawer menu opening effect.</p>
<br />
<p>This is a complete website template ready for your additions.</p>
<br />
<p>This drawer menu has a transition menu navigation style.</p>
<br /><br />
<div id="link">
[ This code example from <a href="http://snapbuilder.com/code_snippets/copy_code_snippet_213.html">Pure HTML5 CSS3 Simple Drawer Transition Menu Navigation Code Snippet</a> page. ]
</div>
</div>
</body>
</html>
|