Fejlen udviklere foretager, når de koder en hamburgermenu

Hvad får New York Times 'udviklere galt med hamburgermenuen, og hvad får Disney og Wikipedia rigtige?

Så vidt jeg ved, har jeg kun fundet en måde at style hamburgermenuens åbne tilstand, der understøtter iOS Safari. (Antagelig vil du have, at en mobilvisning skal fungere på iPhone!)

Det handler om, hvordan hamburger-menuen er placeret.

Problemet med mange hamburgermenuer

Hvis din hamburgermenu ikke har behov for rulle ... Tillykke! Den CSS-løsning, du tænker på nu, fungerer sandsynligvis helt fint: placér sidebjælken absolut ud og ind i visningsporten, når brugeren klikker på menuikonet.

Hvis din menu har flere elementer end visningsporten kan vises på én gang, er det dette, der sker, når din hamburgermenu er placeret absolut:

Hvis du ikke ønsker at se videoen, prøver jeg og beskriver den med ord.

  • Rulning inden for positionen: absolut menu er ubehagelig: den ruller ikke jævnt, og når den når slutningen af ​​rullen, spretter den ikke på den tilfredsstillende, patenterede gummibånd. Prøv hamburgermenuerne på New York Times eller Pitchfork.
  • Hvis du overruller i hamburger-menuen, ruller iOS Safari i stedet for kroppen. Prøv sidebjælken på Viki.
  • Et alternativ er at bruge position: fast og -webkit-overflow-scrolling: berør på sidebjælken. Selv da, hvis du trykker på siden af ​​menuen, som at rulle på spalten med hovedindhold, der er eksponeret ved siden af ​​sidelinjen, mister du muligheden for at rulle i menuen. Prøv hamburgermenuen på Grab.

Bemærk, hvordan nogle gange iOS ruller i menuen, nogle gange ruller det kroppen bag menuen? Frustrerende!

Og FWIW, du kan også bryde rullen på Apple.com. En nem måde at udløse rulle på Hamburger-menuen er at bruge din telefon vandret.

Løsningen

Grundlæggende er den vigtigste ting, du skal huske om menuens endelige, åbne tilstand, dette: i stedet for at placere menuen absolut, vil det være hovedindholdet, der er placeret, når sidebjælken åbnes. Med andre ord, i stedet for at placere menuen, skal du placere alt andet!

Her er det i koden sammen med forklarende kommentarer:


 

  
  
/ * Vilkårlige CSS-variabelværdier til forklarende formål * /
: rod {
  - Sidebarbredde: 100px;
  - sidebar-bg-farve: blå;
}

.sidebar {
  display: ingen;
  position: relativ;
  bredde: var (- sidebar-bredde);
}

@media (maks. bredde: 767px) {
  html.sidebar-is-open .sidebar {
    display: blokering;
     / *
      Sidepanelet er netop gengivet i standardposition,
      som det vises i dokumentstrømmen
     * /
  }

  html.sidebar-is-open .main-content {
    position: fast;
    / *
     Det er det vigtigste indhold, der er placeret.
     Dette er kernen i implementeringen. Resten er alt sukker.

     Ulemper: kroppen ruller til toppen og mister din brugers rulleposition
    * /

    / * forhindrer ændring af størrelse fra dens originale bredskærmsbredde * /
    bund: 0;
    venstre: 0;
    højre: 0;
    top: 0;
    bredde: 100%;

    overløb: skjult;
  }

  / * Valgfri forbedring:
     gøre overrulle på iPhone i samme farve som sidefeltet * /
  html.sidebar-is-open krop {
    baggrundsfarve: var (- sidebar-bg-farve);
  }
  .sidebar {
    baggrundsfarve: var (- sidebar-bg-farve);
  }
}
const documentElement = document.querySelector ("html");
const contentElement = document.querySelector (". hovedindhold");
const sidebarElement = document.querySelector (". sidebar");
const sidebarIsOpen = () => documentElement.classList.concepts ("sidebar-is-open");

const openSidebar = () => {
  / * Hvordan du udløser ændringen er op til dig * /
  documentElement.classList.add ( "sidebjælke-er-åben");
};

const closeSidebar = () => {
  documentElement.classList.remove ( "sidebjælke-er-åben");
};

const toggleSidebar = () => {
  sidebarIsOpen ()? closeSidebar (): openSidebar ();
};

Konklusion

Indtil videre har jeg fundet to store spillere, der får det rigtigt: Wikipedia og Disney USA.

Prøv deres hamburgermenuer på iOS og se, hvilken rigtig god oplevelse det er at rulle!

Forhåbentlig kan du sprede ordet og rette hamburgermenuer fra nu af.

Hvis du er mere nybegynder, kan du finde en forklaring på, hvad en hamburgermenu er, og hvordan man opretter en hamburgermenu fra bunden på min blog.