Google Partner arturkosinski.pl
Skontaktuj się
Wyszukaj na stronie...
Zamknij wyszukiwarkę

Menu na stronie internetowej – przegląd popularnych rozwiązań

Ostatnia aktualizacja treści Ostatnia aktualizacja: 29 grudnia 2021

Nawigacja na stronach internetowych ewoluuje wraz z rozwojem technologii. Kilkanaście lat temu 99% stron internetowych składało się z kolumny bocznej z menu i kolumny głównej z treścią. W dzisiejszych czasach na szczęście jest dużo więcej efektownych rozwiązań menu na stronach internetowych. W tym artykule poznasz najciekawsze propozycje i moje rekomendacje bazujące na ponad 10-letnim doświadczeniu w tworzeniu stron.

Menu na stronie internetowej

Z tego artykułu dowiesz się:

  • jakie są rodzaje menu na stronach internetowych
  • przykłady menu poziomego na stronie www
  • co to jest mega menu
  • przykłady menu pionowego na stronie internetowej
  • przykłady menu ukrytego na stronie www
  • jakie menu stosować na komputerach, a jakie na urządzeniach mobilnych – moje rekomendacje

Rodzaje menu na stronach internetowych

W trakcie tworzenia stron internetowych można przyjąć różne koncepcje rozwiązania głównej nawigacji (menu strony). Bardzo często na stronach internetowych istnieje więcej niż jedno menu, jednak w tym artykule skupimy się tylko na menu głównym, pomijając dodatkowe nawigacje techniczne, linki w stopce, linki w sidebarze (pasku bocznym), itd.

Najczęściej stosowane rozwiązania dla menu strony internetowej to:

  • menu poziome (horyzontalne)
  • menu pionowe (wertykalne)
  • menu ukryte

Dodatkowo każde z tych menu może mieć jeden lub kilka poziomów zagnieżdżenia. Przyjrzyjmy się teraz konkretnym przykładom.

Przykłady menu poziomego na stronach internetowych

Menu poziome to aktualnie najczęściej stosowane rozwiązanie nawigacyjne na stronach internetowych. W tego typu układzie menu zlokalizowane jest gdzieś w górnej części strony, zwykle w okolicach logo. Linki w takim menu ułożone są w jednej poziomej linii (czasem w dwóch, gdy linków jest dużo, jednak nie jest to rekomendowane rozwiązanie – w tej sytuacji warto zastosować menu pionowe, o którym dowiesz się za chwilę).

Przyjęło się, że na stronach internetowych w górnym pasku nawigacyjnym umieszcza się z lewej strony logo, a z prawej strony menu. Istnieją jednak też inne rozwiązania, np. logo w środku, a menu podzielone na lewą i prawą stronę, czy nawet logo po prawej stronie, a menu po lewej.

01 Menu na stronie internetowej

Menu horyzontalne na stronach internetowych może mieć jeden lub wiele poziomów zagnieżdżenia (tzw. submenu). W przypadku jednego poziomu zagnieżdżenia stosuje się zwykle wysuwany panel pojawiający po najechaniu na link nadrzędny.

02 Menu na stronie internetowej

Jest to świetne rozwiązanie, gdy nasze menu ma jeden poziom zagnieżdżenia. Zdecydowanie ułatwia użytkownikowi poruszanie się po stronie (mamy więc pozytywny wpływ na user experience), ponieważ nie musi on najpierw wchodzi w link nadrzędny i dopiero szukać linków podrzędnych na podstronie. Takie menu ma też pozytywny wpływ na widoczność naszej strony w Google, ponieważ poprawia linkowane wewnętrzne serwisu. Gdy na naszej stronie internetowej jest więcej poziomów zagnieżdżenia nawigacji, można stosować kolejne submenu, które pojawiają się na przykład z boku.

03 menu poziome kilka poziomów

W mojej ocenie takie rozwiązanie ma sens maksymalnie do drugiego / trzeciego poziomu zagnieżdżenia. W przypadku dalszych zagnieżdżeń poruszanie się po takim menu może być kłopotliwe. Bardzo łatwo jest zjechać myszką poza menu będąc np. na 4 poziomie zagnieżdżenia, a wtedy całe menu nam znika i musimy dostawać się do tego miejsca od nowa. Potrafi to być naprawdę irytujące, gdy trzeci raz próbujemy dostać się w to samo miejsce. Inny problem z dużym zagnieżdżeniem menu horyzontalnego polega na tym, że w pewnym momencie kolejne submenu może wychodzić poza ekran i zwyczajnie będzie ucięte.

Jeśli nasze menu horyzontalne ma dużo poziomów zagnieżdżenia, zdecydowanie lepszym rozwiązaniem jest wykorzystanie tzw. mega menu.

Co to jest mega menu?

Mega menu to specjalne rozwiązanie nawigacyjne dla wielokrotnie zagnieżdżonych menu na stronach internetowych. Mega menu pokazuje się naszym oczom po najechaniu na link nadrzędny w formie szerokiego panelu, który składa się z różnych elementów. Mogą w nim być na przykład:

  • kolumny z kolejnymi zagnieżdżeniami menu
  • grafiki ilustrujące dane zagadnienie
  • linki do promowanych produktów
  • dane do szybkiego kontaktu
  • inne informacje

04 megamenu poziome

Mega menu najczęściej podpinane jest do menu poziomego (horyzontalnego), jednak zdarza się, że widzimy je również w menu pionowych (wertykalnych), które omówimy w dalszej części artykułu.

05 Menu na stronie internetowej

Przykłady menu pionowego na stronach internetowych

Menu pionowe (wertykalne) było najczęściej stosowanym rozwiązaniem nawigacyjnym w starych stronach internetowych opartych o tabele. Widzieliśmy wtedy zwykle lewą kolumnę z menu oraz prawą kolumnę z treścią strony.

Takie rozwiązanie z biegiem lat ustępowało na rzecz nowoczesnych i estetycznych menu poziomych, o których pisałem wcześniej. Nadal jednak menu pionowe wykorzystywane jest bardzo często na stronach internetowych – szczególnie na takich, gdy mamy bardzo dużo pozycji w menu. Idealnym wręcz zastosowaniem takiego menu są serwisy e-commerce (sklepy internetowe), ponieważ tam mamy zwykle dużo kategorii i podkategorii produktowych. Co ciekawe, w menu pionowym również możemy zastosować rozwijany panel mega menu.

06 mega menu pionowe

Jeśli nie chcemy jednak stosować rozbudowanego mega menu, ponieważ nasza nawigacja ma jeden stopień zagnieżdżenia, z powodzeniem możemy wykorzystać wysuwane panele pod linkiem nadrzędnym.

06 menu pionowe

Przykłady menu ukrytego na stronach internetowych

Wraz z rozwojem nowych technologii oraz urządzeń mobilnych, coraz częściej na stronach internetowych stosowane jest menu ukryte. Jest to rozwiązanie polegające na tym, że na pierwszym ekranie strony nie widzimy w ogóle menu, a jedynie przycisk, który je otwiera. 

07 menu ukryte

Po kliknięciu w przycisk otwiera się nakładka na stronę, w której zaprezentowane są linki menu. Tego typu rozwiązanie jest najczęściej stosowane na urządzeniach mobilnych, jednak coraz więcej firm wdraża taki schemat również na stronach desktopowych (na komputery i duże ekrany). Na pewno takie rozwiązanie zwiększa estetykę strony – nie mamy nadmiaru tekstu. Zmusza jednak użytkownika by wykonał kliknięcie zanim jeszcze zobaczy menu. Może to negatywnie wpływać na user experience, a także być kłopotliwe dla starszej grupy odbiorców, która nie będzie znała tego rozwiązania i poczuje się zagubiona.

08 menu ukryte rozwinięte

Moje rekomendacje odnośnie stosowania menu na komputery i urządzenia mobilne

Podczas tworzenia stron internetowych dla moich Klientów, najczęściej stosuję taki zestaw rozwiązań w kwestii menu:

  • jeśli główny poziom nawigacji ma maksymalnie 6-7 linków oraz cała nawigacja ma jeden stopień zagnieżdżenia – wykorzystuję menu poziome (horyzontalne)
  • jeśli główny poziom nawigacji ma więcej niż 7 linków – stosuję menu pionowe (wertykalne)
  • jeśli menu na wiele poziomów zagnieżdżenia – rezygnuję z wysuwanych małych submenu i tworzę panel mega menu
  • na urządzeniach mobilnych w 99% przypadków stosuję menu ukryte
  • menu ukryte na komputerach stosuję tylko dla projektów, w których najważniejsza jest estetyka projektu, a grupa docelowa firmy będzie w stanie zrozumieć ten schemat nawigacji (zwykle są to strony związane z technologią, projektowaniem, itd.).

Myślę, że to dość obszerne opracowanie na temat nawigacji na stronach internetowych będzie wystarczające, aby każdy bez problemu poznał różnice i mógł podjąć decyzję jakie menu zastosować na swojej stronie internetowej. Pamiętaj, że nie musisz ograniczać się tylko do jednego menu. Możesz z powodzeniem wydzielić np. menu produktowe, menu techniczne, menu z opcjami konta użytkownika, itd. Z powodzeniem możesz też mieszać zaproponowane tu sposoby prezentacji menu.

Mam nadzieję, że wskazówki z tego artykułu były dla Ciebie przydatne. Jeśli po przeczytaniu tego tekstu jesteś zainteresowany zleceniem mi wykonania strony internetowej dla Twojej firmy, skontaktuj się ze mną.

Masz pytania na ten lub inny temat?

Skontaktuj się

Zobacz także

Consent Mode, czyli tryb uzyskiwania zgody – jak informować o plikach cookies?

Kategorie: Strony internetowe

Zbieranie danych o użytkownikach strony internetowej czy sklepu internetowego znacznie ułatwia procesy marketingowe – im więcej wiemy o potencjalnym...

Czytaj więcej

Strony internetowe na Smart Watch i Smart TV

Kategorie: Strony internetowe

Zastanawiałeś się kiedyś, jak wygląda strona internetowa na urządzeniach typu Smart Watch, czy Smart TV? Jeśli nie, najwyższy czas...

Czytaj więcej

Jak sprawdzić czy Twoja strona jest responsywna?

Kategorie: Strony internetowe

Jeśli posiadasz stronę www lub planujesz zlecić jej stworzenie – upewnij się, że jest / będzie ona responsywna. Z...

Czytaj więcej

Dlaczego moja strona nie wyświetla się w Google?

Kategorie: Strony internetowe

Posiadasz stronę internetową, ale nie jest ona widoczna w Google? Sprawdź moje wskazówki co zrobić, aby Twoja strona była...

Czytaj więcej

Masz czat / Messenger na stronie? Sprawdź ten częsty błąd

Kategorie: Strony internetowe E-commerce

Cześć, jeśli masz (lub planujesz mieć) na swojej stronie internetowej wtyczkę czatu np. Messenger lub inny to koniecznie sprawdź,...

Czytaj więcej
strony www olsztyn

Rozważasz współpracę ze mną?

Sprawdź, dlaczego warto.

Bezpośredni kontakt
Rozwiń informację
Współpracowałeś kiedyś z agencją i wiesz jak ciężko się komunikować z supportem? U mnie jest inaczej. Wykonuję osobiście większość prac i kontaktujesz się tylko ze mną.
Działania, które przynoszą efekty
Rozwiń informację
Przez lata testowałem (i nadal to robię) różne rozwiązania by skupić się na tych, które po prostu działają.
Szybkie terminy realizacji
Rozwiń informację
Większość zleceń wykonuję przed zadeklarowanym terminem. Nie obiecuję gruszek na wierzbie!
Transparentność
Rozwiń informację
Przekazuję wszelkie dostępy do stron internetowych, kont reklamowych, analityki. Rozliczenia ze mną są klarowne, każda oferta opisana jest w sposób, z którego jasno wynika podział mojego wynagrodzenia oraz opcji dodatkowych (jak płatne wtyczki do stron internetowych, czy budżety reklamowe w kampaniach marketingowych).
Jakość agencji w cenie freelancera
Rozwiń informację
Wąska specjalizacja w konkretnych rozwiązaniach internetowych (tworzenie stron i sklepów internetowych, marketing online w ekosystemie Google) pozwala realizować skuteczne usługi niższym kosztem niż duże firmy.
Ciągły rozwój
Rozwiń informację
Od 2010 roku, kiedy wykonałem pierwsza stronę internetową, stale podnoszę kwalifikacje w obszarach swojej specjalizacji poprzez najróżniejsze kursy, szkolenia, grupy branżowe, itd.
Darmowa dawka wiedzy
Rozwiń informację
Dzielę się wiedzą, doświadczeniem i przydatnymi wskazówkami na blogu i kanale YouTube za darmo - sprawdź i subskrybuj kanał oraz newsletter. Zobacz także kurs płatny - wykład mp3 na temat podstawowych form zdobywania klientów przez internet.
Certyfikowany ekspert
Rozwiń informację
Moja wiedza z zakresu prowadzenia kampanii reklamowych potwierdzona jest certyfikatami Google Ads z różnych kategorii oraz statusem Google Partner.
Bogate doświadczenie
Rozwiń informację
Współpracowałem łącznie z kilkoma setkami firm i osób prywatnych, organizacjami małymi i dużymi, ministerstwami, związkami sportowymi, firmami zagranicznymi, itd.
Wszystko w jednym miejscu
Rozwiń informację
Od budowy strony internetowej, przez skuteczne formy marketingu po analitykę i optymalizację działań - wszystko u jednego, solidnego dostawcy.

Skontaktuj się

Zapisz się na mój newsletter i otrzymuj darmowe porady oraz informacje o promocjach.

Poznaj opinie moich Klientów

referencje Artur Kosiński 2

Z przyjemnością rekomenduję firmę Pana Artura jako bardzo profesjonalnego dostawcę rozwiązań internetowych opartych na WordPress. Rozpoczęliśmy od prostych stron typu landing page. Byliśmy tak bardzo zadowoleni z każdego kolejnego projektu, że zdecydowaliśmy się współpracować gdziekolwiek jest to możliwe, m.in. przy optymalizacji, utrzymaniu, projektowaniu, itd.

Filip, crescendoapp.com
referencje artur kosinski

Z firmą Pana Artura prowadzimy stałą współpracę przy promocji naszych gabinetów kosmetycznych. Od czasu rozpoczęcia współpracy widzimy znaczny wzrost ilości nowych klientów. Polecam wszystkim firmom, które chcą rozwinąć skrzydła.

Kasia, chimera.olsztyn.pl
referencje Artur Kosiński 1

Współpraca między naszymi firmami rozpoczęła się w 2015 roku, trwa do dzisiaj i odbywa się online. Zakres współpracy obejmuje tworzenie wielu stron www, pozycjonowanie strony i projekty graficzne. Wszystkie usługi były realizowane terminowo i cechowały się wysoką jakością.

Steve, treatmed.pl
referencje-miejskie-ziele

Pan Artur nigdy nie użył słów “nie da się”, sam zaproponował najbardziej optymalne rozwiązania i możliwości. Współpracując miałam poczucie pełnego wsparcia i bezpieczeństwa.

Małgorzata, miejskieziele.pl

Masz pytania? Skontaktuj się ze mną.

Przejdź do kontaktu
Zamknij okno

Zapisz się na mój newsletter i otrzymuj więcej darmowych materiałów.

Dostępność WCAG