jossa on tunnus "häivytys", joka on musta kansi, joka pimentää sisältöä, kun valikkokuvaketta napsautetaan.
Lopuksi soitamme jQuerystä Googlelta ja omasta komentosarjatiedostosta, jossa työskentelemme jonkin verran. Mutta ensin käydä läpi tyylit.
Muotoilu CSS: llä
Joten me emme käy läpi kaikkia CSS-tyyppejä (jos haluat, että voit tarkastella tai tarkastella lähdettä demo-muodossa), koska niitä käytetään useimmiten sivun yleiseen muotoiluun, mikä ei ole tavoite tämän artikkelin. Me hajottaisimme sen ja tarkastelemme muutamaa koodia, jotka ovat tärkeitä tämän vaikutuksen kannalta. Joten ensin:
html.no-js #fallback-nav { display: block; }html.no-js .fade { display: none; }html.no-js #navicon { display: none; }html.js #fallback-nav { display: none; }
Pyrimme tekemään asioita varmistamalla, että jos käyttäjän selaimella ei ole JavaScript-asetusta käytettävissä (tämä on kyseisen luokan nimi HTML-elementissä, jota näimme aikaisemmin Modernizr-sovelluksen avulla), näytämme otsikon alla olevan #backback-navin ja piilotamme #fade DIV: n sekä navigointikuvakkeen. Tämä on meidän vararatkaisu, joten varavalikon on oltava tyyliltään perinteisempi. Olemme myös piilossa tämä ratkaisu, jos JavaScript on käytettävissä, kuten voit nähdä viimeisellä rivillä.
#navicon {float: right;font-size: 2em;text-decoration: none;position: relative;z-index: 9; }#navicon.open { color: white; }#navicon.open:hover { color: #e6e6e6; }#fade {position: fixed;top: 0;right: 0;bottom: 0;left: 0;background: #000;opacity: 0.5; }
Joten tässä osassa muotoilemme valikkokuvakkeen otsikossa, se on melko yksinkertainen, vain antaa sille suhteellinen asema ja korkea z-indeksi (joka tulee olemaan hyödyllinen myöhemmin, kun loput sisällöstä haalistuu. ylhäällä). Muokkaamme myös väriä valkoiseksi, kun se on luokka "auki", jonka lisäämme jQueryn avulla. Voimme myös huomata, että yksi haara, jossa "fade" -diodi, ulottuu täyttämään koko näytön ja täynnä vankka musta 50%: n läpinäkyvyys. Jos käyttäjällä ei ole JavaScriptia, tämä musta suodatin piilotetaan, ellei piilotamme sitä jQueryllä. Katsotaan nyt itse valikosta:
#main-nav {position: fixed;height: 100%;top: 0;right: -250px;background: #222;max-width: 250px;width: 100%;z-index: 5;text-align: center;display: flex;flex-direction: column; }#main-nav a {flex: 1;color: white;border-top: 1px solid #555;text-decoration: none;display: flex;flex-direction: column;justify-content: center; }#main-nav a:hover, #main-nav a.current { background: #3c3c3c; }
Joten viimeisenä mutta ei vähäisimpänä päävalikossa. Minun on lisättävä ensinnäkin, että tämä on yksinkertaistettu koodi, joka tarvitsee melko vähän myyjän etuliitteitä, ennen kuin se on selaimella yhteensopiva. Tämän saavuttamiseksi suosittelen mahtavan työkalun käyttämistä Autoprefixer Voit lisätä kaikki oikeat etuliitteet sinulle.
Joten sanotaan, katsotaan, mitä se edellyttää: ensinnäkin se saa kiinteän sijainnin sivun yläosaan ja negatiivisesti 250px oikealle. Tämä tarkoittaa sitä, että se on vain "off-screen" (koska sen enimmäisleveys on 250px). Korkeus on myös 100%, joten se täyttää koko ikkunan ylhäältä alas. Valikossa on myös z-indeksi 0 - 9 (mustan suodattimen yläpuolella). Sitten, kun taika tapahtuu, sillä on näyttö: flex; ominaisuus, sekä toinen "flex-suunta" linkitetty omaisuus (jonka olemme määrittäneet tässä sarakkeessa sen sijaan, että se on oletusarvoinen "rivi", mikä tarkoittaa, että flex-elementti-lapset - valikon linkit - täyttävät koko sen emoyhtiö yhtäläisinä osina).
Joten kaikki kohdistetaan valikkopalkkiin # main-nav, kun seuraavaksi muotoilemme linkit, annamme niille flex-arvon 1. Tämä tekee linkit täyttävän koko korkeuden yhtä. Sitten näillä linkillä annetaan myös "flex" -näyttöarvo, mikä tarkoittaa, että kaikki linkit sisältämät elementit vaikuttavat tähän. Varmistamme, että flex-suunta on edelleen "sarake" ja lisäämme "justify-content: center" -ominaisuuden ominaisuuden. Tämä tekee tekstin itse linkkien keskellä pystysuunnassa myös (siksi on divs sisällä ![]()
# main-nav: n tagit, jotka eivät ole täysin semanttisia, mutta erittäin nopea ja helppo tapa pystyttää keskitetysti kohteita.)
Nyt emme näe mitään, mitä olemme juuri tehneet melko hyvin, meidän on nyt lisättävä toiminnallisuutta omalla scripts.js-tiedostossamme, jonka soitimme aiemmin.
Toimintojen lisääminen jQueryn kanssa
Tämän vaikutelman käsikirjoitus on hyvin pieni ja yksinkertainen, mutta laitan sen kaikki ensin ja selitän sen, mitä tapahtuu:
$(document).ready(function() {$('#fade').hide();$('#navicon').click(function() {if($('#navicon').hasClass('closed')) {$('body').animate({left: "-250px"} , 400) .css ({"ylivuoto": "piilotettu"}); $ ('# main-nav') animate ({right: "0"}, 400); $ (this) .removeClass ) .addClass ( 'avoin'). html ( 'x'); $ ( "# fade). FadeIn (); } else if ($ ('# navicon').) hasClass ('avoin')) {$('body').animate({left: "0"} , 400) .css ({"ylivuoto": "vieritä"}); $ ('# main-nav') anime ({right: "-250px"}, 400); ') .addClass (suljetuksi). html (' ☰ '); $ (' # fade). Fadeout (); }})});
Joten ensin piilotamme mustan suodattimen. Seuraavaksi kaikki, mitä teemme, sisältyvät toimintoihin, jotka on liitetty napsautustapahtumaan, joka on sidottu valikkokuvakkeen linkkiin. Kun sitä napsautetaan, meillä on kaksi eri tapausta tai tilanteesta; yksi on, kun valikko on jo piilotettu (kuten oletustila) tai yksi, kun valikko näkyy. Joten valikkokuvaketjulla on suljettu luokan nimi, jonka olemme lisänneet, ja myös muotoiltu avoimeksi. Ensimmäinen "if" -lausumme on, että jos linkki on suljettu (siis oletus). Jos näin on, niin koko
elementti on animoitu 250px vasemmalle ja pysäyttää sivun selauksen. # Main-nav div -ohjelmaa myös animoituu paikalleen, muuttamalla sen oikeaa arvoa -250px: stä 0. Tällöin poistamme suljettu luokan linkistä ja lisätään yksi "avoimesta" muuttamalla html: n erikoisluonnosta kolme riviä x: ksi. Lopuksi olemme hiipumassa mustassa suodattimessamme, jotta muut sisällöt ovat pimeässä. Ja se on! Tämä antaa meille valikon avoimen tilan.
Nyt "muuten jos" -lausunto kohdistaa avoimen luokan valikkolinkillä. Kun se tehdään, käännymme kaikesta, mitä teimme aiemmin, siirrämme kehon takaisin paikalleen ja siirrämme valikon uudelleen näytöltä. Poistetaan "auki" luokka valikkokuvakkeesta, lisäämällä "suljettu" ja muuttamalla sisältöä takaisin kuvakkeeseen sekä poistamalla #fade div. Jos kaikki menee suunnitelmien mukaan, tämä on mitä toiminnallisuuden pitäisi näyttää:
johtopäätös
Joten meillä on se! Tämä on yksi tapa tehdä tämä hieno vaikutus, jota näemme yhä enemmän modernin webdesignin tyyliin, etenkin mobiilisuunnittelussa. Tämä vaikutus on mukava ja yksinkertainen ratkaisu, joka ei vaadi lisäosia ja joka voidaan täysin mukauttaa kunkin projektin tarpeisiin. Lisäksi on ollut mahdollisuus käyttää flexboxia ja muutamia muita hyödyllisiä työkaluja. Haluaisin tietää kommentit, jos sinulla olisi jotain mitä olisi tehnyt eri tavalla tai mitä vain luulit!
Esitetty kuva / pikkukuva, liukuovi kuva kautta Shutterstock.
