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.
W tej chwili to najbardziej przydatne będą RWD. Ja głosuję na 10, ale serce drgnęło przy 2, a spodobała się jeszcze 7.
9. triangle bardzo fajne czy można zobaczyć krok po kroku jak zrobić coś podobnego?
Menu 5 i 7 jest super 🙂
Świetny efekt w menu nr 9 🙂
Nieszablonowe pomysły, bardzo ciekawe 🙂
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.
Menu nr. 9 🙂
Super! 1,4,5 i 9 najbardziej mnie zainteresowały 🙂
Według mnie najlepsze jest 9. Jest najciekawsze i oryginalne.
Osobiście uważam, że najbardziej zgodna z tytułem artykułu jest propozycja 9 🙂
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ę 😉
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.
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.