No autoresizing to fit the code
Render blocking of the parent page
Apply local draft version or discard it
Indent with tabs
Auto-run code (beta)
Auto-save code (bumps the version)
Auto-close HTML tags
Live code validation
Only auto-run validating code
Objective: To create a CSS-only layout including a scrollable menu that slides out from the left. Meant for mobile versions of sites.
Live Demo: https://github.com/NicholasRBowers/CSS-Menu-Slider
-Meant for mobile devices
-Meant to be used in conjunction with Responsive Design
-Want to design as semantic as possible
-Akin to Facebook's Mobile and App layout
-Completely breaks in IE
-Uses the checkbox-hack to store state information (http://css-tricks.com/the-checkbox-hack/)
=When unchecked, menu is closed, when checked menu is open.
-Input checkbox exists at the base level of the HTML (under <body>) with an absolutely positioned <div> tag afterwards that encapsulates the page.
-<div> tag holds the rest of the page, including fixed absolutely positioned elements.
-Header and Navigation toggle are fixed at top, scrollable <div> under, and fixed/scrollable menu to the left.
-An extra invisible label allows a click anywhere on the right to toggle states and collapse the menu.
-Completely broken in IE, but as this is meant for mobile only, I'm not sure that's a problem.
-Zooming out on a mobile device sometimes causes rendering problems.
-Had to put the rest of the page in a <div> that was a sibling to the <input> element, because the default Android browser only supports the adjacent sibling combinator (+) when used in tandem with a pseudo-class (:checked). NOTE: It does support the sibling combinator (~), but it only picks up the adjacent element.
Add title to make the fiddle public.
/echo simulates Async calls:
See docs for more info.
Created and maintained by Piotr and @oskar.
Hosted on DigitalOcean
All code belongs to the poster and no license is enforced.
JSFiddle or its authors are not responsible or liable for any loss or damage of any kind during the usage of provided code.
Roadmap (vote for features)
Status page by updown.io
If you don't mind tech-related ads, and want to keep us running, whitelist JSFiddle in your ad blocker.
Thank you! ❤️