Mobile Web Navigation Menu Animation

[l008comm]

I'm using a method of showing and hiding my mobile site's nav menu that basically just sets the width of the nav box to 0 width to hide and 80% width to show, using CSS animations and activating by swapping classes with javascript. It's a pretty simple setup.

<snip>

While I kinda like it, it does one thing that kind of annoys me. Because it's changing it's width, the way the text is rendered in the nav box changes as it's being shown and hidden.

Imagine a nav menu that starts at 1px width with overflow hidden. So all text is wider than the box. As the box width grows, the text is still bigger than the box, so more of it is revealed but it isn't moving, it's still pinned to the left edge of the box. As the box gets wider, shorter lines of text start to be less than the width of the box, so they start moving to remain centered. (oh forgot to mention, nav box text is centered). As the nav box continues to get wider, more and more items start moving until the nav box is finished showing itself, and all the text in it is properly centered. But it was a weird 0.5 seconds to get there.

I'd prefer the menu to look the same through the whole process, with essentially a "fixed width" rendering of the menu sliding in from the side, rather than 'growing' in from the side. But I don't want to mess up the site width.

I'm not really sure how to accomplish this, any thoughts?
Also if my description isn't clear, let me know and I'll try to re-explain it.

[edited by: not2easy at 10:24 am (utc) on May 25, 2023]
[edit reason] Please see Charter [webmasterworld.com] [/edit]

[tangor]

Do you have specific code for the actions desired we can look at?

[tangor]

@l008comm ... generalize your code, removing all aspects that might reveal your site and use the generic example.com in place of your site name.

Am a fan of some animation CSS wise, but not so much js.

Come back and give it another try!

[l008comm]

Ok I've been busy but I'm back. I made a mockup.

There are really two issues:

(1) One is that when I test this code on Samsung Galaxy A21, the animation is surprisingly slow and choppy. The A21 isn't a high end phone but its a fairly new mid level phone, is it not? This super simple animation seems like something it should be able to handle.

(2) The second issue is what I've described in the original question. Because the nav box's width is changing, the centering of the text isn't visually ideal. It's hard to see in the mockup, it stands out a lot more on the real site that has a wide range of character lengths in it's menu items.
The way it works is "good enough", but if theres a way to improve it, I'd certainly give it a try. Particularly, I think I'd like it more if the nav box stayed a fixed width (80% of screen width) and slide on and off the display, but without messing up the horizontal scrolling or vertical page size (in cases where the content is much taller than the menu, or the menu is much taller than the page size. Both happen in different cases).

I suspect that changing #2 would probably also fix #1 but I don't know. I have essentially no experience with andoid phones. Maybe this is just how they are? Things animate slowly in their browsers?

Ok so on to the mockup. It's an HTML file with the CSS and JS both inline in the header of the document. But the document is hosted on my server and I guess that's not allowed even in this case, so I'll try to jsfiddle it and see if it still works:

[jsfiddle.net...]

Ok the Fiddle works, though I'm not sure how you'd test it on a mobile device that way.

For the hell of it, here's all the code in one flat pastebin doc:
[pastebin.mozilla.org...]

[l008comm]

A little digging and I found that "box-shadow" on the moving navigation box seems to be slowing down the android phone's rendering a lot. Removing that does seem to fix the 'android is slow' problem. Of course, I want that box shadow. And I think I could fake it with a transparent black div between the nav box and the main content.

But that fix may be moot if theres a better way to slide the menu in and out without changing it's width?