de Jared Tong

Eroarea pe care o fac dezvoltatorii atunci când codifică un meniu hamburger

Eroarea pe care o fac dezvoltatorii atunci cand codifica un

Ce greșesc dezvoltatorii The New York Times în ceea ce privește meniul hamburgerilor și ce au dreptate Disney și Wikipedia?

Din câte știu, am găsit o singură modalitate de a stiliza starea deschisă a meniului hamburger care acceptă iOS Safari. (Probabil, doriți ca o vizualizare mobilă să funcționeze pe iPhone!)

Este vorba despre modul în care este poziționat meniul hamburgerilor.

Problema cu multe meniuri Hamburger

Dacă meniul hamburgerului dvs. nu are nevoie de derulare … Felicitări! Soluția CSS la care vă gândiți acum va funcționa probabil foarte bine: poziționați bara laterală în afara și în portul de vizualizare atunci când utilizatorul face clic pe pictograma meniu.

ad-banner

Dacă meniul dvs. are mai multe elemente decât portul de vizualizare poate afișa simultan, acest lucru se întâmplă atunci când meniul hamburger este poziționat absolut:

Dacă nu doriți să vizionați videoclipul, voi încerca să îl descriu în cuvinte.

  • Derulând în position: absolute meniul este neplăcut: nu derulează ușor și, când ajunge la sfârșitul derulării, nu sare în acel mod satisfăcător, patentat cu bandă de cauciuc. Încercați meniurile pentru hamburgeri New York Times, sau Furcă.
  • Dacă derulați peste meniul hamburger, iOS Safari va derula în schimb corpul. Încercați bara laterală activată Viki.
  • O alternativă este utilizarea position:fixed și -webkit-overflow-scrolling: touch pe bara laterală. Chiar și atunci, dacă atingeți dincolo de meniu, cum ar fi defilarea pe fâșia de conținut principal expusă lângă bara laterală, veți pierde capacitatea de a derula în meniu. Încercați meniul hamburger pe Apuca.

Observați cum uneori iOS derulează meniul, uneori derulează corpul din spatele meniului? Frustrant!

Și FWIW, puteți rupe defilarea Apple.com de asemenea. O modalitate ușoară de a declanșa derularea din meniul hamburgerului este utilizarea telefonului pe orizontală.

Soluția

Practic, elementul cheie pe care trebuie să-l amintiți despre starea finală deschisă a meniului este acesta: în loc să poziționați meniul absolut, va fi conținutul principal care este poziționat odată cu deschiderea barei laterale. Cu alte cuvinte, în loc să poziționați meniul, poziționați toate celelalte!

Iată că în cod, alături de comentarii explicative:

<html><head></head><body>  <div class="sidebar">Hamburger menu links go here</div>  <div class="main-content"><button class="hamburger-menu-icon" onClick="toggleSidebar()">?</button></div></body></html> 
/* Arbitrary CSS variable values for explanatory purposes */:root {  --sidebar-width: 100px;  --sidebar-bg-colour: blue;}.sidebar {  display: none;  position: relative;  width: var(--sidebar-width);}@media (max-width: 767px) {  html.sidebar-is-open .sidebar {    display: block;      /*       The sidebar is just rendered in default position,      as it appears in the document flow     */  }  html.sidebar-is-open .main-content {    position: fixed;     /*      It is the main content that is positioned.      This is the crux of the implementation. The rest is all sugar.     Cons: the body will scroll to the top, losing your user's scroll position    */    /* prevents resizing from its original full-screen width */    bottom: 0;    left: 0;    right: 0;    top: 0;    width: 100%;     overflow: hidden;  }  /* Optional enhancement:      make the over-scroll on iPhone the same color as the sidebar */  html.sidebar-is-open body {    background-color: var(--sidebar-bg-colour);  }  .sidebar {    background-color: var(--sidebar-bg-colour);  }}
const documentElement = document.querySelector("html");const contentElement = document.querySelector(".main-content");const sidebarElement = document.querySelector(".sidebar");const sidebarIsOpen = () => documentElement.classList.contains("sidebar-is-open");const openSidebar = () => {  /* How you trigger the change is up to you */  documentElement.classList.add("sidebar-is-open");};const closeSidebar = () => {  documentElement.classList.remove("sidebar-is-open");};const toggleSidebar = () => {  sidebarIsOpen() ? closeSidebar() : openSidebar();};

Concluzie

Până acum am găsit doi jucători mari care înțeleg bine: Wikipedia și Disney SUA.

Încercați meniurile hamburgerilor pe iOS și vedeți ce experiență minunată este derularea!

Sperăm că puteți răspândi vestea și puteți repara meniurile hamburgeri de acum înainte.

Dacă sunteți mai mult începător, puteți găsi o explicație despre ce este un meniu hamburger și cum să construiesc un meniu hamburger de la zero pe blogul meu.