Tworzenie komponentu menu nawigacyjnego

Podstawowe informacje o tworzeniu elastycznych i łatwo dostępnych komponentów menu nawigacyjnego, które ułatwią użytkownikom poruszanie się po witrynie.

Adam Argyle

W tym poście przedstawię sposoby tworzenia komponentów menu nawigacyjnego. Wypróbuj wersję demonstracyjną.

Jeśli wolisz film, oto wersja tego posta w YouTube:

Omówienie

Komponent menu nawigacyjnego pokazuje: w którym miejscu w hierarchii witryny znajduje się użytkownik. Nazwa pochodzi od Hansela Gretel, która zrezygnowała menu nawigacyjne za nimi w ciemnym lesie, w którym udało im się dotrzeć do domu przez śledzenie okruchów wstecz.

Menu nawigacyjne w tym poście jest niestandardowe menu nawigacyjnego, wygląda jak menu nawigacyjne. Zapewniają dodatkowe funkcje dzięki połączeniu elementów równorzędnych bezpośrednio do nawigacji dzięki funkcji <select>, dzięki czemu dostęp wielopoziomowy jak to tylko możliwe.

Wrażenia użytkowników w tle

W filmie demonstracyjnym komponentu powyżej kategorie zastępcze to gatunki: gier wideo. Szlak ten tworzysz, korzystając z tej ścieżki: home » rpg » indie » on sale, jak pokazano poniżej.

Ten komponent menu nawigacyjnego powinien umożliwiać użytkownikom poruszanie się hierarchia informacji; oraz szybkie wybieranie stron. dokładności.

Architektura informacji

Warto myśleć o kolekcjach i przedmiotach.

Kolekcje

Kolekcja to tablica opcji do wyboru. Na stronie głównej usługi to prototyp menu nawigacyjnego. Są to kolekcje FPS, RPG, brawler robot do lochów, sport i łamigłówki.

Elementy

Gra wideo to przedmiot, a konkretna kolekcja może być również przedmiotem, jeśli reprezentuje kolejną kolekcję. Na przykład RPG to przedmiot i prawidłowy atrybut kolekcji. Gdy jest to produkt, użytkownik jest na tej stronie kolekcji. Przykład: znajduje się na stronie RPG, która zawiera listę gier RPG, dodatkowe podkategorie AAA, Indie i Samodzielne.

W kontekście informatycznym ten komponent menu nawigacyjnego reprezentuje wielowymiarowe tablica:

const rawBreadcrumbData = {
  "FPS": {...},
  "RPG": {
    "AAA": {...},
    "indie": {
      "new": {...},
      "on sale": {...},
      "under 5": {...},
    },
    "self published": {...},
  },
  "brawler": {...},
  "dungeon crawler": {...},
  "sports": {...},
  "puzzle": {...},
}

Twoja aplikacja lub witryna będzie mieć własną architekturę informacji, co spowoduje w wielowymiarowej tablicy, ale mam nadzieję, że koncepcja strony docelowej kolekcji stron i przemierzania hierarchii mogą być również uwzględniane w menu nawigacyjnym.

Układy

Markup

Dobre komponenty zaczynają się od odpowiedniego kodu HTML. W następnej sekcji omówię dobór znaczników i ich wpływu na ogólny komponent.

Schemat jasny i ciemny

<meta name="color-scheme" content="dark light">

Metatag color-scheme w powyższym informuje przeglądarkę, że ta strona chce korzystać z przeglądarki jasnej i ciemnej stylów. Przykładowe menu nawigacyjne nie zawiera kodu CSS dla tych schematów kolorów, W menu nawigacyjnym zostaną użyte domyślne kolory podane przez przeglądarkę.

Element nawigacyjny

<nav class="breadcrumbs" role="navigation"></nav>

Użycie funkcji Element <nav> do nawigacji w witrynie, która ma domyślnie przypisaną rolę ARIA nawigacji. Podczas testów zauważyliśmy, że atrybut role zmienił sposób Czytnik ekranu wszedł w interakcję z elementem, a następnie ogłoszono, że nawigacji, więc postanowiłem to dodać.

Ikony

Gdy ikona powtarza się na stronie, plik SVG Element <use> oznacza, że można zdefiniować element path raz i użyć go we wszystkich instancjach . Zapobiega to powtarzaniu informacji o tej samej ścieżce, przez co większe dokumenty i ryzyko niespójności ścieżek.

Aby skorzystać z tej metody, dodaj do strony ukryty element SVG i zapakuj ikony w elemencie <symbol> o unikalnym identyfikatorze:

<svg style="display: none;">

  <symbol id="icon-home">
    <title>A home icon</title>
    <path d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"/>
  </symbol>

  <symbol id="icon-dropdown-arrow">
    <title>A down arrow</title>
    <path d="M19 9l-7 7-7-7"/>
  </symbol>

</svg>

Przeglądarka odczytuje kod HTML SVG, umieszcza informacje o ikonach w pamięci i Pozostała część strony zawiera odniesienie do identyfikatora w celu dodatkowych zastosowań. kliknij ikonę w taki sposób:

<svg viewBox="0 0 24 24" width="24" height="24" aria-hidden="true">
  <use href="#icon-home" />
</svg>

<svg viewBox="0 0 24 24" width="24" height="24" aria-hidden="true">
  <use href="#icon-dropdown-arrow" />
</svg>

Zdefiniuj raz, użyj tyle razy, ile chcesz, przy minimalnym wpływie na wydajność strony i elastycznym stylem. Zwróć uwagę, że do elementu SVG dodano aria-hidden="true". Nie przydają się one osobom przeglądającym, którzy tylko słyszą treść, ukrywając powstrzymuje ich od dodawania zbędnego szumu.

Podziel link .crumb

Tutaj tradycyjne menu nawigacyjne i elementy tego komponentu się różnią. Normalnie byłby to tylko link <a>, ale dodałem UX przemierzania za pomocą zamaskowany wybór. Klasa .crumb odpowiada za rozmieszczenie linku i ikonę, a .crumbicon odpowiada za układanie ikony w stosy i zaznaczanie elementu. Nazywam go „dzielonym linkiem”, ponieważ jego funkcje są bardzo podobny do podzielonego przycisku, lecz także do nawigacji.

<span class="crumb">
  <a href="#sub-collection-b">Category B</a>
  <span class="crumbicon">
    <svg>...</svg>
    <select class="disguised-select" title="Navigate to another category">
      <option>Category A</option>
      <option selected>Category B</option>
      <option>Category C</option>
    </select>
  </span>
</span>

Link i niektóre opcje nie są wyjątkami, ale zwiększają funkcjonalność proste menu nawigacyjne. Dodanie title do elementu <select> jest przydatne na ekranie użytkowników czytnika, informując ich o działaniu przycisku. Pamiętaj jednak, zapewnia taką samą pomoc wszystkim pozostałym użytkownikom. na iPadzie. Jeden atrybut zapewnia wielu użytkownikom kontekst dla przycisku.

Dekoracje separatorów

<span class="crumb-separator" aria-hidden="true">→</span>

Użycie separatorów jest opcjonalne. Świetnie sprawdza się też dodanie tylko jednego z nich (zobacz trzeci przykład powyżej). Daję każde aria-hidden="true", ponieważ są dekoracyjne, a nie dekoracyjne o czym musi pamiętać czytnik ekranu.

Właściwość gap (opisana poniżej) sprawia, że odstępy między nimi są proste.

Style

Ponieważ w kolorach są używane kolory systemowe, są to głównie luki i stosy stylów.

Kierunek i przepływ układu

Główny element nawigacyjny nav.breadcrumbs ustawia właściwość niestandardową o zakresie do wykorzystania przez dzieci i w inny sposób tworzy układ poziomy, wyrównany w pionie układ. Dzięki temu elementy składowe, separatory i ikony są wyrównane.

.breadcrumbs {
  --nav-gap: 2ch;

  display: flex;
  align-items: center;
  gap: var(--nav-gap);
  padding: calc(var(--nav-gap) / 2);
}

Każdy element .crumb tworzy też poziomy układ wyrównany w pionie z luka, ale specjalnie kieruje swoje elementy podrzędne i określa styl white-space: nowrap Ma to kluczowe znaczenie w przypadku menu nawigacyjnego zawierających wiele słów, ponieważ by mieć rozwiązanie wielowierszowe. W dalszej części tego posta dodamy style do obsługi poziome przepełnienie spowodowane tą właściwością white-space.

.crumb {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--nav-gap) / 4);

  & > a {
    white-space: nowrap;

    &[aria-current="page"] {
      font-weight: bold;
    }
  }
}

Dodano aria-current="page", aby link do bieżącej strony wyróżniał się na tle odpoczynek. Użytkownicy czytników ekranu będą mieć nie tylko jasny wskaźnik, że link na bieżącej stronie zmieniliśmy wygląd elementu, aby pomóc osobom widzącym mają podobne wrażenia.

Komponent .crumbicon używa siatki do nakładania ikony SVG z „niemal niewidoczne" <select>.

.crumbicon {
  --crumbicon-size: 3ch;

  display: grid;
  grid: [stack] var(--crumbicon-size) / [stack] var(--crumbicon-size);
  place-items: center;

  & > * {
    grid-area: stack;
  }
}

Element <select> jest ostatni w DOM, więc znajduje się nad stosem, i interaktywny. Dodaj styl opacity: .01, aby element nadal mógł być użyteczny, w rezultacie powstanie pole zaznaczenia, które idealnie pasuje do kształtu ikony. To dobry sposób na dostosowanie wyglądu elementu <select> podczas na utrzymanie wbudowanych funkcji.

.disguised-select {
  inline-size: 100%;
  block-size: 100%;
  opacity: .01;
  font-size: min(100%, 16px); /* Defaults to 16px; fixes iOS zoom */
}

Rozwijany

Menu nawigacyjne powinno reprezentować bardzo długi szlak. Jestem zwolennikiem że w odpowiednich przypadkach przesunęły się one poza ekran. .

.breadcrumbs {
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  scroll-padding-inline: calc(var(--nav-gap) / 2);

  & > .crumb:last-of-type {
    scroll-snap-align: end;
  }

  @supports (-webkit-hyphens:none) { & {
    scroll-snap-type: none;
  }}
}

Style nadmiarowe umożliwiają skonfigurowanie takiego interfejsu użytkownika:

• Przewijanie poziome z ograniczeniem przewijania.
• Dopełnienie przewijania w poziomie.
• Jeden punkt przyciągania do ostatniego elementu. Oznacza to, że podczas wczytywania strony pierwszy elementy składowe zostały przyciągnięte i widoczne.
• Usuwa punkt przyciągania z przeglądarki Safari, który ma problemy z orientacją w poziomie. kombinacje efektu przewijania i przyciągania.

Zapytania o multimedia

Subtelną korektą w mniejszych widocznych obszarach jest ukrycie ekranu głównego. label, opuszczając tylko ikonę:

@media (width <= 480px) {
  .breadcrumbs .home-label {
    display: none;
  }
}

Ułatwienia dostępu

Ruch

W tym komponencie nie ma dużo ruchu, ale jeśli zawiniesz przejście w mechanizmie kontroli prefers-reduced-motion może zapobiec niepożądanym ruchom.

@media (prefers-reduced-motion: no-preference) {
  .crumbicon {
    transition: box-shadow .2s ease;
  }
}

Żaden inny styl nie wymaga zmiany. Efekty najechania kursorem i zaznaczenia są świetne. i wartościowe bez transition. Jeśli ruch jest prawidłowy, dodajemy subtelny do interakcji.

JavaScript

Po pierwsze, niezależnie od typu routera używanego w witrynie lub aplikacji, gdy użytkownik zmieni menu nawigacyjne, URL musi zostać zaktualizowany, wyświetli odpowiednią stronę. Po drugie, aby znormalizować wrażenia użytkownika, upewnij się, podczas przeglądania strony <select> nie występują żadne nieoczekiwane nawigację .

Dwa kluczowe wskaźniki wygody użytkowników, które mają być obsługiwane przez JavaScript: zmienił się i chętniej <select> zapobiega uruchamianiu zdarzeń zmiany.

Zastosowanie: <select> wymaga zapobiegania zdarzeniom . W Windows Edge, a zapewne w innych przeglądarkach, wybierz changed jest wywoływane, gdy użytkownik przegląda opcje za pomocą klawiatury. Dlatego czyli „chętny”, ponieważ użytkownik wybrał tylko pseudoopcję, np. najechanie kursorem lub zaznaczyć, zanim jeszcze potwierdził(a) swój wybór za pomocą: enter ani click. Pragniący sprawia, że funkcja zmiany kategorii komponentu jest niedostępna, ponieważ otwarcie pola wyboru i przeszukanie elementu spowoduje uruchomienie zdarzenia, zmienić stronę, zanim użytkownik będzie gotowy.

Lepszy zmieniony <select>

const crumbs = document.querySelectorAll('.breadcrumbs select')
const allowedKeys = new Set(['Tab', 'Enter', ' '])
const preventedKeys = new Set(['ArrowUp', 'ArrowDown'])

// watch crumbs for changes,
// ensures it's a full value change, not a user exploring options via keyboard
crumbs.forEach(nav => {
  let ignoreChange = false

  nav.addEventListener('change', e => {
    if (ignoreChange) return
    // it's actually changed!
  })

  nav.addEventListener('keydown', ({ key }) => {
    if (preventedKeys.has(key))
      ignoreChange = true
    else if (allowedKeys.has(key))
      ignoreChange = false
  })
})

W tym celu należy zwracać uwagę na przypadki braku klawiatury w każdym <select> i określić, czy naciśnięty klawisz to potwierdzenie nawigacji (Tab lub Enter) lub nawigacji przestrzennej (ArrowUp lub ArrowDown). W związku z tym determinacja, komponent może zdecydować, czy zaczekać, czy też zakończyć, gdy zdarzenie dla Uruchomiono <select> element.

Podsumowanie

Wiesz już, jak to zrobiłem. Jak Ty? 🙂

Stosujmy różne podejścia i poznajmy sposoby budowania obecności w internecie. Utwórz wersję demonstracyjną, a potem dodaj linki do funkcji tweetuj mi. znajdziesz poniżej w sekcji z remiksami na karcie Społeczność.

Remiksy utworzone przez społeczność

• Tux Solbakk jako komponent internetowy: demonstracja i kod