Needs to be tested in iPhone/iPad environment

[NicholasRBowers]

This layout tests very well on all desktop browsers (besides IE, where it completely breaks). Even though it works on Safari on the desktop, it may not work in mobile Safari (although, perhaps the person who I asked to test used an old iTouch device with an outdated version of Safari..). This layout needs to be thoroughly tested in the Apple environment, and tests moderately to very well in the android environment.

[stefanvermaas]

I've tested everything on an iPhone, but it didn't work at all. The problem is that we try to trigger the sidebar with a label and a label is not clickable in mobile safari (iPod, iPhone, iPad), source: http://v4.thewatchmakerproject.com/blog/how-to-fix-the-broken-ipad-form-label-click-issue/

In the chrome browser everything works very well (the mobile chrome browser on iOS). Might wanna try to fix this with javascript. But a completely CSS slider menu is not possible (yet).

What about the compatibility on Android? I've made my own version of your code: http://www.yellowduckwebdesign.nl/css-menu-slider/.

[NicholasRBowers]

I don't think that that's the reason why it fails.. From what I can gather from the article you linked to, clicking the label on mobile safari doesn't shift the focus to the input, but that doesn't mean that labels aren't clickable at all..

Take a look at http://www.woodysenterprises.com/Rifes-Market. That's based on the checkbox hack and relies heavily on label clicking, and works very well with the mobile safari. It has it's own issues with Android's default browser, but I'm working on fixing that. The only difference between that page and our project (in terms of method), is that that page uses input type="radio" instead of input type="checkbox". Because the other page works in mobile safari, I'm not sure what is causing our problem.

Also, in regards to your questions:
-It works very well on all Android browsers, although when the navigation menu is visible, you can zoom out, which breaks the layout (mobile chrome). And it can sometimes be a little laggy, but perhaps that's just my old phone. I haven't been able to test it on lower versions of the stock browser (Froyo and Gingerbread).
-Your link didn't work for me.

[stefanvermaas]

Can't view the page you've send ( will look that one up tomorrow morning ). And I've been trying to make the label clickable on the mobile safari, but it only seems to work when some JS is added. Look to this example (posted the wrong link before): http://www.yellowduckwebdesign.nl/css-slider-menu/

But I'm not sure or this is compatible on an Android phone/tablet. I was searching for a cleaner approach of your idea. What I did was wrapping the content in one div (.wrapper) and the side navigation in the other holder (.side). On this way you can separate the content and the sidebar and you still have a clean and logical markup.

[NicholasRBowers]

I did some more research, and it appears it is actually a bug with mobile safari, and will (hopefully) be fixed soon. In the meantime, it can be fixed by either: creating an empty onclick handler using JS, or adding the onclick="" attribute to the label in the HTML. This allows the label to be clickable in mobile safari.
http://stackoverflow.com/questions/7358781/tapping-on-label-in-mobile-safari
http://forums.macrumors.com/showthread.php?t=785632

I tested the link you gave me on an Android device (it's default browser for ICS), and it did not work. I think your JS is to blame? I'm going to clean up my code a little bit, get it to look a little prettier like yours, and add one of these fixes so we can test again.

As far as how you've set up your HTML/CSS - I haven't decided whether or not I want to go that route yet. Right now, I have the CSS automatically throwing whatever is in the

tag into a fixed position, and whatever is in a tag in the side bar. These are both block elements that act like divs, and I thought that this had more semantic value to it. This way, if it's part of a larger website (i.e. using media queries to make this only visible on the mobile version), you don't have to get bogged down with adding classes to different elements at different screen sizes.. I don't know though. Let me know what you think, I'm interested in your thought pattern, and you may convince me that your way is better yet!

[stefanvermaas]

I don't think it doesn't work because of JS. The JS only affects only the iPod, iPhone and iPad ;). So that can't be the reason why the idea doesn't work on Android.

Do you know something about the ~ selector? Might that be the problem? Thought you wrote some stuff about that selector, but I'm not sure. We might wanna try a different approach for sliding and I want to try that approach tonight and I'll send you the result.

And about the semantics. It's also possible to place the menu before the content. You're right about that. It would be more correct to have the menu above the content.

I've chosen to go for this approach because my idea was to separate the content from the sidebar. On this way you can easily move the content and the sidebar to the right. You don't have to worry anymore to forget about the header of maybe a footer.

In the way you setup the HTML, you have to thing about putting everything in the CSS file. And on the other hand, the HTML inside the wrapper, can just act like it would act in a normal website (with float) and you don't have to worry about the fixed position of the content.

My thoughts were that the fixed position was the reason the content was still horizontal scrollable. But that didn't look very nice (in my opinion). Hope I did explain myself good enough (still working on my English).

[stefanvermaas]

I haven't made the sidebar scrollable though, will make it in my next version.

[NicholasRBowers]

Very good points. Here we go:

1. I am about to make a few commits, and I think it will fix the mobile safari issue, so we won't have to rely on JS (except for maybe an empty onClick call, but it would serve no purpose, except as a workaround).
2. You're right, that was me talking about the ~ combinator. I will have to look at your code again to see where you've used it, but just avoid it for now. It would be different if we weren't designing this for mobile phones (of which Android makes up 60% or more of the market share). Stick with the adjacent sibling combinator (+) - it's faster anyways. That's why I put the input outside of the #page wrapper, so I could use the + combinator to select that, and then choose any descendant of that div I wanted to.
3. I used fixed position for the header because I wanted to be able to click on the header to return to top if the content was scrolled down, but I still don't know why it horizontally scrolls.. I will try to revert all of the non-fixed items to float, however, since browser support for that is wider than position: absolute;
4. I also chose fixed for the nav menu because that way, when I'm scrolling down in the content div, and then open up the menu, the menu opens at the top, not at the middle or the bottom.
5. I can move the entire #page wrapper on mine with CSS, the only extra steps that I have to take are for the fixed elements.. I'll experiment with a way to condense the CSS while maintaining functionality.

[stefanvermaas]

1. For the first thing: let's do onclick="". That's in the HTML and doesn't require the end user to include some JS. Although it is a option to keep in mind.
2. I'm going to look how I can fix the problem with the ~ selector.
3. Really go idea, but the header is to small. Well, the header isn't to small, but the navigation button is too big (pick one ;)). So might want to fire a trigger on the navigation label instead of the header.
4. Mine will too, at least I think, will try that out in a minute.
5. Not sure what you mean with this..

[NicholasRBowers]

Okay, just pushed a new update to GitHub, and to the live server - looks less obnoxious, I used most of your styling :)

1. I haven't added onClick="" yet, because I know that the other project I showed you (http://www.woodysenterprises.com/Rifes-Market) doesn't use that workaround, and the label clicking still works on the iPhone/iPad (try it!).
2. Let me know if you make any progress with ~. I think it is just a limitation of the Android Default browser, unfortunately :/ There may be a way to string together a lot of + combinators in order to eventually get to the element that you want, but I haven't tested out that theory yet.
3. The trigger does file on the navigation label right now, and I'm thinking about making the entire area clickable to scroll back up to the top - but I'm not sure..
4. I just meant that with yours, all you have to move in the :checked CSS is: .side and .wrapper.. I have to move # #page, #header, the label, and #nav because I used fixed positioning (for the scrolling reasons). With fixed positioning, these elements don't move with the #page (but content does). I'm also thinking about putting the label within the #header, so I don't have to move it separately!

[stefanvermaas]

1. You're right. Everything works on the iPhone. I see the trick : label {cursor: pointer; } did work on this website.. Strange tested it yesterday on mines, but that did not solve the issue. I'm gonna try it again tomorrow morning, maybe I did something wrong.
2. I'll let you know. We need to solve that problem on an other way and I might have a solution to that problem, or at least I hope so.
3. Surprise me :)! Maybe make to versions?
4. OK, I understand :)

[NicholasRBowers]

I'm pushing a new version now! Everything seems fixed. Please test and let me know what you find!

[stefanvermaas]

I'll test this today, haven't been able to do much for my new version(or yours :))

[Eskarina]

Stumbled across many many ways to acomplish a "facebook" menu, and yours is by far the best one implemented. Many people do not realize how important is a "hide" menu button as big as the entire screen that remains visible ;)

I must say I'm not an expert programmer, but I do quite like to code my wordpress portfolios :p and after a few days, I was able to finally workaround the iphone quirkly behaivor of labels :P

Just to point you out, there's something in the DOM that prevents you to select anything, text nor photos. Is a minor detail, mildy annoying...

Thanks! :)

[NicholasRBowers]

Hey @Eskarina! Thanks for your interest in this little experiment! It's been on the backburner for a long time because I haven't had the time nor interest from others to develop it further. If there is a significant interest, I can dedicate a little time to it.

As far as not working on mobile Safari, there may be a few reasons for this:

1. I think that may happen because the labels in Safari aren't clickable, unless there is a empty javascript click handler - but this is just conjecture. I don't own any Apple products, so I never had the ability to test it in-depth. If this problem is caused by labels not being clickable, then adding "$('label').click(function() {});" to the document should get it to work (as well as the other workarounds you mentioned).
2. I know that a lot of mobile browsers have a problem with the sibling CSS selector (~). Most work with the adjacent sibling CSS selector (+), which I've used. Mobile Safari may have an issue with this selector.
3. If the problem isn't either of the two aforementioned, the utilized method is called the "checkbox hack". I'd look for general problems that people have with this hack and mobile Safari. If you investigate further, please report back here! I'd love to make this code a little more compatible with everything on the market right now.

I did not know of any selection bug. Please report it as a bug in a new issue! If you could make a demonstration page for it, I'd like to see what you're talking about!

[Eskarina]

Hi. Thanks for your quick response.

It's a fault of mine to write before, then do a heavy edit on my posts... I was just changing things in a template file and looking for changes in another. Everything works perfect. Except the selection of things... still looking what is wrong there.

As stated before, the finest menu slider out there. You deserve credit and I will give you some in my page when finished. :)

btw, if you want my page to have a in-hand look at the selection bug: http://www.malcomiles.com

I will edit my link soon to avoid spam. o:) I left it here just for you to check if interested.