How To Make a Slide Out Navigation with HTML/CSS (No JavaScript)
Why Stack Overflow recommends it
Stack Overflow users link it as the source for a JavaScript-free slide-out menu, both as an answer to "how do I do this without jQuery" and as the lesson they are following when their own copy fails to slide.
Recommended by 3 people across 3 different months, 2015 to 2016.
What it is
A Codecourse tutorial that builds an off-canvas slide-out navigation menu using only HTML and CSS. It relies on a hidden checkbox and label to toggle the menu, with Sass and Bourbon used for the transition effect. The walkthrough runs about 28 minutes.
What people said
Recommends lil_bugga · 2015-03 · Stack Overflow · on “Slide out Menu Sidebar”
You can also achieve this without using jquery or javascript with the careful use of check boxes and labels. As seen in this tutorial [this video]
Recommends evghenii turco · 2016-04 · Stack Overflow · on “Slide out nav doesn't slide out”
I wonder why can't i say hi in the beggining of the message? It's being auto removed. Anyway i'm trying to make a css only slide out menu following this lesson: [this video] But for some reason it doesn't work for me. The idea is - when menu icon is clicked the checkbox is checked and menu should change it's margin-left from -200 to 0. But it doesn't. Any help? body { padding: 0; margin: 0; font-family: 'Open Sans', sans-serif; -webkit-font-smoothing: antialiased; text-shadow: 1px 1px 1px rgba(0,0,0,0.004); } nav { height: 100%; position: fixed; margin-left: -200px; } nav ul { list-style: none; background-color: #333; padding-top: 30px; width: 150px; height: 100%; margin: 0; } nav ul li { margin-
Recommends DataData · 2016-06 · Stack Overflow · on “I have some troubles in making slide menu bar with sass”
Hi I'm learning html and css by Youtube tutorial, how to slide out navigation with css/html, but I've stucked with some codes. Everything is working fine except #sidebartoggler display: none &:checked + .page-wrap .sidebar left:0px this one. When I click this, the sidebar should come out but it isn't. I tried to fix the problem, trying to find anything wrong on my code for two days, but I couldn't and exhausted. It would be a great help for me to figure what is wrong. Please help me ps. youtube link is [this video] @import 'bourbon' .page-content position: relative z-index:0 .toggle text-decoration: none font-size:30px color: black +position(fixed, 20px 0 0 200px) z-index:1 .sidebar +position(fix
Cites Liondancer · 2016-12 · Stack Overflow · on “What does Bourbon's `transition()` mixin compile to in CSS?”
In this YouTube video [this video] @20:49, he uses is transition() in his stylesheet to enable the easing in and out of the off screen navigation. He is using Bourbon as well. How can I translate the same transition effect into regular CSS?