I'm making an all new mobile version of one of my sites. And I've decided that the way I want to do navigation is to have the 'hamburger' button cause the entire page to slide to the right, revealing a list of navigation links underneath.

So I was thinking I'd have the main content of each page load normally, but I'd have javascript load the nav content separately once the main page was finished loading. That way it could be cached separately and not have to be loaded on every page load (in fact I was also thinking of using html5 web storage to load the data and keep it loaded for a day or so, but that's secondary).

What I'm stuck on is how I can get the whole primary content to slide to the right, revealing what's under it, without changing its width or anything like that. I guess in a way it's a pretty simple effect. It was suggested I could use CSS animation triggered with JS. I like simple code and that sounds like it will be simple, but I'm not sure how to accomplish it.

Unfortunately, I do not have an example webapp to show you. If you are having trouble imagining what I'm explaining, there is a native App Store app that has a very similar kind of navigation that I'm trying to emulate: https://itunes.apple.com/us/app/wcvb-newscenter-5-boston/id501410335?mt=8 Note: I have nothing to do with that app or company whatsoever, I just like the way their navigation 'hamburger' button slides their content to the right to reveal navigation. They also have their navigation sliding a bit too in this transaction. I would not do that. I think my content will look best if the nav is fixed and completely covered by the main content, and revealed when you click the navigation button.

  • I've been working on a system from scratch. It has some basic functionality but is still buggy. Once it's working cleanly I'll post the code. – l008com May 15 '19 at 11:01

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.