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 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.
@ChrisP those are the same issues I’ve been struggling with for awhile. Fixed positioning and overflowing out of the window will definitely create some problems on different browsers, and will cause you to be sent right back to the top when the menu is collapsed.
@bkbillma I just got a chance to look at the site under 400px on both a laptop and my phone. I see what you’ve done, but there are obvious drawbacks.
A lot of these reasons are why I stayed away from the :target pseudo-class. Again, this is more of a proof of concept than something on which I would reliably base a business’s website.
You must be logged in to reply to this topic.