The Full Screen Mobile Menu


Uncategorized

Updated Oct 14th, 2021

Note: There is another post here all about mobile navigation menus, not necessarily fullscreen.

Implementation is fairly easy although I I’ve seen what I believe to some bad practices.

Scrolling down scrolls content behind.

Scrolling down shows the full screen modal is not a full screen modal at all, and clicking off of it doesn’t even close the modal.

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.

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.


Top