Pure CSS Drawer Menu

Size
2,472 Kb
Views
14,168

How do I make an pure css drawer menu?

What is a pure css drawer menu? How do you make a pure css drawer menu? This script and codes were developed by Keisuke Takahashi on 10 January 2023, Tuesday.

Pure CSS Drawer Menu Previews

Pure CSS Drawer Menu - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Pure CSS Drawer Menu</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <input type="checkbox" id="on">
<label for="on">≡</label>
<nav>	<ul>	<li><a href="">Drawer</a></li>	<li><a href="">nav</a></li>	<li><a href="">is</a></li>	<li><a href="">here.</a></li>	<li><a href="">If</a></li>	<li><a href="">you</a></li>	<li><a href="">have</a></li>	<li><a href="">a lot of</a></li>	<li><a href="">menu items,</a></li>	<li><a href="">You</a></li>	<li><a href="">can</a></li>	<li><a href="">scroll this.</a></li>	</ul>
</nav>
<div class="wrap">	<article>	<h1>Pure CSS Drawer Menu.</h1>	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa, tempora, vitae, consequuntur repellat qui enim aut cum ea harum at quibusdam ex facere voluptatem nobis quam quo itaque possimus impedit!</p>	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi, illo autem neque quia nihil deserunt et numquam suscipit delectus necessitatibus corporis impedit molestiae quae animi temporibus dolores provident architecto sequi.</p>	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente, quia, neque, voluptates, pariatur corporis maiores voluptas necessitatibus impedit sit saepe provident error perferendis rem nihil at mollitia quo optio maxime.</p>	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit, necessitatibus earum tempore ipsa dolores vero eum iure officiis? Eveniet, magnam, ab ipsam perferendis ullam error sunt dolor labore voluptas commodi.</p>	</article>
</div>
</body>
</html>

Pure CSS Drawer Menu - Script Codes CSS Codes

body,html {	margin:0;	padding:0;
}
body {	background:#030;	overflow-x:hidden;	-webkit-perspective: 1600px;	perspective: 1600px;
}
#on {	position:absolute;	clip:rect(0,0,0,0);
}
label {	display:block;	position:fixed;	left:0;	top:0;	width:1em;	height:1em;	padding:0.2em;	cursor:pointer;	font-size:2em;	text-align: center;	line-height:1;	color:#000;	-webkit-transition:0.2s;	transition:0.2s;
}
label:hover {	color:#090;
}
#on:checked {	text-shadow:0 0 0.5em;
}
#on:checked ~ label {	color:#3c3;	text-shadow:	0 0 0.1em,	0 0 0.2em,	0 0 0.3em,	0 0 0.4em;
}
.wrap {	margin-left:3em;	padding:2em 2em 10em 2em;	background:rgba(0,0,0,0.5);	color:#9c9;	-webkit-transition:0.4s;	transition:0.4s;	-webkit-transform-origin: right top 0;	transform-origin: right top 0;
}
p {	margin-bottom:3em;	color: #336633;
}
nav ul {	margin:0 0 5em 0;	padding:0;	list-style:none;
}
nav li {	margin:0;	padding:0;
}
nav a:hover { background: rgba(0, 100, 0, 0.9); color: #0c0;
}
nav a { background: rgba(20, 255, 20, 0.9); color: #000; display: block; margin: 4px 0; padding: 0.8em 0; text-align: center; text-decoration: none;	-webkit-transition:0.2s;	transition:0.2s;
}
nav { display: block; margin: 3em 0 0; max-height: 90%; overflow-y: scroll; position: fixed; width: 50%;	-webkit-transform:translateX(-100%);	transform:translateX(-100%);	-webkit-transition:0.4s;	transition:0.4s;
}
#on:checked ~ nav {	-webkit-transform:translateX(4%);	transform:translateX(4%);
}
#on:checked ~ .wrap {	-webkit-transform:translateX(50%);	transform:translateX(50%);	/*	-webkit-transform:rotateY(-65deg);	transform:rotateY(-65deg);	*/
}
Pure CSS Drawer Menu - Script Codes
Pure CSS Drawer Menu - Script Codes
Home Page Home
Developer Keisuke Takahashi
Username ksksoft
Uploaded January 10, 2023
Rating 3
Size 2,472 Kb
Views 14,168
Do you need developer help for Pure CSS Drawer Menu?

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!

Keisuke Takahashi (ksksoft) Script Codes
Create amazing Facebook ads 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!