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.

 

Chcesz, żebym któreś z tych menu zakodowała i krok po kroku omówiła w osobnym poście? Daj znać w komentarzu, które najbardziej Ci się podoba!  😉

10 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ę 😉

Dodaj komentarz

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