Note: This is part of a much larger post on navigation menus here.

Also Note: If a component library like Material-UI handles all of this isn’t it worth using even if just for the menu?

Results to Avoid

Scrolling down scrolls the content behind the modal.

Scrolling down briefly shows the content in the background.

Clicking off of the menu, if not full screen, or in an open area, doesn’t close the modal, requiring the user to click the close-icon to close the menu.

The idea is to have a container for all non-navigation content so it can be hidden with display none or scale Y or visibility hidden. You could also hide two divs like main and footer. I’m not sure of this is the best practice but it should help the glitches mentioned above.

One thing you consider with a React or Next JS application is that the state needs to be in like the app that just file which is very high up the component tree (the root in fact).

Here is an article with a list of examples.

Scroll the Menu vs the Background Content

If the menu requires scrolling does the menu scroll or the content underneath? This is an issue for any modal really.

Hide Non-Menu Content?

A way to avoid some background scrolling issues is to remove any non-menu-content completely. This means that the “menu-is-open” state should also close the non-menu content and

For react-based apps, if you want to hide the other content you may need to structure your component tree in a specific way. Mainly, put non-menu content inside a component so you can “show/hide” one component and not multiple.

The alternative is to just overlay a modal on top of the other content

The Scroll Bar on Desktops

An issue out of left field. Complicated with varying widths for different browsers.

TreeHugger

Actually this is a side-drawer. They interestingly have a completely second menu. One menu has an id of “header_nav_1-0” and a second with and id of “fullscreen-nav_1-0.” The UL and list items have their own distinct class names too, (“fullscreen-nav-list-item”). The “fullscreen-nav_1-0” is in a “header-nav-panel” class that is hidden until toggled.

.header .header-nav-panel {
    width: 100%;
    max-height: 100vh;
    overflow-y: auto;
    overflow-x: hidden;
    position: fixed;
    top: 85px;
    left: -110%;
    bottom: 0;
    right: 0;
    padding: 0 1rem;
    z-index: 2;
    background: #fff;
    background-size: contain;
    transition: left .15s ease-in-out;
    box-shadow: 0 10px .75rem #737373;
}

The animating property is the “left” property from -51% or -110% depending on screen size back to 0.

Also interesting to note they toggle between two separate SVGs for the hamburger menu.

Is each letter of the logo text an SVG?

Uses border-bottom and a header::after selector to create a double border-effect.

header {
  border-bottom: 5px solid $color2;
}
header::after {
  content: "",
  position: absolute;
  left: 0;
  bottom: 0;
  right: 0;
  border-bottom: 3px solid $color1; 
}

I see you BEM

.header-nav__list {...}
.header-nav__list-item {...}
.header-nav__list-item-link {...}

DevEd

Dev Ed video here titled, Animated Responsive Navbar Tutorial. He uses a svg circle that expands to much larger than the screen size. This reminds me of a mograph trick.

Some Favs

Elephantbar