Pure CSS Drawer Menu
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 - 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); */
}
Developer | Keisuke Takahashi |
Username | ksksoft |
Uploaded | January 10, 2023 |
Rating | 3 |
Size | 2,472 Kb |
Views | 14,168 |
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!
Name | Size |
Pure css thumbnails hover | 1,773 Kb |
Real eye with CSS Sfumato | 2,734 Kb |
Pure css Parallax header | 2,143 Kb |
TEMARI Sphere | 2,369 Kb |
Pure CSS candle light animation by One element | 2,193 Kb |
Equalizer | 2,009 Kb |
SVG PIE Chart with CSS animation | 2,107 Kb |
Ladybird Fly Away | 2,629 Kb |
SVG Concentrated Linework | 1,806 Kb |
Box-shadow hexagon mask | 2,196 Kb |
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!
Name | Username | Size |
Beautiful canvas stars | Matths | 2,399 Kb |
Bootstrap Carousel Fade Transition | Rowno | 2,484 Kb |
Count up | Alanshortis | 2,391 Kb |
CSS3 Diamond | Rendro | 1,960 Kb |
A Pen by Final Boss tommyb9 | FBtommyb9 | 55,354 Kb |
Responsive Minimal Blog Layout | Hackthevoid | 5,261 Kb |
A Pen by Dalton Liu | Liudalton | 12,437 Kb |
Wavy Road with Dashes | Jonobr1 | 2,679 Kb |
Airbnb Homepage | SindhujaD | 2,480 Kb |
Flat design iframe | Damienpm | 1,819 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!