webdevsimplified / css-only-hamburger-menu Goto Github PK

To represent my page content, I appended to your HTML the following:

<main>hello</main>

Unfortunately, the "hello" then appears far down the page regardless of whether the menu is open or closed. I presume there should be additional styling that indicates that the menu should be floating over other content. I would expect the "hello" to appear near the top of the page, and the menu simply covers it when it pops-out.

I made a quick and dirty "fix", by adjusting relative/absolute positioning...

      .sidebar {
        transition: translate var(--animation-timing);
        translate: -100% -5%;                 <====== With my new settings, the '-5%' became necessary. Don't know why.
        position: absolute;                      <====== I ADDED THIS.
        padding: 0.5rem 1rem;
        padding-top: calc(var(--hamburger-height) + var(--hamburger-margin) + 1rem);
        background-color: var(--foreground);
        color: var(--background);
        max-width: 10rem;
        min-height: 100vh;
      }

Since I am a beginner with CSS...I'm not sure if that is the proper way to solve this. Indeed, my "hello" was no longer pushed down the page...but now my hamburger 'X' symbol would disappear behind the sidebar. So to fix that next problem, I made this other change...(which also allowed me to have content above the hamburger icon)...

    .hamburger-menu {
        --x-width: calc(var(--hamburger-height) * 1.41421356237);
      
        display: flex;
        flex-direction: column;
        gap: var(--hamburger-gap);
        width: max-content;
        position: relative;         <<====now relative instead of absolute.
        top: var(--hamburger-margin);
        left: var(--hamburger-margin);
        z-index: 2;
        cursor: pointer;
      }

For what its worth, my entire experiment with your hamburger menu was on a page that had margins on either side. Definitely not the scenario you were addressing, but...

Incidentally, I'd love to see you do a follow-on video for this "hamburger menu" that shows how to:

• Incorporate responsive design so that the hamburger expands into a normal "in-line" menu across the top on screens with a wider display.
• Quickly re-configure the hamburger menu, using CSS variables(?), to obey margins that were set on the page.
• Quickly re-configure the hamburger menu, using CSS variables(?), to attach to the right margin/aside rather than the left margin/aside.

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