Snap Builder HTML5 CSS3 Free Public Codes Library


<!doctype html>
<html>
<head>
<title>Pure HTML5 CSS3 Simple Drawer Menu Navigation</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<style>
/* Begin Pure HTML5 CSS3 Simple Drawer 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:#2f2f2f;
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 item */
#drawer ul {
list-style-type:none;
}
#drawer ul a {
display:block;
padding:10px;
color:#c7c7c7;
text-decoration:none;
}
#drawer ul a:hover {
color:white;
}
/* 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>
<li><a href="#">Menu Item</a></li>
<li><a href="#">Menu Item</a></li>
<li><a href="#">Menu Item</a></li>
<li><a href="#">Menu Item</a></li>
</ul>
</nav>

<div id="page-content">

<h3>Pure CSS3 Drawer Menu Navigation</h3>
<br />
<p>Simply click on the drawer toggle at the top of the page (next to logo) for an example of the drawer menu opening effect.</p>
<br />
<p>This is a complete website template ready for your additions.</p>

<br /><br />
<div id="link">
[ This code example from <a href="http://snapbuilder.com/code_snippets/copy_code_snippet_212.html">Pure HTML5 CSS3 Simple Drawer Menu Navigation Code Snippet</a> page. ]
</div>

</div>
</body>
</html>
Code Snippet </> Info
