I'm making a new mobile site and I'm going with the hamburger button to slide in the menu because theres too many nav items, so I can't go with the bottom of the page tabs.
So I made a mockup of how it works and it slides in well. However there is one thing I don't like about this setup. The menu is basically animating from 0% width to 80% width. So the width of the menu is changing as the animation happens. The alignment of the text items changes.
Here is a mockup: [
jsfiddle.net...]
The effect of the text in the nav menu changing alignment isn't very noticeable in the mockup because all the text is roughly the same size. But when some are longer and some are shorter, it's much more noticeable.
But either way, is there a way I can make the width of the nav menu fixed the whole time, and have it slide over as a solid object instead of changing it's shape to appear? I'm not sure how I would do that without messing up the horizontal scroll of the browser?
