Pure CSS drower menu with transition-delay
How do I make an pure css drower menu with transition-delay?
What is a pure css drower menu with transition-delay? How do you make a pure css drower menu with transition-delay? This script and codes were developed by Keisuke Takahashi on 19 November 2022, Saturday.
Pure CSS drower menu with transition-delay - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Pure CSS drower menu with transition-delay</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <input id="cb" type="checkbox" />
<label for="cb">≡</label>
<ul> <li><a href="#">John</a></li> <li><a href="#">Paul</a></li> <li><a href="#">George</a></li> <li><a href="#">Ringo</a></li>
</ul>
</body>
</html>
Pure CSS drower menu with transition-delay - Script Codes CSS Codes
body { background-color: #333; font-size: 2em;
}
ul { list-style: none; padding: 0; margin: 0;
}
li { float: left; -webkit-transform-origin: left top 0; -webkit-transition: 0.4s ease-out; transform-origin: left top 0; transition: 0.4s ease-out;
}
li:nth-of-type(1) { -webkit-transform: translateX(0) rotateX(-90deg); -webkit-transition-delay: 0.6s; transform: translateX(0) rotateX(-90deg); transition-delay: 0.6s;
}
li:nth-of-type(2) { -webkit-transform: translateX(-100%) rotateX(-90deg); -webkit-transition-delay: 0.4s; transform: translateX(-100%) rotateX(-90deg); transition-delay: 0.4s;
}
li:nth-of-type(3) { -webkit-transform: translateX(-200%) rotateX(-90deg); -webkit-transition-delay: 0.3s; transform: translateX(-200%) rotateX(-90deg); transition-delay: 0.3s;
}
li:nth-of-type(4) { -webkit-transform: translateX(-300%) rotateX(-90deg); -webkit-transition-delay: 0.2s; transform: translateX(-300%) rotateX(-90deg); transition-delay: 0.2s;
}
a { color:#888; font-family: Arial; text-align: center; display: block; text-decoration: none; background-color: #000; width: 5em; height: 1em; padding: 2em 0; transition: 0.4s;
}
a:hover { background-color: #555; color:#eee;
}
#cb { position: absolute; clip :rect(0,0,0,0);
}
label { cursor:pointer; color: #0fc; -webkit-transition: 0.4s; transition: 0.4s; margin: 1%; font-size:2em;
}
label:hover { text-shadow:0 0 3px #0fc;
}
#cb:checked + label { color: transparent; text-shadow:0 0 3px #000;
}
#cb:checked ~ ul li { margin-left: 1%; -webkit-transform: translateX(0) rotateX(0); transform: translateX(0) rotateX(0);
}
Developer | Keisuke Takahashi |
Username | ksksoft |
Uploaded | November 19, 2022 |
Rating | 3 |
Size | 1,898 Kb |
Views | 18,216 |
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 |
One div DORAEMON | 2,448 Kb |
Pure CSS Drawer Menu | 2,472 Kb |
Gooey text melt away... | 2,420 Kb |
Box-shadow hexagon mask | 2,196 Kb |
The mount | 3,444 Kb |
CSS Slot Machine | 3,111 Kb |
Pure CSS Slide Panel | 2,463 Kb |
SVG Concentrated Linework | 1,806 Kb |
Ladybird Fly Away | 2,629 Kb |
One Element Conic Gradient | 2,248 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 |
Resize image | Happyhj | 1,892 Kb |
Parallax-ish Sliding Content | Jdsteinbach | 2,748 Kb |
FreeCodeCamp - Simon Game | Ivhed | 8,481 Kb |
Simple Login Form | JoshBlackwood | 4,418 Kb |
Bootstrap Carousel Fade Transition | Rowno | 2,484 Kb |
A Pen by Malith Hettiarachchi | MalZiiirA | 5,531 Kb |
Realistic Buttons | Stoypenny | 2,248 Kb |
Day 1 - Portfolio | Chpecson | 3,532 Kb |
Masonry | Uriuriuriu | 5,005 Kb |
The Rope | Chribbe | 2,886 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!