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)
Embedded JSFiddle Result – http://jsfiddle.net/NicholasRBowers/PPZ8b/embedded/result/
JSFiddle Code – http://jsfiddle.net/NicholasRBowers/PPZ8b/
I also changed the positioning from percentages to em’s on the Navigation and Header so they won’t move when the width is reduced.
I looked at your demo (not your code yet) but it reminded me of something I was tinkering with a while ago on codepen.
[http://codepen.io/bkbillma/pen/LKrjo](http://codepen.io/bkbillma/pen/LKrjo “Mobile Menu”)
Not sure if it is helpful or not but I hope so. We might even have a similar approach
@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.
@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](http://jsfiddle.net/PPZ8b/84/ “”)
You must be logged in to reply to this topic.
*May or may not contain any actual "CSS" or "Tricks".