1

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.

Improve this question
1
  • 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
    Commented May 15, 2019 at 11:01

1 Answer 1

Reset to default
0

I didn't see a follow up to this question, but the concept reminded me of something I saw here: https://www.w3schools.com/howto/howto_js_curtain_menu.asp

The sample shoes a menu overlay which covers the entire screen without affecting the page itself.

Improve this answer
3
  • Just having a link to go to is not a good answer. It would be more suitable as a comment.
    – Rohit Gupta
    Commented Feb 3, 2023 at 12:53
  • That does look nice and smooth. However it's kind of the opposite effect I was looking for. I wanted the content to slide over and reveal the nav underneath. This is the opposite. The nav sliding over and covering up the stationary content. Still it's better than nothing. And I actually never finished this project but it's still on my list so I may have to use that example anyway.
    – l008com
    Commented Feb 4, 2023 at 2:07
  • perhaps you could switch the positions in the example(?)... or, set the page to go opaque when someone triggers the menu (like a dissolving page). Probably not what you are thinking of, but potential "wow" factor.
    – elbrant
    Commented Feb 4, 2023 at 16:25

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.