Przykłady nagłówków stron: 10 projektów na żywo w HTML i CSS | We.Inc
10 oryginalnych projektów nagłówków stron do edycji na żywo: układy logo i nawigacji, miejsce na CTA, przyklejone nagłówki, menu mobilne bez JavaScript oraz lista kontrolna nagłówka.
Nagłówek strony to pasek u góry każdej podstrony z logo, główną nawigacją i zwykle jednym przyciskiem akcji. Dobre nagłówki mają od pięciu do siedmiu linków, logo po lewej prowadzące na stronę główną i zwijają się w opisane menu na telefonach. Poniżej dziesięć oryginalnych projektów nagłówków z edytowalnym kodem.
Układy nagłówków i kiedy ich używać
Układ
Najlepszy dla
Uważaj na
Logo po lewej, linki po prawej
Większości stron firmowych
Zbyt wiele linków wypychających CTA poza ekran
Logo po lewej, linki na środku, CTA po prawej
Stron SaaS i usługowych
Wymaga dość szerokości; zwijaj wcześniej
Logo na środku, linki pod spodem
Sklepów, restauracji, serwisów redakcyjnych
Wyższy nagłówek zajmuje więcej ekranu
Pasek pomocniczy nad głównym paskiem
Lokalnych firm nastawionych na telefony
Dwa paski na telefonie; połącz je
Przyklejony kompaktowy pasek
Długich stron
Zasłanianie celów kotwic i treści
Galerie nagłówków zwykle pokazują obrazki. Tutaj są działające nagłówki zbudowane w czystym HTML i CSS z wymyślonymi markami, więc możesz zmieniać rozmiar ramki, edytować kod i skopiować wersję pasującą do Twojej strony.
Filtruj przykłady według układu albo przewiń wszystkie dziesięć.
Edytuj kod w dowolnym przykładzie; izolowana ramka przerysowuje się podczas pisania.
Skopiuj HTML i CSS i wstaw swoje logo, linki i tekst przycisku.
Przed publikacją przejdź przez listę kontrolną na końcu.
Umieść linki w elemencie nav z aria-label, a bieżącą stronę oznacz przez aria-current="page".
Element header liczy się jako punkt orientacyjny banera strony tylko wtedy, gdy nie jest wewnątrz article, aside, main, nav ani section.
Przyklejone nagłówki potrzebują wartości top, na przykład top: 0, inaczej position: sticky działa jak relative.
Przy przyklejonym nagłówku dodaj nagłówkom treści scroll-margin-top, żeby linki do kotwic nie chowały nagłówka pod paskiem.
Każdy cel dotyku niech ma co najmniej 24 na 24 piksele CSS, aby spełnić wymóg rozmiaru celu WCAG 2.2 na poziomie AA; 44 piksele są wygodniejsze.
Najczęściej zadawane pytania
Co powinien zawierać nagłówek strony?
Logo prowadzące na stronę główną, główną nawigację i, w przypadku większości stron firmowych, jeden główny przycisk, na przykład Zarezerwuj lub Poproś o wycenę. Lokalne firmy często dodają numer telefonu. Pomiń wszystko, czego odwiedzający nie potrzebują na każdej stronie.
Jak wysoki powinien być nagłówek strony?
Nie ma sztywnej reguły. Dla pojedynczego paska na desktopie typowe jest około 56 do 80 pikseli, a na telefonach mniej. Przyklejony nagłówek powinien być jak najniższy, bo przez cały czas zasłania treść.
Czy da się zbudować menu mobilne bez JavaScript?
Tak. Element details z summary jako przyciskiem menu natywnie otwiera i zamyka linki i działa z klawiaturą. Przykład 6 na tej stronie używa tego podejścia. Przycisk w JavaScript z aria-expanded daje większą kontrolę nad animacją i zamykaniem.
Czy nagłówek powinien być przyklejony?
Na długich stronach, gdzie ludzie często potrzebują menu lub CTA, kompaktowy przyklejony nagłówek pomaga. Na krótkich stronach głównie zajmuje miejsce. Jeśli go używasz, niech będzie smukły, i sprawdź, czy linki wewnątrz strony lądują pod nim.
Miejsce na logo, nawigację i CTA
Ludzie szukają logo w lewym górnym rogu i oczekują, że zaprowadzi ich na stronę główną, więc trzymaj się tej konwencji, chyba że marka ma mocny powód, by je wyśrodkować. Przycisk akcji umieść skrajnie po prawej, gdzie wzrok kończy skanowanie paska.
Układaj linki według tego, czego odwiedzający potrzebują najbardziej, a nie według schematu organizacyjnego. Usługi i cennik zwykle idą przed O nas.
Nagłówki na telefonach
Poniżej około 768 pikseli większość rzędów linków już się nie mieści. Schowaj je za wyraźnie opisanym przyciskiem Menu i zostaw obok widoczne główne CTA, bo to jedyny link, który zasługuje na swoje miejsce.
Testuj przy szerokości 375 pikseli. Jeśli cokolwiek przewija się na boki, skróć etykiety lub zwijaj wcześniej.
Lista kontrolna nagłówka strony
Sprawdź to przed publikacją
Sprawdzenie
Dlaczego
Logo prowadzi na stronę główną
Najbardziej oczekiwane zachowanie nagłówka
Linki są w opisanym elemencie nav
Czytniki ekranu wymieniają go jako nawigację
Bieżąca strona oznaczona przez aria-current
Ogłasza, gdzie jest odwiedzający
Jeden główny przycisk o innym stylu
Główna akcja staje się oczywista
Przycisk menu ma widoczną etykietę tekstową
Samą ikonę łatwo przeoczyć
Widoczny obrys fokusu na każdym linku
Użytkownicy klawiatury widzą, gdzie są
Brak przewijania na boki przy 375 px
Na telefonach nagłówki psują się najpierw
Przyklejone paski nie zasłaniają celów kotwic
Napraw przez scroll-margin-top
1. Klasyczny: logo po lewej, linki i przycisk po prawej
Domyślny układ firmowy. Przycisk jest ostatnim elementem, więc kończy się na nim skanowanie.
2. Trzy strefy: logo, wyśrodkowane linki, CTA
Częsty na stronach oprogramowania. Grid utrzymuje linki naprawdę na środku niezależnie od szerokości logo.
3. Logo na środku z linkami pod spodem
Pasuje do sklepów i restauracji, gdzie nazwa marki jest bohaterem. Na wąskich ekranach linki zawijają się do drugiego rzędu.
4. Pasek pomocniczy z numerem telefonu nad głównym paskiem
Dla lokalnych firm opartych na telefonach: numer to prawdziwy link tel:, więc telefon może go wybrać.
5. Przyklejony kompaktowy nagłówek
Przewiń wewnątrz ramki. position: sticky z top: 0 utrzymuje pasek w widoku; półprzezroczyste tło pozostaje czytelne nad treścią.
6. Menu mobilne z details i summary, bez JavaScript
Summary jest przyciskiem Menu; przeglądarka obsługuje otwieranie, zamykanie i klawiaturę. Szerokie ekrany pokazują linki w linii.
7. Ciemny nagłówek z wyszukiwarką
Pole wyszukiwania ma wizualnie ukrytą etykietę, więc czytniki ekranu nadal je ogłaszają.
8. Przezroczysty nagłówek nad hero
Nagłówek leży na kolorze hero. Utrzymuj kontrast tekstu na poziomie 4.5:1 lub wyższym względem tego, co jest pod spodem.
9. Nagłówek sklepu z paskiem ogłoszeń
Krótka linia ogłoszenia nad paskiem niesie jedną ofertę; liczba w koszyku jest w tekście linku, więc jest odczytywana na głos.
10. Nagłówek mobilny, który zostawia CTA na widoku
Na telefonach linki się chowają, ale przycisk rezerwacji zostaje obok menu, bo to akcja, która się liczy.