Have you ever used Facebook’s mobile site or app? The app sports a cool scrollable menu that slides out from the left. For mobile versions of sites, this is a fantastic way to deal with your navigation menu so you don’t take up valuable space with nav links! I’ve created a working version of that type of layout, and I decided to see if anyone wants to help collaborate on it. More information is provided in my repo – https://github.com/NicholasRBowers/CSS-Menu-Slider.
Live Demo: EDIT – next comment.
-Based off of Checkbox Hack
-Meant for mobile
-Works in major browsers (except IE, but I’m designing for mobile, so this doesn’t concern me TOO much)
-Tested on Android browser and Chrome on Android, and works moderately well in both (if you zoom, Chrome freaks out a little bit)
Fantastic! Definitely feel free to brainstorm with me as to how to make it better. I added a request/suggestion tag in issues, so we can talk about improvements in functionality and cross-compatibility.
Special thanks to @Vermaas for forking the repository and helping out! Still a few bugs, but we’re working on making this stable across all mobile browsers (harder than it sounds). If you’d like to help out, repository is here.
I actually just went and looked back at how you used the label checking the checkbox for the action and that is pretty slick. In mine i used :hover/:target/:active to try to get cross browser stuff in play.
@bkbillma I thought about using :hover/:target/:active to make this work, but I forget why I ultimately decided to go a different direction. Obviously, I don’t like the idea of building a complete navigational structure off of a hack, but CSS offers very little opportunities to store state information.
Which part of the website demonstrates your version? I couldn’t find it.
This reply has been reported for inappropriate content.
@paintba11er89, yes, as a matter of fact, I do have a thought on that..instead of adjusting the width to 40% (which will wrap any extended text when resized), I changed the position to fixed, which stops scrolling on the #page when the menu is extended, which means you could also preserve those percentage sizes and positions like you had before, and also pushes the entire content over instead of wrapping the text..UNFORTUNATELY, I’d like to add a .7s delay, but only when the nav is being retracted, to avoid a horizontal scroll on the way back to the sidebar, but don’t have time to tinker right now. Check it out
@paintballer89 if you size your browser down to <400px or if you are on a small screen you will see the menu link in the top right. I even did this with :before in the 400px media querie and hook everything off of that.