10 + Responsive Menuer og Navigation Solutions

Før du bruger utallige timer, der arbejder på en lydhør menu, skal du bare stoppe og spekulere på, hvor mange mennesker der rent faktisk vil bruge ting!

Se mine egne tests og analyser i slutningen af ​​artiklen. Vær forsigtig: Brugere engagerer mindre og mindre med navigationsartikler.

Så vi sidder fast med overskriftsnavigationen ...

1. PriorityNav.js

Dette er en fantastisk løsning. Skjuler ikke alt under en knap, men viser hvad det kan, afhængigt af visningsstørrelse. Nogle gange kaldes Prioritet + Navigation.

Meget lille JS (5kb), ingen afhængigheder på jQuery.

DEMO - DOWNLOAD

2. OkayNav

En anden prioritet + løsning. Varer forsvinder på en mindre visningsport, men stadig tilgængelig under punktmenuen.

Også vanilla Javascript (ingen jQuery afhængighed). Der er en jQuery-version der synes at have nogle ekstra funktioner (swipable).

DEMO - DOWNLOAD

3. FlexMenu

Prioritet + - denne kræver jQuery, men har en masse valgmuligheder.

DEMO - DOWNLOAD

4. Prioriteret navigation

Du kan tildele prioritet for hvert menupunkt. Den lavere prioritet forsvinder først.

Denne er afhængig af jQuery.

DEMO - DOWNLOAD

4. Den mest tilbøjelige menu

Tjek denne Artikel af Dan. Det er den nemmeste måde at oprette en simpel reagerende menu på.

Der handler om 6-linjer af JavaScript og ikke meget af CSS.

DEMO

5. SlickNav

SlickNav er den traditionelle responsive menu, der sætter elementer i en dropdown 'skuffe'. Det er en af ​​de mere robuste løsninger håndterer dropdowns på flere niveauer og har solid browser support.

Det kræver jQuery.

DEMO & DOWNLOAD

6. WordPress Responsive Menu

Formentlig den mest populære drop-in nav løsning til WordPress. Har et væld af muligheder, men er dybest set en dias-in-off-canvas type menu.

Over 90k downloads og 5 stjerne ratings.

DEMO - DOWNLOAD

7. Mega Dropdown

Denne kraftige løsning er til meget komplekse menuer, der kan omfatte billeder, ikoner, flere niveauer. I skrivebordet - alle genstande er gemt inde i dropdownen, men vil udvide ud ved hjælp af visningsporten.

I mobilen ændres elementer for at udfylde mobilvisningsporten.

Denne kloge animation er fra CodyHouse-webstedet. Menuen har brug for jQuery.

DEMO - DOWNLOAD - TUTORIAL

8. Responsive Overlay

Dette mønster har dukket op i løbet af de sidste par år. Hele visningsporten erstattes med en rulningsbar menu. Både desktop og mobil har den samme handling.

Stolter på jQuery. Hvis du vil tilføje nogle fine animerede overgange, tag et kig på dette eksempel.

DEMO

9. CSS Kun Slide Menu

En del af en tutorial om Smashing Magazine, denne løsning gør brug af CSS: målvælgeren til at skifte en menu. Ingen JavaScript i syne.

Bemærk, at handlingerne er de samme for mobil og skrivebord.

DEMO - TUTORIAL

10. Fuldskærm Overlay Menu

En god tutorial og demo til en anden overlay menu løsning. Igen præsenterer disse løsninger de samme menuhandlinger til desktop og mobil.

Demoen afhænger af jQuery - men det er virkelig ikke nødvendigt, da du nemt kan erstatte funktionen toggleClass med nogle vanille JS. Selvfølgelig, hvis du allerede bruger jQuery, er det ikke et problem.

DEMO - TUTORIAL

11. Hamburger Animationer

Dette er ikke en reagerende menu som sådan, men hvis du bruger hamburgerikonet, skal du kigge på disse fantastiske skifte animationer.

Se ved Codepen

Så hvad skal du bruge?

Jeg er kommet til at tro, at jo mere du gemmer elementer væk - jo mindre bliver de brugt, hvorfor jeg begynder at favorisere prioriterede + -menuer (se andre alternativer til hamburgeren).

Se på mine analyser for et websted (med denne type menu) viser de synlige elementer klikkes meget mere end dropdown-menuerne er.

Men prioriterede menuer er kun gode, hvis du har en håndfuld menupunkter på højt niveau. Hvis du har et mere interaktivt websted, kan du gå til multi-level menuer uden for lærred.

Bemærk: Brugere ignorerer Off-Canvas Navigation

Responsivt design fortsætter med at udvikle sig fra min Original Roundup af lydhør menuer. Meget har ændret sig siden jeg først debatterede 3-linjen hamburger menuen. Min originale AB-test viste at ordet "MENU" blev tappet betydeligt mere end det såkaldte hamburgerikon.

Over et år senere gentog jeg testen og opdagede at hamburgerikonet havde fanget op. Testen viste noget langt mere foruroligende:

Mobilbrugere interagerer med navigationselementer en hel del mindre end de plejede at være.

Det har nu været to år siden, at AB-testen, og jeg vil foreslå, at interaktion er faldet endnu mere. Uden at få pedantic om tallene, vil et hurtigt blik på disse grafer vise det.

Dette er mobil sessioner på mit websted siden 2014. 2016 var et godt år:

Dette er antallet af klik eller knapper på mobilmenuknappen. De registreres som en Google Analytics-begivenhed:

Tager ikke et geni for at se brugerne tapper ikke menuknapper meget længere.

Stillingen 10 + Responsive Menuer og Navigation Solutions dukkede først på Sites for Profit.

Giv en kommentar

Dette websted bruger Akismet til at reducere spam. Lær, hvordan dine kommentardata behandles.