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.
Highlights: -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) -Collaboration welcome!
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.
@ChrisP, that's slick! I'll implement that into my version on Github. I'm still trying to find a way to be able to make the #page panel unscrollable when the navigation menu is out. Thoughts?
@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.
Obviously, this entire thing would work much simpler with Javascript, but CSS-only is fun and challenging - plus it hasn't been done yet. This is more of an exercise to see how we can leverage CSS to do many of the things people just appropriate to JS, which (in certain instances) negatively affects page loading times. I usually only use JS to make things pretty, but rely on HTML and CSS for functionality (although, again, this is a hack and not really best practice).
@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.
@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.
Desktop:
Menu is only visible when the mouse button is held down, as soon as it's released, the menu disappears. This makes it impossible to use the mobile version of the menu on desktop.
Does not respect scrolling, will jump up to a little lower than the top when the menu button is clicked.
Mobile:
Menu doesn't pull out far enough, text is cut off.
Can still scroll when menu is extended.
Only way to collapse the menu is to click on one of the menu items.
Does not respect the user's scrolling. Resets to top.
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.
@Koopa absolutely! IE is the bane of every web developer, but that's what Modernizr is for. If the browser doesn't support transitions, have it load some JS as a fallback to make it pretty.
@paintba11er89, I think you could probably avoid the overflow horizontal scrollbar by inserting html { overflow-x: hidden; } and remove the fixed positioning from the content area..I tried it, but not in depth, I think it may handle the positioning of the content, and wouldn't need to adjust the width either.
Live Demo: EDIT - next comment.
Highlights:
-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)
-Collaboration welcome!
JSFiddle Code - http://jsfiddle.net/NicholasRBowers/PPZ8b/
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'm going to try this out!
I'll let you know what I come up with and show you the website once it's live.
@paintba11er89, I forked your newest update to remove the horizontal scrollbar when the menu is expanded..added
40%width to #page when the box is checked.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
Not sure if it is helpful or not but I hope so. We might even have a similar approach
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.
I forgot you can also see it in action in its first form here
On desktop browsers it is certainly not ideal currently. It works better on mobile at the moment
@ChrisP, that's slick! I'll implement that into my version on Github. I'm still trying to find a way to be able to make the
#pagepanel unscrollable when the navigation menu is out. Thoughts?@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.
Obviously, this entire thing would work much simpler with Javascript, but CSS-only is fun and challenging - plus it hasn't been done yet. This is more of an exercise to see how we can leverage CSS to do many of the things people just appropriate to JS, which (in certain instances) negatively affects page loading times. I usually only use JS to make things pretty, but rely on HTML and CSS for functionality (although, again, this is a hack and not really best practice).
@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
#pagewhen 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 outThat may not work, it seems to reset page to the top when the menu is extended..hmmmm..
@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.
I would prefer to have a js fallback for the browsers which do not support transitions.
@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.
Desktop:
Mobile:
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.
@Koopa absolutely! IE is the bane of every web developer, but that's what Modernizr is for. If the browser doesn't support transitions, have it load some JS as a fallback to make it pretty.
@paintba11er89, I think you could probably avoid the overflow horizontal scrollbar by inserting
html { overflow-x: hidden; }and remove the fixed positioning from the content area..I tried it, but not in depth, I think it may handle the positioning of the content, and wouldn't need to adjust the width either.I've updated it a little bit. Little more cosmetically pleasing, and I added support for sub-menus. Still looking for some collaboration on this.