I'm working on a web page that is specifically intended to be used on tablets. The layout is that by default, there is a navigation column on the left, and the main content on the right. The nav does not render on TOP of the content, but next to it. And I want the user to be able to click a button to make the navigation column slide away into nothingness allowing the main content to fill the whole screen.
My first thought was to simply have a parent with display: flex; and then the menu column child have flex: 25%;. Then with a css transition, use JS to swap classes to that column is flex: 0%;
That failed for not one but TWO reasons!
First, the min "flex" size is limited by the longest word in the column. It can't get any smaller than that, the text keeps the column "propped open" essentially.
Second, even if it did work, it is "squeezing" the content out of existing in a very unpleasing way. Thats not actually what I want, I want the whole column to just slide off the page to the left without changing its width, so without changing the text flow at all. And then just let the remaining column fill up the whole space.
Any thoughts on how best to accomplish this? I tried using width instead of flex but that still doesn't work the way I'd like at all.
I have a mockup you can view and play with. it's kind of 'large format' for use in a jsfiddle but its the best I can do:
[
jsfiddle.net...]
Note: Click on the plain text "Toggle Nav Menu" at the top to attempt to hide and show the nav column.
