CSS Push menu
How do I make an css push menu?
Yet another CSS only push menu. When the menu is open, the label gets a 100% width and height to close the menu again when the user clicks on the screen. . What is a css push menu? How do you make a css push menu? This script and codes were developed by Pimskie on 13 June 2022, Monday.
CSS Push menu - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>CSS Push menu</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <input type="checkbox" class="toggle-menu" id="toggle-menu" />
<label for="toggle-menu" class="toggle__label transition-slide"> <div class="toggle__label__button"> <div class="line"></div> </div>
</label>
<nav role='navigation' class="nav transition-slide"> <ul class="nav__list"> <li class="nav__item"><a href="#" class="nav__link">Home</a></li> <li class="nav__item"><a href="#" class="nav__link">About</a></li> <li class="nav__item"><a href="#" class="nav__link">Clients</a></li> <li class="nav__item"><a href="#" class="nav__link">Contact Us</a></li> </ul>
</nav>
<main class="transition-slide"> <h1>CSS push menu</h1> <p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts.</p>
<p>Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean.</p>
<p>A small river named Duden flows by their place and supplies it with the necessary regelialia. It is a paradisematic country, in which roasted parts of sentences fly into your mouth.</p>
<p>Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic life One day however a small line of blind text by the name of Lorem Ipsum decided to leave for the far World of Grammar.</p>
<p>The Big Oxmox advised her not to do so, because there were thousands of bad Commas, wild Question Marks and devious Semikoli, but the Little Blind Text didn’t listen.</p>
<p>She packed her seven versalia, put her initial into the belt and made herself on the way.</p>
</main>
</body>
</html>
CSS Push menu - Script Codes CSS Codes
@import url(http://fonts.googleapis.com/css?family=Roboto:400,300);
* { box-sizing: border-box;
}
html, body { font-family: 'Roboto', sans-serif; margin: 0; padding: 0;
}
body { overflow-x: hidden; background: #0c647e; color: #fff;
}
h1 { text-transform: uppercase; border-bottom: 1px solid #fff; text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.6); box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.6);
}
.nav { position: absolute; z-index: 10; top: 0; width: 250px; height: 100%; background: #000; -webkit-transform: translateX(-100%); -moz-transform: translateX(-100%); -ms-transform: translateX(-100%); -o-transform: translateX(-100%); transform: translateX(-100%);
}
.nav__list { margin: 0; padding: 0; list-style-type: none;
}
.nav__item { border-bottom: 1px solid #333333;
}
.nav__link { position: relative; display: block; color: #fff; text-decoration: none; padding: .7em 1em;
}
.nav__link:after { position: absolute; left: 50%; bottom: 0; height: 2px; width: 0%; background: #1da5ce; content: ""; -webkit-transition: left 0.15s ease-out, width 0.2s ease-out; -moz-transition: left 0.15s ease-out, width 0.2s ease-out; transition: left 0.15s ease-out, width 0.2s ease-out;
}
.nav__link:hover:after, .nav__link.active:after { left: 0%; width: 100%;
}
main { padding: 3em 3.3em;
}
header { width: 100%; padding: .7em 1em; background: #000;
}
.toggle__label { position: absolute; top: 0; left: 0;
}
.toggle__label__button { display: inline-block; background: #000; cursor: pointer; padding: .5em;
}
.toggle__label__button .line { position: relative; width: 30px; height: 27px; border-top: 0.2em solid #fff;
}
.toggle__label__button .line:before, .toggle__label__button .line:after { position: absolute; width: 100%; height: 0.2em; margin-top: -0.2em; display: inline-block; background: #fff; content: "";
}
.toggle__label__button .line:before { top: 50%;
}
.toggle__label__button .line:after { top: 100%;
}
.toggle-menu { display: none;
}
.toggle-menu:checked ~ .toggle__label { -webkit-transform: translateX(250px); -moz-transform: translateX(250px); -ms-transform: translateX(250px); -o-transform: translateX(250px); transform: translateX(250px); width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); z-index: 10;
}
.toggle-menu:checked ~ .toggle__label .toggle__label__button .line { border-width: 0;
}
.toggle-menu:checked ~ .toggle__label .toggle__label__button .line:before, .toggle-menu:checked ~ .toggle__label .toggle__label__button .line:after { top: 12px; margin-top: 0;
}
.toggle-menu:checked ~ .toggle__label .toggle__label__button .line:before { -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg);
}
.toggle-menu:checked ~ .toggle__label .toggle__label__button .line:after { -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg);
}
.toggle-menu:checked ~ .nav { -webkit-transform: translateX(0px); -moz-transform: translateX(0px); -ms-transform: translateX(0px); -o-transform: translateX(0px); transform: translateX(0px);
}
.toggle-menu:checked ~ main { -webkit-transform: translateX(187.5px); -moz-transform: translateX(187.5px); -ms-transform: translateX(187.5px); -o-transform: translateX(187.5px); transform: translateX(187.5px);
}
.transition-slide { -webkit-transition: all 0.2s cubic-bezier(0.33, 0.88, 0.65, 0.98); -moz-transition: all 0.2s cubic-bezier(0.33, 0.88, 0.65, 0.98); transition: all 0.2s cubic-bezier(0.33, 0.88, 0.65, 0.98);
}
Developer | Pimskie |
Username | pimskie |
Uploaded | June 13, 2022 |
Rating | 3 |
Size | 4,197 Kb |
Views | 58,696 |
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 |
Rainbow particles | 3,673 Kb |
Duplicate crystal | 2,964 Kb |
Apollonian gasket | 9,268 Kb |
Aizawa Attractor | 3,609 Kb |
Circles pattern | 3,342 Kb |
Tree mirror | 3,472 Kb |
Planet attractors | 4,548 Kb |
A Pen by pimskie | 2,486 Kb |
Glitching image - USA style | 4,733 Kb |
Particles Clifford attractor | 3,448 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 |
SlideupBoxes | Gavra | 23,772 Kb |
Slider for stackoverflow | KKOKU | 3,222 Kb |
Getting Started | Viblast | 1,500 Kb |
TinFoil Boats | Chandralil | 4,577 Kb |
Count up | Alanshortis | 2,391 Kb |
Responsive Pricing Table | Jeremycaris | 2,690 Kb |
Z-index demo | Kblh | 1,534 Kb |
Flickering Light Text Effect | Mandymichael | 3,315 Kb |
Svg penguin | _massimo | 2,990 Kb |
Table border-collapse property | Maxds | 1,672 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!