benvenuti a questa esercitazione di css oggi prendiamo un po tutto quello che abbiamo imparato e andremo a creare un menu qua in alto come potete vedere sia mobile che desktop quindi responsive tutto in css quindi sarà un menu dropdown per quanto riguarda il mobile vedete io premo c'è l'animazione quassù l'aics la vedete e in più scendono tutte le varie opzioni del menu posso chiuderla e se vado invece su uno schermo più grande e vedete che il menu tipo un desktop vedete che tranquillamente abbiamo il menu sulla destra quindi possiamo rivedere desktop desco desktop tablet eccoci
qua fino arrivare ai telefoni quindi tutto in css senza usare minimamente javascript e altre libreria qualcuno potrebbe dirmi ma io conosco bootstrap eccetera che fanno già queste cose senza sbatti vero assolutamente vero ma saperle fare a mano è un altro paio di maniche perché vi permette in situazioni magari di evitare i framework se volete di crearvi pian piano le vostre librerie di codice quindi senza basarvi su qualcun altro e soprattutto in questa ottica di esercizio è perfetto perché andiamo utilizzare tanti concetti così capite molte cose che stanno alla base di framework che poi andiamo ad
utilizzare quindi mi sembra un esercitazione ottima perché è un caso reale utile che vi servirà a se non vi basate su dei framework ve lo dovrete fare a mano ed ecco qua quindi il codice allora abbassiamo tutto e devo creare la cartella nuova cartella e lo chiamiamo esercizio almeno io lo chiamo esercizio css voi fate quello che volete facciamo così e tasto destro aprì con cod si apre una nuova finestra e noi dobbiamo andare a creare letteralmente due file il primo è index.hu ml e facciamo maiusc punto esclamativo tab e abbiamo il nostro html e
poi qua sottoscriviamo style punto css la prima cosa che dobbiamo fare nel nostro index e andare innanzitutto a linkare il css poi andare a creare la base del menu quindi cominciamo subito con link rel eccolo qua e mettiamo style sheet perfetto stylesheet foglio non escrementi mi raccomando quindi stylesheet foglio e dopo di che emettiamo href e prendiamo sta il punto css eccolo qua che ce l'ha trovato chiudiamo per andare a lavorare voglio mettere il l'editor qua a lato e poi dall'altra parte andiamo a mettere il browser quindi ripeschiamo questo possiamo togliere qua la versione di
ispezione e andiamo a metterli uno di fianco all'altro perciò vi basta per questo spostarlo contro lo schermo selezionate e le avete qua il tutto ora questo qua prende l'esempio che io ho già fatto per perciò lo vado a chiudere e lo riapriamo su questo progetto quindi possiamo anche togliere questo qua ci spostiamo qua dentro tasto destro open with live server per chi non avesse sta cosa qua vuol dire che non ha seguito il mio corso mi basta andare su estensioni e scrivere live server cosa vi permette di fare questa estensione vi permette di caricare automaticamente
le modifiche non appena salvata e perciò possiamo togliere qua almeno che non ci interessa tasto destro open with live server vediamo un po perfetto sia aperto abbiamo la schermata bianca quindi possiamo togliere l'esempio di prima che era l'esercizio già fatto dimostrativo ora andiamo a cannone e cominciamo a produrre la base del nostro menù essendo un menù ci torna comodo utilizzare il tag eder ok quindi utilizziamo il tag eder che però potremmo avere di più perché non è univoco capire quindi per averne per andarlo a definire in questo caso nello specifico abbiamo matter una classe ed
era quindi eder di class eder un modo veloce per farlo è eder che è il nome del tag dell'elemento vedete abbreviazione punto in questo caso stiamo dicendo la classe eder fate tab e vedete che aveva creato un elemento di klaus eder qua sotto andiamo mettere il logo il logo è sempre un link href perché va sempre riportarci alla home venete perciò facciamo così mettiamo class logo chiaramente si chiamerà logo e dentro scrivete quello che volete scriviamo oxide così era un personaggio di crash team racing che mi piaceva tanto ora seguitemi non fate venire mal di
testa perché comunque ve lo spiego per un trip che andiamo a fare quindi affinché riusciamo ad avere la ics che poi diventa il menu hamburger e riusciamo ad animarlo ad utilizzarlo effettivamente dobbiamo fare un piccolo tripp che poi vi spiego quindi in questo caso ci serve un input come checkbox e poi una l'apple va bene quindi un etichetta perciò input class menu trattino btn quindi bottone del menu lidi mettiamo menu btn ci serve lidi per la le balls e vi ricordate perché dobbiamo mettere un id come four e abbiamo il type che checkbox quindi vogliamo
una cec box mi serve un pelo più di spazio perciò lo facciamo ecco quanto siamo in modalità mobili perfetto quindi abbiamo una cieca box e adesso vogliamo la l'apple quindi lei ball punto menu trattino ai con scritto la bear non è un problema sostituiamo se avete emesse stensione automaticamente vi corregge il tag abbiamo detto che deve essere per quindi forlan eboli indica il four e andiamo a mettere meno btn che non fa riferimento alla classe ma alle di che per una questione di consistenza in questo caso abbiamo creato con lo stesso nome va bene che
abbiamo la nostra l'apple e dentro la labolani o metterli con a che avete visto prima che andremo a creare poi quindi span sarà uno spam e la classe è nav icon facciamo così potete dare i nomi che volete in questo caso che allora che cos'è questo è il bottone effettivo quindi il btm sta per button quindi il bottone del menu questa è l'icona del menu che è la lei ball ma l'effettiva icona la chiamiamo nav ai konk è l'icona di navigazione che quella che noi vediamo per navigare va bene abbiamo usato questo tipo di nomenclatura
ora animo creare il menu effettivo con le voci è chiaramente una hall queen e devo fare un punto menu ecco qua andremo a creare daily benissimo al cui interno ci mettiamo del degli href quindi ci mettiamo dei link e in questo caso potete metterci quello che volete tanto non li link e remo niente per semplicità e vado a mettere esattamente quello che è vado a mettere nei come nome quindi about poi scendiamo qua mi preme the maiusc o shift è la stessa cosa in italiano maiusc maiusc alt e freccetta giu e lo facciamo tre volte
123 equa ci mettiamo mettiamo dei nomi a caso tanto non dobbiamo andare da nessuna parte voglio mettere i nomi di pagine verosimili laboutin portfolio uno shop allstor ok se volete mettere pippo o come shop in shop va bene aggiustamento scritto stavo dicendo stop ai contact fatto qualcosa che avevo preso tutti quindi contax equa scriviamo contax perfetto se io faccio contro l'esse vedete che ci compare già qua su un pochino zummo al 125 per cento e vedete che abbiamo il nostro logo oxide dopodiché abbiamo la nostra checkbox la vedete quindi la check box abbiamo poi la
nostra l'apple che non vedete perché al momento c'è uno span vuoto quindi non la vedete e poi abbiamo la nostra lista che è questa qua quindi questa è la base di partenza bruttina chiaramente come tutto html non stilato e ora possiamo partire ci spostiamo direttamente su style quindi lavoreremo solo qui è quello che andrò a fare è andare a costruire il codice quindi come ci viene dall'alto al basso poi vi do come compito quello di riformattarlo se volete rende il codice più pulito ordinarlo bene potete assolutamente farlo quello che mi interessa è far ripassare i
concetti cominciamo con il body sapete che il body ha sempre del margin bruttino perciò lo togliamo con zero e come font family andiamo per un classico arial helvetica yes andiamo qua sotto background color voglio fare la versione dark se volete potete anche come spin off di questo esercizio quindi con me potete farlo in dark se vi per trovarvi in linea con l'esercizio finito quello potreste andare a creare una versione light quindi sarebbe interessante fare appunto la versione light e potreste usare lo stesso éscamotage che andremo a utilizzare qua per la checkbox per andare a fare
il toggle tra il tema light e il tema dark e sarebbe bello in certe occasioni potrebbe usare javascript più avanti ma realtà potete assolutamente utilizzare è la check box quindi potesse creare una check box dove c'è scritto da una parte di cona del sole dall'altra l'icona della luna potrebbe far così insomma ci sono degli spunti se ve la sentite provatelo non sarà semplice non sarà semplice se siete a un livello iniziale ma sicuramente potrebbe essere un'ottima alternativa scusatemi tanto qua io ho scritto a che quindi sono i nostri link quindi scusatemi meglio salvare ogni volta
faccio salva e vedete che abbiamo il nostro sfondo scuro praticamente quasi nero 18 18 18 ora andiamo a lavorare sui link e li mettiamo come color gray in realtà questa cosa potremmo già più avanti accorparla ma pazienza vedete che quale esso è tutto gray molto bene e andiamo a partire dalla nostra eder ovvero dal contenitore generale va bene quindi punto eder apriamo e vogliamo il background color del nostro menù lo facciamo poco più chiaro 21 21 21 questi sono i colori ufficiali di youtube sia come sfondo che come menu quindi dark mode di youtube assolutamente
in linea facciamo salva vedete che ci ha colorato tutto con un con un nero più chiaro grilletto ok grigio fumo diciamo così faremo mettere una boxe shadow che se vi darà sicuramente di più nel tema light ma pazienza e proviamo con un pixel un pixel un pixel ma scusatemi facciamo magari 4 pixel e zero vi ricordo che questi tipi di dati vanno ad indicare l'estensione la grandezza quindi come si va ad espandere la lasciato sicuramente diventa più semplice se lo fate sul bianco quindi eventualmente se volete cambiare un po la shadow potete tornare al bianco
magari mettete qua grigio fate così e e verificate la shadow come vi piace poi eventualmente tornate al nero quello che andiamo a fare come colore è usare un rgb a anziché usare un esadecimale in modo che possiamo usare anche l'alfa channel che l'opacità tranquillamente quindi vogliamo fare un nero che però si sa quasi tutto opaco perciò il nero è zero virgola zero virgola zero virgola punto uno è quasi invisibile ok quasi trasparente facciamo così e se notate fatemi di zoomare un pochino vedete che c'è questa fatemelo vedere da qua tipo faccio così alba vedete che
non c'è più se torna indietro si vede poco sul nero ma va bene così torniamo a 125 ora quello che vogliamo fare è avere una position fixed quindi position fixed perché quando avremo del contenuto e vogliamo scrollare vogliamo che sia in alto esattamente come questa parte qua su visual studio quindi position fixed e se faccio salva vedete che la posizione fissa ce l'ha ridotto perché prima non essendo in posizione fisserà in posizione block e la posizione block prende il 100 per cento di default quindi per a farglielo avere lo stesso effetto ma fixed ti basta
fare una with di cento per cento perfetto ora dobbiamo dargli una z index la z index è il livello come se fosse in 3d provato a prendere due cartoncini prese due fogli di carta no e lo mettete uno sopra l'altro fate uscire quello sotto lo fate uscire leggermente quindi lo vedete finché quello che è sopra non lo copre la z index è un po questo è l'altezza dei vari fogli di carta quindi immaginatevi che ogni elemento sia un foglio di carta in questo caso vogliamo che il nostro foglio di carta il nostro cartoncino grigio del
menù sia più in alto perciò noi lo prendiamo e lo mettiamo in alto come facciamo con la z index cominciamo quasi the index di uno se vi dà problemi perché avete elementi con le rende più alta mettete la più alta chiaramente non è non è un problema tanto è pressoché infinito il valore perciò siamo a posto ora voglio andare a lavorare sul nostro un quindi sul nostro menù possiamo cominciare andiamo pare punto è ver e devo prenderla un ok sono più modi in cui lo possiamo fare potremmo anche fare così ma mi sembra più pulito
così perfetto e che è diverso quello che intendono non fa esattamente la stessa cosa in questo caso avendo un unico elemento un fa esattamente la stessa cosa mi raccomando spero già lo sappiate dal mio corso se non lo sapete andate a rivedervi quello che è il tutorial sui selector mi raccomando sto comunque cercando di essere e basico per qualsiasi livello di preparazione però non ho intenzione di rispettare le basi da zero quindi facciamo un pub in 0 un margin l'abbiamo già fatto di 0 facciamo salva perfetto vedi che ci ha tolto margin e pub in
avete visto la differenza quindi ogni volta che mettete una regola non preoccupatevi a fare salva vedete quello che succede ok quindi non abbiate paura di andare lenti non è un problema vogliamo togliere il list style type faccio vedere io faccio ok vedete che abbiamo questi pallini questi pallini come li togliamo con l'ist style type sì faccio salva voi non lo vedete semplicente perché sono fuori perché c'è un margine di zero perciò io li vado a viva da nascondere e vi faccio vedere che vado a togliere prima lo style perciò list style mettiamo non eccolo qua
bam faccio salva vedete che non c'è più quindi non è che prima non ci fossero semplicemente erano nascosti dal margine 0 faccio salva e siamo a posto mettiamo un overflow hidden perché non vogliamo che niente esca perfetto e poi andiamo a riposizionare il background color uguale non si sa mai che devo fare altri stili eccetera poi abbiamo per caso altri colori perciò per sicurezza lo riproponiamo non è un problema salviamo e abbiamo questo va bene un menù in verticale abbastanza bruttino andiamo a lavorare sulla quindi sugli effettivi elementi per lavorare su ma ci basta fare
punto eder potremmo lavorare diretta potremo dare una classe diretta eccetera ma facendo così è molto meglio perché anziché dare la classe cui e chiamarlo tipo link menu e cose del genere qua invece capiamo che stiamo lavorando sul leather sul dell'header e poi chiaramente sul pool a stiamo lavando sui link del lul dell'header ok quindi sul menu sono modi diversi in cui potete farlo se non siete sicure nate vedere le best practice di css ne parleremo anche più avanti ognuno al proprio stile ci sono 600 mila casi studio dove le persone vi propongono è il modo
migliore per gestire il codice è però in realtà non c'è una legge scritta ognuno fa un po come vuole perciò ci sono tanti stili di gestione di classi codice id e quant'altro è importante che sia codice pulito poi come lo volete scrivere non è un problema andiamo a dargli un display block display block faccio salva mettiamo un attimo un border wright e lo mettiamo di un p ex solid reddito vediamo una cosa ok vedete che il border equa seguito al gol block perfetto vedete che il rosso in questo caso è esatto ovviamente qui questo vuol
dire che se faccio ispeziona la grandezza eccolo qua la grandezza del nostro a vedete che è esattamente tanto quanto il suo contenuto se io li vado a dare display bloc vedete che improvvisamente la diventa grande come tutta la riga su cui si trova va bene questa cosa importante perché perché vedete che io posso cliccar e vedete qua posso cliccare qua posso cliccar e se io non ho display block qua non posso cliccar e posso cliccar è solo qua sopra perciò noi interessa quando saremo da moby la possibilità di cliccare su tutto il menu voglio poter
cliccare qua qua qua qua indipendentemente va bene quindi ecco perché utilizziamo display block possiamo toglierlo il board e wright al momento lo teniamo non è un problema giusto per riferimento facciamo salva quindi border wright è qui io torno a 125 perfetto e scendiamo vorrei mettere un pad in diventi quindi padding 20 pixel vediamo un po risultato perfetto adesso sembra un bel menù è più o meno quello che abbiamo visto all'inizio delle del video qui nella presentazione abbiamo un bel menu con il suo spazio e il suo pagine posso cliccar e dove voglio vedete qua qua
qua assolutamente normale voglio togliere la text decoration quindi text decoration che non fa altro che toglierci qualsiasi cosa perciò la sottolineatura mente che a scomparsa abbiamo una parvenza di menu quello che vogliamo andare a mettere adesso è l'over ovvero cosa succede quando passiamo sopra non succederà niente da telefono e da tablet perché passiamo sopra è a pressione ok quindi lover riguarda tutti i dispositivi che hanno un cursore quindi parlo di computer fondamentalmente o qualsiasi cosa che utilizza un mouse qual è il fatto che magari come legge io da pc in questo momento potrei averla finestra
chiusa così per lavorare e se ci passo sopra io potrei vedere lover che quindi noi mettiamo lo per sicurezza per una questione generale ma anche perché comunque quando poi andremo ad aver la grandezza pc quindi a grandezza schermo pc comunque ci passeremo sopra perciò lo mettiamo se poi le persone non lo vede onda la telefono non è un problema ok quindi facciamo un over perciò quello che abbiamo appena modificato che è il link in là andiamo a modificarli mettiamo un background color quindi all'over li mettiamo 18 18 18 quindi faccio così e vedete che se
posso sopra vedete perfetto molto molto molto bene semplicemente con una riga di codice tra riga se consideriamo le parentesi ora scendiamo andiamo lavorare sul logo avremo lavora sul logo perciò punto eder punto logo certo potremmo fare direttamente punto logo ma se poi abbiamo altri luoghi sparsi in giro diventa un problema perciò cerchiamo di essere un po più specifici punto eder punto logo apriamo e cominciamo con un float left perfetto vedete vi faccio rivedere tolgo la differenza non si vede in questo caso la differenza non si vede ma noterete più avanti con andremo a lavorare su
tutto il resto quindi float left almeno siamo sicuri che sarà sempre a sinistra non solo su mobile ma soprattutto su su desktop scendiamo font size potete usare gli am se volete e m io al momento mi trovo comodo con i pixel 25 se non mi sbaglio avevo messo nella nella presentazione facciamo salva ok si è ingrandito ora vedete tolgo left vedete la differenza adesso che abbiamo aumentato la grandezza del font capite quindi senza float non succede niente qua e non è detto che sia tutto a sinistra ma noi vogliamo con certezza che l'elemento logo stia
sinistra però vi ricordate che flop va a incidere sugli elementi circostanti quindi vedete chi mi ha spostato tutto e adesso lo andremo a sistemare mettiamo ancora qua una cosa ovvero un pub ding perché chiaramente troppo attaccato perciò mi dai un pub ding di dieci pixel eventi pixel così perfetto quindi tasto destro ispezione andiamo a vedere e abbiamo vedete 10 pixel in alto in basso 20 pixel a destra e sinistra guardate il verde il verde attorno oxide sinistra destra è più grosso che sopra e sotto vedete c'è una disparità perché aveva messo 10 sopra e sotto
eventi destra e sinistra creiamo qua noi possiamo chiudere anche lin spector molto bene scendiamo e andiamo a lavorare quindi sul nostro menù perché come vedete il nostro menù è stato bellamente spostato perciò quello che vogliamo fare è punto eder punto minuti utilizzeremo sempre punto eder come introduzione anche se potremmo usare ripeto solo più menù non cambierebbe niente ma nel caso nel nostro codice avessimo un altro punto menu per magari non ci siamo resi conto che avevamo già un punto menu o perché vogliamo comunque essere è coerenti quindi con lo stile però la cosa potrebbe essere
un problema perché magari lo stile si va a sovrapporre invece dicendo punto eder punto menù non credo avremo un altro eder con dentro un menù subito non che dovremmo un altro eder però facciamo clic ball che cosa fa clear box va a pulire il comportamento che questo flop a sul menu vi faccio vedere se vi faccio salva vedete torna indietro e commento io commento vedete allora questo flop è un po come se prendesse a spallate gli altri no lui fa il flop lui si mette a sinistra ma va a dare fastidio a tutti gli altri
che si devono adeguare a lui va bene noi gli diciamo guardate ragazzi del menu anzi guarda menù come singola entità non ti devi adeguare al logo lo puoi tranquillamente evitare lascia la sinistra lascialo perdere non è un problema tu fai quello che devi fare ovvero restare esattamente doveri prima perciò clear both in questo caso tutte le direzioni perché boss vuol dire entrambe perciò la direzione sopra sotto e la direzione sinistra destra va bene mettiamo una max height di 0 adesso vedrete perché è quindi ma side 0 scompare chiaramente perché scompare perché dovremmo poi farlo uscire
perché da mobile il menu lo vediamo solo se andiamo a premere sul pulsante va bene se al momento vi da fastidio potete commentarlo però poi dovete rimettere perché è fondamentale sta cosa quello che ci interessa è già a mettere una transizione per l'animazione quindi transition cosa sulla max aids che andrà a cambiare perché quindi all'inizio l'altezza lamarque site sarà 0 ma poi cambierà e cambierà come transizione va bene quindi diciamo che la max height cambierà in punto 2 secondi va bene quindi meno di 200mila dovrebbe essere 200 millisecondi ok e facciamo un is out che
ha semplicemente un metodo punto cioè vedete abbiamo tanti stili di animazione facciamo is out perfetto ora io faccio salva vedete che non abbiamo modo di verificarlo quello che vogliamo fare è spostarci sull'icona quindi lavorare sull'icona che aprirà il menù che al momento non abbiamo perché se vado qua l'icona è questa che si trova dentro una lei ball che è assolutamente correlata al nostro input per farvi vedere come funziona lo stratagemma che andiamo a fare io vado qua dentro nel body e va ad omettere un input checkbox vado a copiare letteralmente sta cosa qua proprio questo
e tolgo questa classe e dopo di che cambia anche liti e lo chiamo prova va bene lo chiamo solo prova non preoccupatevi faccio prova così e metto la lei ball per togliamolo span così non mi interessa mettiamo direttamente dentro un testo e vi faccio vedere lo chiamiamo testo etichetta io faccio salva al momento è tutto qua in alto dobbiamo spingerlo un pochino per questo esempio per farvi capire quello che sto per fare commentiamo un attimo questo ok vedete che abbiamo un testo etichetta lo vedete qua testi tichetta per farvelo vedere meglio scusatemi vado su qui
e li metto un color and white qual è il fatto che se ne abbiamo una check box certo possiamo premere su una checkbox ma nel momento in cui abbiamo una lei ball che fa riferimento a forme rete quindi four è legata all'input cosa succede se io premo sull'etichetta ci aiuta vedete va a usare il check ok quindi va usare la checkbox anche se io non premo effettivamente sulla checkbox però vedete che nel momento in cui clicco qua succede qualcosa il fatto che succeda qualcosa ci permette di andare a dire quando succede qualcosa fai qualcos'altro va
bene senza utilizzare javascript tutto in puro css se non utilizzabili di qua l'input scusate mi vedete che sapremo non succede niente va bene quindi quello che andiamo a fare è letteralmente sfruttare questo stratagemma di cliccare sull'etichetta che l'etichetta diventerà la nostra icona quindi al posto del testo avremo l'effettiva icona che lancerà lo stato di ceccato vedete questo e ceccato non cercato quindi lancerà lo stato c'è della checkbox e quando sarà cect vedrete che faremo qualcos'altro ok quindi usiamo questo piccolo stratagemma detto questo cancelliamo questo che abbiamo fatto torniamo qua sopra control o accentata abbiamo tutto
facciamo salva e torniamo al nostro stato di partenza detto questo possiamo scendere e lavorare sull'icona perfetto quindi adesso noi non vogliamo più la scritta testo etichetta vogliamo una vera e propria icona come facciamo aicon molto bene e andiamo a mettere innanzitutto un border due punti juan ps solid red innanzitutto per capire cosa stiamo facendo vedete al momento qui non c'è dentro niente questa sarebbe l'etichetta sedetevi successivi ricorda ad esempio di un minuto fa avevamo la check box con l'etichetta vedete se io premo sul rosso zummo se io premo sul rosso e non sono sulla checkbox
vedete la differenza è esattamente come quello che vi ho appena fatto vedere ok quindi stesso discorso al momento abbiamo ancora però inserirci roba perciò cominciamo a dargli un pad in andiamo esplorativa facciamo un 28 ps20 pixel molto bene salvo vedete che si è ingrandito se io premo state capendo quello che è quello che facciamo qua dentro avremo il nostro menù noi click alla nostra icona del menu né cliccheremo qua e là checkbox che noi non vedremo più verrà trigger a verrà trigger ata ed a cui andremo poi a far partire il menu con la transizione
ok quindi continuiamo vogliamo dargli una position relativa perché perché dentro l'icona sarà in position absolute ma se vi ricordate la position absolute di un elemento deve trovarsi all'interno di un relative altrimenti farà riferimento all'elemento superiore l'elemento superiore l'elemento superiore invece vogliamo che l'icona poi si acqua dentro perché andremo a disegnare apposta non useremo un'icona già fatta l'andremo a disegnare per avere la animazione ben messa ora float write eccoci qua faccio salva e vedete che già le cose cominciano a prendere forma siamo esattamente dall'altra parte possiamo cliccare vedete che nonostante la lei ball il quadrato della
le bolsi acqua in fondo insomma un pochino la checkbox che abbiamo qua la sec box che abbiamo qua a bere tè si riempie lo stesso attenzione quindi vedete cosa sta succedendo io spero mi state seguendo ora dopo il flop wright chiaramente vogliamo un cursore pointer perché al momento vedete che non c'è il corso è corretto se io faccio salva abbiamo la manina ok eccola qua la manina benissimo adesso che abbiamo la manina direi che possiamo andare a lavorare sull'effettiva icona quindi abbiamo lavorato sul container dell'icona è il momento di andare a creare è la nostra
icona che sarà prima un hamburger l'hamburger sono le tre linee nette che indicano il menù si chiama menu hamburger ok perché effettivamente ricorda i tre strati di un hamburger due panini e al centro la la carne signori questo è la programmazione ci sono tanti di quelli easter egg che non sapete poi andremo a prendere quindi la nostra nave icon perché sto facendo tutto sto giro ve lo faccio rivedere perché abbiamo eder class eder dentro abbiamo la classe menu icon al cui interno abbiamo nav icon perciò eder menu icon now ai con quello che vogliamo fare
innanzitutto è un background color gray molto bene andiamo a fare un display di spirit eccolo qua block molto bene e poi andiamo a mettere una larghezza approssimativa di 18 potete modificarle ste cose sentitevi sulle larghe sui colori sentitevi assolutamente in dovere di ri controllarle se volete andiamo a fare così vediamo un po che cosa abbiamo prete che abbiamo una linea molto bene quindi un all in ha tre abbiamo al momento quello che è la carne di manzo del nostro hamburger molto bene andiamo a dare una position relative ok perché poi vedrete dove utilizzeremo la absolute
e andiamo a dare una transitional una transition sul background background color che al momento non mi ricordo se utilizziamo meno però eventualmente mi raccomando quale esse non dimenticate la sera non funziona mettiamo sempre iss out eccolo qua perfetto e direi che al momento abbiamo la nostra icona non finita per avere le altre due linee le andiamo a creare noi e andiamo usare le pseudo classi se noi qui abbiamo il nostro elemento e vogliamo una cosa simile prima e la vogliamo dopo questo prima e dopo che cosa vi dovrebbe far venire in mente li dovrebbe far
venire in mente before and after che sono degli pseudo elementi quindi sono elementi che in realtà non esistono ma andiamo a creare noi perciò ci basta fare così benissimo e andiamo a mettere due punti 2 punti before quindi prima l'andiamo a disegnare che cosa abbiamo abbiamo background color chiaramente gray perché abbiamo fatto così le altre linee andremo a mettere il content vuoto perchè tanto lo costruiamo né con l'altezza e la larghezza il display sarà block è esattamente è molto simile a quello che avevamo qua sopra ok perciò altezza cento per cento perché perché va far
riferimento a questo elemento capite il 100 per cento di cosa di questo elemento ok quindi se qua e 18 qua sarà 18 va bene stessa cosa per la uilp benissimo cento per cento a scusatemi se quei 18 di with guai 18 questa è 2 poi che cosa abbiamo andiamo già mettere delle transition su qualsiasi cosa che andiamo a fare punto due secondi is out ormai lo sapete e voglio una position absolute un'altra cosa che voglio fare è mettere anzi lo faccio vedere al momento non succede niente vedete non succede niente ma se io faccio top5
pixel guardate un po bam avete visto cosa è comparso allo stesso modo se io letteralmente copio qua faccio al tema yusuke freccetta giù e scrivo after che è sotto se la vogliamo sotto chiaramente cosa vorremmo meno 5 pixel io salvo e vedete che abbiamo il nostro menù ora questo qua tutta questa parte qua è codice ridondante perciò vi dico se volete provare adesso voi a riformattarlo avete 10 secondi mentre vi sto parlando perché tra poco lo vado a fare io quindi se volete stoppate al video provato parlo adesso lo faccio io ci basta semplicemente togliere
questo molto bene e andiamo a mettere visto che il codice è uguale qua vi facciamo before and after c'è lo stesso codice top 5 lo togliamo e voglio andare a creare un'altra zona qua quindi l'unica cosa che cambia è la position va bene tutto il resto lo teniamo uguale perciò anziché scrivere due anziché scrivere due volte tutte queste righe le accorpiamo qua dentro e poi andiamo aggiungere le righe diverse per il top 5 meno 5 io faccio salva e vedete che risultato è maledettamente il medesimo benissimo ora dobbiamo andare a lavorare tu cosa solo nostra
checkbox perché noi la cec box non la vogliamo vedere perciò la nostra checkbox è eder punto menu btn è chiaramente gli diamo un display non eccolo qua la checkbox non si vede più ma il comportamento c'è ancora molto molto bene adesso attenzione perché adesso arriva il bello vogliamo un attimo questo l'abbiamo messo ma togliamo in un attimo perfetto quindi siamo qua così ora quando la checkbox risulta cecata risulta piena chiamatelo come volete che cosa andiamo a fare andiamo ad aumentare la larghezza del menu nuove reti eder menù che prima era a 0 con imax aids
0 l'andiamo ad aumentare il menù è questo che al momento non vediamo perché 0 non perché non esista sufficiente perché zero quindi seguitemi che qua è un disastro punto eder ok che cosa vogliamo di ceccato beh il button e il menu button che album che noi al momento vediamo perché quoto alto il codice comunque quando questo è ceccato questa pseudo classe un po come over che abbiamo usato prima dove equa over eccolo qua a pseudo classe cech che possiamo utilizzare attenzione perché dobbiamo dirgli che il comportamento non è se lasciamo così stiamo dicendo fammi le
cose sulla checkbox quindi quando la checkbox e cliccata fai qualcosa sulla check box va bene ma noi non vogliamo sta cosa margin top 20 pixel magari perfetto vedete quindi se io clicco al momento sto lavorando sulla checkbox gli sto dando un margin superiore diventi pixel quello che io voglio fare è far sì che questo stato di ceccato abbia il suo effetto sul menu perciò noi gli stiamo dicendo ho bisogno che tu mi faccia effetto questa è la nostra checkbox su un seed l'ing quindi su un fratello quindi su un elemento che si trova sullo stesso
punto gerarchico di tipo menu per indicare i siblings ci basta utilizzare la tilde la tilde si fa con alt 126 eccola qua se volete usare i back tic ricordatevi altre 96 qui in questo caso tilde e devo mettere punto menu quindi gli stiamo dicendo quando la checkbox accecata l'effetto che vogliamo lo vai a dare su cosa su menu che in questo caso grazie alla tilde stiamo dicendo che menù è un sibling non mi cerchi un menù sul resto della pagina non mi cerchi un menù da nessun altra parte se non come siblings è l'unico siblings
che può avere qui è in questo caso questo perché siamo qua dentro l'unico sibling che può avere è questo molto bene che cosa vogliamo fare indovinate un po max height 240 pixel e vi faccio vedere che sapremo non succede niente perché io ho messo ps non pixel ed ecco qua vedete vedrete cosa succede la checkbox accecata l'altezza è stata messa quindi vede che compare il menu ma avendo noi verso la transizione eccola qua la transition sul max height come potete vedere se vado a mettere 1.2 secondi guardate la differenza vedete potete cambiarla se volete io
sono a posto con 0 2 perciò quindi la lei ball che fa riferimento call for eccola qua a nostri di viene cliccata col fatto che è collegata col for attiva la checkbox la checkbox attiva lo stato c'è che noi andiamo a prendere e diciamo quando la checkbox accecata vogliamo un effetto sul menu e va ad aumentare la sua altezza avendo il menu già la transition abbiamo questo effetto di animazione capite ora sì che possiamo togliere la ai box perché tanto avete capito il risultato è maledettamente il medesimo ora quello che vogliamo andare a fare adesso
lasciamo un attimo tutti sti bordi qua va bene come the bug quello che vogliamo fare adesso è andare a cambiare la nostra icona quindi quella che è un'icona in realtà non è una vera icona l'abbiamo disegnata noi quindi ora cosa vogliamo fare vogliamo disegnare una ics come la disegniamo questa hicks è molto semplice andiamo a prendere il nav icon ancora quindi punto eder punto menu button certo quindi cosa succede quando noi stiamo cliccando ed è cercata acqua non voglio più l'hamburger voglio l'aics perciò quindi quando è cercata che cosa mi vai a prendere sempre mi
vai a prendere un sibling che è meno icon vedete quindi vogliamo prendere meno icon quindi questa è cercata prende il sibling menu icon ma all'interno prendiamo nav icon perciò ci mettiamo qua quindi facciamo così punto menu icon apriamo punto nav aicon ok che cosa vogliamo fare vogliamo andare a mettere un background color trasparente non vogliamo nasconderlo con display o altre cose vogliamo solo andare a nascondere e che ti abete vedete quando quando è chiuso il menu c'è la ninetta in mezzo quando non c'è vedete ha tra l'altro piccola cosa voi lo vedete che effetto ottico
qua è uguale se vado a di zoomare così a 125 vedete che sembra che questo qua sia più alto di questo non preoccupatevi effetto ottico quindi vedete che l'elemento non l'abbiamo fatto sparire con display perché se facessi display non vedete risultato scompare tutto e noi non lo vogliamo neanche visibility perché ci scompare tutto ci scompaiono anche gli pseudo elementi quindi visibility iden io faccio così e vedete che abbiamo un problema per e te noi non vogliamo così vogliamo semplicemente che la nave icon quindi l'elemento nav icon non gli pseudo elementi solo l'elemento nav icon venga
tolto adesso cosa possiamo fare possiamo andare a girare queste barrette e le facciamo diventare una ics perciò dobbiamo utilizzare b e after andiamo a far così ci mettiamo quai copiamo quindi alt maiusc e freccetta giu togliete questo 12 andiamo a prendere lo pseudo elemento quindi before and after eccoci qua e cosa vogliamo fare vogliamo farli ruotare quindi facciamo una trasformazione transform enea omettere wrote eight di meno 45 gradi vi faccio vedere io faccio salva vedete che questo qua è ruotato di 45 gradi qual è il fatto che si va da copiare questo chiaramente dall'altra parte
è di 45 gradi per e te qual è il fatto che zummo qui ecco qua cominciano essere ruotati dal centro vedete vengono ruotati dal centro quindi questo è quanto meno 45 e questo è più 45 cosa succede che noi dobbiamo cambiare la posizione se ne va cammelli la posizione e li mettiamo al centro andranno a formare una ics vi faccio vedere quindi top due punti 0 diciamo così vedete che già questo è un po più centrato questo qua è quindi questo sempre quello di prima questo è stato abbassato se io anche questo lo alzo che
era a meno 5 lo faccio diventare top 0 guardate un po abbiamo una ics perfetto quei due icone al momento ove rete e sono già animate perché sono già animate perché abbiamo precedentemente emesso tutte le varie transitional questa qua quindi su after e before abbiamo messo una transition su qualsiasi cosa di punto 2 is out eccola qua vedete bel menù è bell menu arriviamo all'ultima parte arriviamo all'ultima parte perché adesso dobbiamo lavorare come si può dire in ambito desktop perché se io apro vedete abbiamo una situazione incredibile continua a restare il menu così ma non
si è mai visto un sito desktop con un menù mobile ora noi stiamo lavorando sempre in modalità mobile perché chiaramente lavoriamo mobil first ricordatevi che ormai siamo in un'era tecnologica in cui la maggior parte degli utenti l'avo guardano e usufruiscono dei contenuti da mobile o anche da ipad quindi l'utilizzo del computer fissi per puro svago è calato drasticamente ed è lo svago è più da dispositivi mobili che più da desktop perciò noi la prima cosa che vogliamo fare e assicurarci che il nostro sito sia ben usufruibile da mobile e poi da desktop ok pensate a
magari ci sono alcune applicazioni o alcuni siti che sono pensati per essere guardati solo da mobil perciò da desktop se ne fregano ok così come le applicazioni desktop che avete sul vostro sul vostro pc chiaramente sono ottimizzate solo desktop e non mobile perché non gliene frega niente noi diamo la precedenza al mobile perciò per andare a lavorare su desktop abbiamo bisogno di una media query quindi togliamo screen e ammette una min wade perfetto mettiamo una web potete usare i pixel in questo caso voglio usare 48 e m vi faccio dovrebbe esser circa 800 pixel quindi
stiamo dicendo che quando raggiungi una minima larghezza dovrebbe esser tipo così forse un pelo di più cosa fai vai a fare determinate cose ovvero innanzitutto mi sposti i miei li a sinistra adesso lo faccio vedere con i float left a sinistra al momento sembra non succeda niente vedete aggiorniamo togliamo float left vedete quindi mettendo float left siamo passati da 1 incolonnato sopra l'altro a lo vedete il menù tutto flottante a sinistra benissimo quindi questo è il primo step al momento abbia preso il iii non il menu mi raccomando il menù è tutta questa seconda barra
questi sono gli elementi se non mettiamo il filo vedete che stanno uno sopra l'altro esattamente come li vediamo per il mobile se mettiamo left adesso vi faccio vedere esatto vedete da mobile sono giusti e appena vado un po oltre vedete che si spostano qui non sono più una sopra l'altro ma sono uno dopo l'altro ora andiamo a dargli un po di paddling ai nostri link quindi punto è eder li ha e vogliamo dargli del pad ying diventi di ex e 30px io salvo ok abbiamo qualcosina in più avete visto sono un pelo p larghi molto
bene se invece torno qui il discorso è sempre lo stesso vedete perché perché stiamo lavorando con una larghezza di tipo tablet barra desktop perciò non va ad intaccare in alcun modo il mobile questo è bello delle media query ora scendiamo e vogliamo andare lavorare sul menu quindi eder punto meno buche al momento è dalla parte sbagliata e vogliamo un clear nun perfetto perché vogliamo che venga spinto lo vedete quindi prima abbiamo messo cli hardball se vi ricordate ecco qua perché volevamo il menù sotto ma da desktop noi vogliamo che il float left del loco abbia
effetto sul menu lo vedete perché se se non avesse effetto va sotto ma noi vogliamo che abbia effetto così ce lo porta sulla stessa riga avendolo sulla stessa riga lo dobbiamo portare dall'altra parte perciò andiamo a fare un flop write molto bene se non avete capito tutto questo passaggio de commentate pian piano tutte le varie righe e vedete cosa succede ok è il motivo tutti questi passaggi è perché siamo partiti dal mobile se non fossimo partiti dal mobile sarebbe stato più semplice fare questa parte qua ha chiaramente ma avremmo avuto poi difficoltà a capire quindi
c'è sempre una difficoltà da una parte devi cominciare il problema è che poi ti devi adeguare dall'altra parte qui o mobil to desktop oppure desktop mobile capite perciò con calma nei commentate commentate e vedete cosa succede mettiamo una max height di niente perché chiaramente tutto in linea perfetto e vogliamo che sparisca questa icona perché chiaramente non deve poter succede una cosa del genere il menu desktop o tablet deve sempre essere fruibile perciò appunto eder punto menu icon facciamo così e devo mettere un display non vedete che è scomparso ok ma essendo una media query comparirà
a se torniamo in modalità mobile togliamo andiamo a togliere i vari border perfetto che potremmo usare avete visto per cosa l'abbiamo usati border li potreste come divisori li potreste usare e li potreste mettere su eder man wai con semplicemente qua dentro la media query io non li voglio né da una parte né dall'altra perché vedete che da mobile finiscono qua io non li vogliono dalla parte né dall'altra perché mi va bene così ha intanto qua ho tolto il border della scuola in faccia a rivedere o sbagliato riga e ho tolto il board ha sbagliato ma
è giusto che vada tolto qui abbiamo tolto questo perfetto e andiamo a togliere i bordi eccoli qua degli acquisti qui perciò non l'abbiamo più né qui né da desktop ok e abbiamo il nostro menù sempre fruibile ora se io torno indietro che la parte più bella onestamente perché desktop è banale abbiamo il nostro menù responsive perché i responsi perché passa da mobile o desktop con semplicità vedete molto molto molto semplice bene anche per oggi è veramente tutto spero che questo esercizio vi abbia aiutato non solo è un esercizio che vi ha messo in mano del
codice effettivo che potete già usare per i vostri per i vostri siti ma al di là di quello abbiamo utilizzato tanto abbiamo utilizzato pseudo classi over è certo abbiamo utilizzato before and after come pseudo elementi che poche persone fanno fatica a capire all'inizio perciò ecco qua un esempio abbiamo usato o animazioni l'abbiamo fatto tutto responsiva abbiamo fatto una cosa che effettivamente bella è maledettamente no non di moda ma è lo standard è lo standard del web del momento quindi io spero che sia stato tutto in linea 7 problemi scrivetemi sotto nei commenti sotto le iscrizioni
trovate il link per il mio sito dove sto aggiungendo tanti corsi aggiuntivi di livello avanzato se volete approfondire c'è il link alla mia community e il link se volete supportare il canale in qualche modo il ringrazio un abbraccio alla prossima ciao ciao
