Menu nie musi być nudne – 10 inspirujących efektów

10 pomysłów na ciekawe menu

Zaskocz użytkownika ciekawą animacją menu na Twojej stronie lub aplikacji!

Nawigacja jest bardzo ważnym elementem każdej strony internetowej. Poniżej znajdziesz 10 inspiracji – zarówno na wersję desktop-ową jak i na urządzenia mobilne.

1. Toggle Burger Menu Animation

Autor:  Marian Breitmeyer

See the Pen Toggle Burger Menu Animation by Marian Breitmeyer (@marianbreitmeyer) on CodePen.

2. Page Tilt Effect

Autor: Marco Fugaro

See the Pen Page Tilt Effect by Marco Fugaro (@marco_fugaro) on CodePen.

3. CSS-only menu hover effects

Autor: sathish

See the Pen xdmgA by sathish (@sathish) on CodePen.

4. CSS3 Responsive menu effect

Autor: Bogdan Blinnikov

See the Pen css3 Responsive menu effect by Bogdan Blinnikov (@bonkalol) on CodePen.

5. Gooey hamburger menu

Autor: huyle

See the Pen Gooey hamburger menu by huyle (@huyle2607) on CodePen.

6. Vertical Layout with Navigation

Autor: Ettrics

See the Pen Vertical Layout with Navigation by Ettrics (@ettrics) on CodePen.

7. Fullscreen flexbox overlay navigation

Autor: Mirko Zorić

See the Pen Fullscreen flexbox overlay navigation by Mirko Zorić (@fluxus) on CodePen.

A tutaj kilka przykładów nawigacji na urządzeniach mobilnych! Bardzo pomysłowe! Który efekt wykorzystasz w swoim kolejnym projekcie?

8. Responsive Navigation Ideas

Autor: Andrzej Dubiel

Aż osiem przykładów! Koniecznie zobacz wszystkie!

See the Pen Responsive Navigation Ideas by Andrzej Dubiel (@itsfame) on CodePen.

9. Triangular Mobile Menu

Autor:  Jo Dahl

See the Pen Triangular Mobile Menu by Jo Dahl (@ehrenglaube) on CodePen.

10. Mobile Menu Style

Autor: Raiden Kaneda

See the Pen Mobile Menu Style by Raiden Kaneda (@Kaneda9) on CodePen.

12 odpowiedzi do “Menu nie musi być nudne – 10 inspirujących efektów”

  1. Moimi faworytami są dwa kody menu. Jest to numer 5 i 9. Pierwszy z nich moim zdaniem urzeka swoją prostotą w funkcjonalności. Jest świetnym rozwiązaniem na małe urządzenia mobilne. Gooey hamburger menu – bo o nim piszę, zajmując mało miejsca na urządzeniu takim jak smartfon powoduje, że mamy jeszcze do dyspozycji sporą część ekranu. Drugi mój faworyt to dla mnie inspiracja i myślę, że spodoba się w większości frontendowcom. To kod z dynamiczną geometrią z fantazyjnie skomponowanym mechanizmem poruszania się ikon wyboru. Gratka dla fanów dużych monitorów. Na urządzeniu większej rozdzielczości odda w pełni swoją oryginalność. Chciałbym też nadmienić, że dla początkującego weba takiego jak ja, wszystkie te projekty są świetne. W każdym można znaleźć coś dla siebie. Są tematyczne i z fajnym interfejsem.

  2. Super efekty, ale raczej do poćwiczenia programowania niż wykorzystania ich w realnym projekcie. W rzeczywistości większość z nich po kilku użyciach stanie się strasznie upierdliwa dla użytkownika (czas trwania animacji, dziwne drgania, podskakiwanie etc.) i zachwyt szybko zamieni się w silną irytację 😉

  3. Trzeba przyznać, większość z powyższych rozwiązań jest co najmniej efektowna. Pytanie pozostaje na ile intuicyjna, ale to kwestia już stricte UXowa i do badań. W kontekście SEO, za każdym razem gdy widzę bardzo fikuśne menu (na stronie internetowej) biorę głęboki wdech i sprawdzam jak to zostało zrobione, jaką ilością kodu, opóźnieniem oraz czy nie ma duplikacji menu dla deskptopu oraz mobile. Często takie rozwiązania są atrakcyjne dla użytkownika, ładne, użyteczne, nawet względnie szybkie ale nie zawsze przyjazne pod kątem SEO. Grunt by pamiętać o sprawdzeniu ich pod tym kątem.

    1. Słuszna uwaga, zgadam się w 100%. Tutaj bardziej chodziło mi o ćwiczenie swoich umiejętności programistycznych i inspirowanie się ciekawymi pomysłami. Natomiast UX zdecydowanie jest niezwykle ważny i czasami takie nietypowe rozwiązania bardziej zniechęcają użytkowników.

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *