Hamburger-menu to represent table-of-contents longer than the screen width

[vadimkantorov]

Hi Kyle!

Thanks a lot for your video explainer, and also for the MIT license for this code example. I'm a machine learning engineer, but have to hack up some webdev-y stuffs sometimes, and explainers in your style are great, as they are complete and do not presume prior knowledge besides basics.

I am trying your technique for burger menu to pop-over a table of contents for extra-long pages with dozens of sections - so the aside/popover itself needs scrolling.

As your original example pushes down the contents, I've modified it to use position: fixed, but this breaks scrolling of the table-of-contents itself. On mobile phones I would like this table-of-contents to fully overlay the contents (as if we navigated to a separate table-of-contents page with standard browser scrolling), so that it can be scrolled properly. Maybe the same behavior on desktop could be fine as well (or maybe table-of-contents menu could have its own scrolling).

How would you advise to approach this?

Thank you!

attaching two code examples (files need to be renamed back to html) - the first is your code modified by me to have many sections and table-of-contents and modifying aside to use position: fixed

burgermenufixed.html.txt burgermenusticky.html.txt