Sadržaj
No problem je u tome što mnogi od tih obrazaca nisu u potpunosti kompatibilni s nekim preglednicima ako se CSS3 koristi za obavljanje ovog zadatka.
Zahvaljujući Javascriptu ovu vrstu efekata i animacija možemo učiniti mnogo kompatibilnijima s preglednicima i na taj način im pružiti potrebnu podršku.
U ovom ćemo vodiču vidjeti kako napraviti potpuno osjetljivu navigacijsku traku pomoću Javascript Responsive Nav dodatka.
Ovaj dodatak je otvorenog koda i možemo ga koristiti u bilo kojem projektu, dolazi sa stilskom tablicom kako bismo ga mogli prilagoditi i potpuno ovisi o drugim Javascript knjižnicama, poput jQueryja.
U HTML -u ćemo samo trebati izraditi popis za korištenje izbornika i dati mu identifikator kako bismo ga mogli odabrati putem skripte koja je potrebna dodatku.
Također povezujemo Responsive Nav dodatak i povezujemo ga s dokumentom, koji se može preuzeti sa njegove službene stranice ili izravno na Githubu, možemo preuzeti samo .js datoteku ili ako želite možete preuzeti cijelu .zip datoteku, za to tutorial Koristit ću samo datoteku responsive-nav.min.js.
Izrađujemo demo web stranicu koju nazivamo responsive.html
Responzivna navigacija
- Početak
- Oko
- Usluge
- Blog
- Kontakt
Lorem ipsum pain sit amet, consectetuer adipiscing.
Budite egestas, ante et vulputate volutpat
Zatim ćemo dodati css u datoteku styles.css sa sljedećim kodom
tijelo {margina: 0; punjenje: 0; pozadina: # 3d3d3d; font-family: Arial, sans-serif; } img {max-width: 100%; } #content {background-color: # E6E6FA; margina: 20px auto 0; punjenje: 20px; širina: 80%; } #nav {background-color: # 4C76AE; } #nav ul {margina: 0; punjenje: 0; širina: 100%; prikaz: blok; list-style: none; } #nav ul li {širina: 100%; prikaz: blok; list-style: none; } #nav ul li a {display: block; padding: 10px 9px; širina: 100%; veličina fonta: 1,1em; font-weight: normal; pozadina: # 4c76ae; boja: # cad7ea; ukras teksta: nema; } #nav ul li a: hover {background: # 00567f; } .js #nav {clip: rect (0 0 0 0); max-visina: 0; položaj: apsolutni; prikaz: blok; preljev: skriven; zumiranje: 1; } # nav.opened {max-height: 9999px; } # nav-toggle {font-size: 1.2em; font-weight: bold; padding: 3px 9px; margina-lijevo: 15px; ukras teksta: nema; rub-radijus: 3px; boja: #fefefe; pozadina: # 4c7ab6; margin-bottom: 15px; }Do sada će to biti opća tablica stilova, sada ćemo stvoriti tablicu stilova koja će prilagoditi izbornik ako se zaslon smanji na 640 piksela ili manje, za to ćemo primijeniti neke stilove unutar svojstva Medijski upiti css3 koji će se primijeniti na uređajima s minimalnom rezolucijom od 640px. Ako je razlučivost veća, koristit će se definirani opći css.
@medijski zaslon i (minimalna širina: 640px) {.js #nav {položaj: relativno; } .js # nav.closed {max-height: none; } # nav-toggle {display: none; } #nav ul li a {border-right: 1px solid # 5E88BF; prikaz: blok; plovak: lijevo; širina: auto; pozadina: nema; punjenje: 11px 15px; font-weight: normal; ukras teksta: nema; boja: # E6E6FA; } #nav ul li a: hover {background: # 00567f; boja: # cad7ea; } h1 {boja: # 90b9a0; veličina fonta: 2,5em; poravnavanje teksta: središte; }}Je li vam se svidio i pomogao ovaj vodič?Autor možete nagraditi pritiskom na ovaj gumb kako biste mu dali pozitivan bod 
