Izveidojiet atsaucīgu izvēlni, izmantojot spraudni Responsive-Nav.js

Ir vairāki veidi, kā izveidot navigācijas izvēlnes ar atsaucīgu funkciju, tas ir, reaģē ar visām ierīcēm, kurās var apskatīt vietni.
Bet problēma ir tā, ka daudzas no šīm veidlapām nav pilnībā savietojamas ar dažām pārlūkprogrammām, ja šim uzdevumam tiek izmantots CSS3.
Pateicoties Javascript, mēs varam padarīt šāda veida efektus un animācijas daudz saderīgākas ar pārlūkprogrammām un tādējādi sniegt tām nepieciešamo atbalstu.
Šajā apmācībā mēs redzēsim, kā izveidot pilnībā reaģējošu navigācijas joslu, izmantojot Javascript Responsive Nav spraudni.
Šis spraudnis ir atvērtā koda, un mēs to varam izmantot jebkurā projektā, tam ir sava stila lapa, lai to varētu pielāgot, un tas ir pilnībā atkarīgs no citām Javascript bibliotēkām, piemēram, jQuery.
HTML kodā mums būs jāizveido tikai saraksts, lai izmantotu izvēlni, un jāpiešķir tai identifikators, lai to varētu atlasīt, izmantojot spraudņa prasīto skriptu.
Mēs arī saistām Responsive Nav spraudni un saistām to ar dokumentu, to var lejupielādēt no tā oficiālās lapas vai tieši vietnē Github, mēs varam lejupielādēt tikai .js failu vai, ja vēlaties, varat lejupielādēt visu .zip failu. apmācība Es izmantošu tikai failu adaptive-nav.min.js.
Mēs izveidojam demonstrācijas vietni, ko saucam par adaptīvu.html

 Atsaucīga navigācija

Sākt
Par
Pakalpojumi
Blogs
Kontakti

Lorem ipsum sāpes sēdēt amet, konsekventi adipiscing.

Esiet egestas, ante et vulputate volutpat

Tad mēs pievienosim css failā styles.css ar šādu kodu

 body {margin: 0; polsterējums: 0; fons: # 3d3d3d; fontu saime: Arial, sans-serif; } img {max-width: 100%; } #content {background-color: # E6E6FA; mala: 20 pikseļi auto 0; polsterējums: 20 pikseļi; platums: 80%; } #nav {background-color: # 4C76AE; } #nav ul {margin: 0; polsterējums: 0; platums: 100%; displejs: bloks; saraksta stils: nav; } #nav ul li {platums: 100%; displejs: bloks; saraksta stils: nav; } #nav ul li a {display: block; polsterējums: 10 pikseļi 9 pikseļi; platums: 100%; fonta lielums: 1.1em; fonta svars: normāls; fons: # 4c76ae; krāsa: # cad7ea; teksta dekorēšana: nav; } #nav ul li a: virziet kursoru {background: # 00567f; } .js #nav {clip: rect (0 0 0 0); maksimālais augstums: 0; pozīcija: absolūta; displejs: bloks; pārplūde: slēpta; tālummaiņa: 1; } # nav.opened {max-height: 9999px; } # nav-toggle {font-size: 1.2em; fonta svars: treknraksts; polsterējums: 3px 9px; mala pa kreisi: 15 pikseļi; teksta dekorēšana: nav; robežas rādiuss: 3 pikseļi; krāsa: #fefefe; fons: # 4c7ab6; apakšējā mala: 15 pikseļi; }

Līdz šim tā būs vispārējā stila lapa, tagad mēs izveidosim stila lapu, kas pielāgos izvēlni, ja ekrāns tiks samazināts līdz 640 pikseļiem vai mazāk, tāpēc mēs izmantojam dažus stilus css3 rekvizītu Media Queries ietvaros, kas tiks lietoti ierīcēs ar minimālo izšķirtspēju 640 pikseļi. Ja izšķirtspēja ir augstāka, tiks izmantots definētais vispārējais css.

 @media screen un (min-width: 640px) {.js #nav {position: relatīvs; } .js # nav.closed {max-height: none; } # nav-toggle {display: none; } #nav ul li a {border-right: 1px solid # 5E88BF; displejs: bloks; pludiņš: pa kreisi; platums: auto; fons: nav; polsterējums: 11px 15px; fonta svars: normāls; teksta dekorēšana: nav; krāsa: # E6E6FA; } #nav ul li a: virziet kursoru {background: # 00567f; krāsa: # cad7ea; } h1 {krāsa: # 90b9a0; fonta lielums: 2.5em; text-align: center; }}

Vai jums patika šī apmācība un palīdzējāt tai?Jūs varat apbalvot autoru, nospiežot šo pogu, lai sniegtu viņam pozitīvu punktu