10 fragmente de cod CSS și JavaScript pentru crearea de navigații receptive

Una dintre cele mai complexe părți ale unui site bun, receptiv este navigarea. Poate dura ceva timp pentru a-ți da seama și există o mulțime de tutoriale care să te ajute în acest sens. Dar sunt și un fan al utilizării fragmentelor de cod precum cele pe care le-am colectat pentru acest articol.

Toate aceste fragmente de navigare receptive pot fi editate și clonate gratuit pentru propriile proiecte. De asemenea, au o varietate de stiluri, așa că va exista ceva aici care va funcționa pentru toate tipurile de site-uri web.

1. Aspect de pagină completă receptiv de Johnny Mango

Acest exemplu receptiv arată cât de departe puteți duce faza de prototipare a unui site web. Veți observa că navigarea are o caracteristică interesantă atunci când treceți cu mouse-ul și vă focalizați automat pe linkuri. Acest efect poate fi modificat pe un site web „în direct” cu aceeași navigare, dar este util în acest exemplu pentru a arăta UI/UX-ul paginii.

Vedeți demonstrația de navigare cu Pen Responsive cu Kube de Johnny Mango

2. Dropdown Navbar de Tania Rascia

Dacă aveți nevoie de elemente derulante mai lungi în navigarea dvs., atunci acest meniu ar putea funcționa mai bine. Este o alternativă puternică la navigațiile de bază, care prezintă doar o mână de elemente de meniu. În acest caz, veți găsi o listă simplă de link-uri cu un drop-down foarte mic. Legăturile submeniului apar numai la un eveniment de clic care este gestionat de jQuery. Puteți schimba acest lucru în doar CSS, dar veți pierde declanșatorul de clic.

Totuși, pentru un design atât de curat, sunt surprins de cât de multă versatilitate oferă dezvoltatorilor acest fragment.

Vedeți bara de navigare dropdown responsive pentru stilou de Tania Rascia

3. Aspect pe o singură pagină de Jan Czizikow

Meniurile de navigare pe o singură pagină au nevoie de dragoste la fel ca oricare altul. Acesta este un exemplu perfect de navigare pe o singură pagină în acțiune. Linkurile derulează în jos cu o animație lină, dar nu te lasă să aștepți prea mult.

Ca să nu mai vorbim că se redimensionează automat la potrivirea perfectă, indiferent de dimensiunea browserului tău. Aș recomanda mai ales acest tip de navigare pentru o pagină de vânzări sau un simplu site de portofoliu. Este curat și oferă câteva caracteristici excelente de animație alături de tehnicile de răspuns.

Vedeți Pen Navigare complet receptivă cu animații CSS și jQuery de Jan Czizikow

4. Red Dropdown Menu de Stephanie Walter

Dezvoltatorul Stephanie Walter a construit câteva proiecte interesante pentru web. Acest fragment este doar un exemplu care prezintă o navigare de un roșu aprins, receptiv.

Link-urile au un pic mai dinamic cu o caracteristică selectată personalizată și un efect de hover frumos pentru a porni. Când redimensionați, veți observa că navigarea folosește în schimb un meniu derulant glisant. Aproape că aș opta pentru o listă de link-uri la nivel de bloc pentru mobil, dar aceasta funcționează mult mai bine având în vedere submeniul.

Vedeți Navigarea Pen Responsive pe mai multe niveluri de Stephanie Walter

5. Design pur CSS de Ahmad Hjazy

Iată un design unic folosind CSS pur pentru navigare. Este un meniu vertical cu legături de navigare care imită tabelul periodic al elementelor.

Efectele hover sunt puțin întârziate, dar, fără îndoială, interesante. Ca să nu mai vorbim că stilul receptiv este surprinzător de utilizabil. Poate cea mai impresionantă parte este modul în care întregul exemplu folosește numai CSS .

Vezi meniul de navigare responsive Pen CSS de Ahmad Hjazy

6. Antet responsive Sticky de Marc Libunao

Am menționat designul unei singure pagini într-un fragment anterior, iar acest antet receptiv urmează o traiectorie similară. Singura diferență este că această navigare are un bloc puțin mai mare pe pagină și gestionează designul responsiv al paginii puțin diferit.

Când redimensionați browserul, veți observa că acest exemplu folosește pictograma hamburger cu o animație distractivă. Este drăguț având în vedere stilul, dar s-ar putea să nu fie toată lumea.

Vedeți navigarea din antetul lipicios Pen Responsive de MarcLibunao

7. Responsive & Touch-Friendly de Dragoeco

Toate site-urile web bune ar trebui să fie prietenoase cu atingerea în mod implicit și asta face ca această navigare să fie și mai atrăgătoare pentru designeri.

Fiecare link duce la o pagină nouă, dar puteți atinge pentru a trece cu ușurință în meniurile drop-down pe orice dispozitiv tactil. Această caracteristică lipsește adesea din meniurile de navigare și este unul dintre motivele pentru care meniurile drop-down pot fi dificil de proiectat.

Vedeți Navigarea drop-down Pen: receptivă și prietenoasă la atingere de Dragoeco

8. Link-uri simple de navigare de la AnabolicHippo

Când mă gândesc la meniuri simple de navigare, mă gândesc la un design ca acesta. Fiecare link apare ca element de bloc propriu, chiar și pe ecrane mai mici. Nu există niciun meniu de hamburger și nicio funcție ascunsă de meniu animat. În schimb, legăturile se redimensionează și se rup în linii separate.

Cea mai dificilă parte este gestionarea efectului drop-down pe dispozitivele mobile. Multe dintre linkuri au submeniuri și vor funcționa la fel pe ecrane mai mici.

Aș spune că acest lucru funcționează cel mai bine pentru site-urile cu submeniuri puține sau fără submeniuri, dar merită să încercați pe mobil pentru a vedea ce părere aveți despre experiență.

Consultați meniul de navigare cu creion receptiv de la AnabolicHippo

9. Meniul Cortina Playstation de Louis Chenais

Dezvoltatorul Louis Chenais a creat una dintre navigațiile mele favorite, bazate pe site-ul PlayStation. Louis numește acest lucru un „meniu cortină” în care alunecă în vedere, depășind întreaga pagină. Acest lucru este comun pentru interfețele mobile și a devenit rapid popular și pentru designerii web.

Un lucru care îmi place foarte mult este stilul de animație. Este suficient de elegant și de rapid pentru a afișa linkurile fără a-i lăsa pe utilizatori plictisiți. Și cel mai bine, se pare că ar putea funcționa pe un site web de producție.

Vedeți Principiul de navigare cu creion responsive #3 – Meniul cortină de Louis Chenais

10. Mega-Meniu receptiv de Samir Alley

Puteți căuta pe web și puteți găsi sute de exemple de mega meniuri de navigare. Acestea apar de obicei pe bloguri și site-uri web de știri mai mari, dar sunt populare și pe magazinele de comerț electronic sau pe site-urile mari ale agențiilor. Cea mai dificilă parte a unui mega-meniu este să-l facă pe deplin receptiv. Datorită acestui mic fragment, puteți relua designul mega meniului pentru a se potrivi cu ușurință pe orice ecran.

Pe mobil, folosește o navigare glisantă pentru a afișa toate linkurile interne într-un singur meniu. Acest lucru poate părea puțin enervant, dar puteți folosi și jQuery pentru a ascunde sub-linkurile dacă acest lucru are sens. Este încă una dintre cele mai bune soluții receptive pe care le-am văzut pentru a rula un mega meniu pe desktop fără a înstrăina utilizatorii de telefonie mobilă.

Vedeți Mega Meniul Pen Responsive – Navigare pe aleea samir