Turinys
Tačiau problema ta, kad daugelis šių formų nėra visiškai suderinamos su kai kuriomis naršyklėmis, jei šiai užduočiai atlikti naudojamas CSS3.
„Javascript“ dėka galime padaryti tokio tipo efektus ir animacijas daug labiau suderinamas su naršyklėmis ir taip suteikti joms reikiamą palaikymą.
Šioje pamokoje pamatysime, kaip sukurti visiškai reaguojančią naršymo juostą naudojant „Javascript Responsive Nav“ papildinį.
Šis papildinys yra atvirojo kodo ir mes galime jį naudoti bet kuriame projekte. Kartu su jo stiliaus lapu galima jį pritaikyti ir jis visiškai priklauso nuo kitų „Javascript“ bibliotekų, tokių kaip „jQuery“.
HTML sistemoje turėsime tik sukurti sąrašą, kad galėtume naudoti meniu ir suteikti jam identifikatorių, kad galėtume jį pasirinkti pagal scenarijų, kurio reikalauja papildinys.
Mes taip pat susiejame „Responsive Nav“ papildinį ir susiejame jį su dokumentu, kurį galima atsisiųsti iš jo oficialaus puslapio arba tiesiogiai „Github“, galime atsisiųsti tik .js failą arba, jei norite, galite atsisiųsti visą .zip failą. pamoka Aš naudosiu tik failą „reaguojantis-nav.min.js“.
Sukuriame demonstracinę svetainę, kurią vadiname reagavimu.html
Interaktyvi navigacija
- Pradėti
- Apie
- Paslaugos
- Tinklaraštis
- kontaktas
Skausmas „Lorem ipsum“ sėdi, o tai reiškia, kad tai palengvina.
Būkite egestas, ante et vulputate volutpat
Tada pridėsime css į failą styles.css su šiuo kodu
korpusas {paraštė: 0; paminkštinimas: 0; fonas: # 3d3d3d; šriftų šeima: Arial, sans-serif; } img {max-width: 100%; } #content {background-color: # E6E6FA; paraštė: 20 pikselių automatinis 0; paminkštinimas: 20 taškų; plotis: 80%; } #nav {background-color: # 4C76AE; } #nav ul {paraštė: 0; paminkštinimas: 0; plotis: 100%; ekranas: blokas; sąrašo stilius: nėra; } #nav ul li {plotis: 100%; ekranas: blokas; sąrašo stilius: nėra; } #nav ul li a {display: block; paminkštinimas: 10px 9px; plotis: 100%; šrifto dydis: 1.1em; šrifto svoris: normalus; fonas: # 4c76ae; spalva: # cad7ea; teksto dekoravimas: nėra; } #nav ul li a: hover {background: # 00567f; } .js #nav {clip: rect (0 0 0 0); maksimalus aukštis: 0; pozicija: absoliuti; ekranas: blokas; perteklius paslėptas; mastelio keitimas: 1; } # nav.opened {max-height: 9999px; } # nav-toggle {font-size: 1.2em; šrifto svoris: paryškintas; paminkštinimas: 3px 9px; paraštė kairėn: 15 taškų; teksto dekoravimas: nėra; ribos spindulys: 3 taškų; spalva: #fefefe; fonas: # 4c7ab6; paraštė-apačia: 15 taškų; }Iki šiol tai bus bendras stiliaus lapas, dabar mes sukursime stiliaus lapą, kuris pritaikys meniu, jei ekranas bus sumažintas iki 640 pikselių ar mažesnis, tam pritaikysime kai kuriuos stilius „css3“ medijos užklausų nuosavybėje, kuri bus taikoma įrenginiuose, kurių minimali skiriamoji geba yra 640 taškų. Jei skiriamoji geba yra didesnė, bus naudojamas apibrėžtas bendras css.
@media ekranas ir (min. plotis: 640 piks.) {.js #nav {pozicija: giminaitis; } .js # nav.closed {max-height: none; } # nav-toggle {display: none; } #nav ul li a a {border-right: 1px solid # 5E88BF; ekranas: blokas; plūdė: kairė; plotis: automatinis; fonas: nėra; paminkštinimas: 11px 15px; šrifto svoris: normalus; teksto dekoravimas: nėra; spalva: # E6E6FA; } #nav ul li a: hover {background: # 00567f; spalva: # cad7ea; } h1 {spalva: # 90b9a0; šrifto dydis: 2.5em; text-align: centre; }}Ar jums patiko ir padėjo ši pamoka?Galite apdovanoti autorių paspausdami šį mygtuką, kad suteiktumėte jam teigiamą tašką
