Ora che abbiamo photoshoppato ciò che speriamo di ottenere con l'area di ricerca, abbiamo deciso di costruirlo con HTML e CSS. Abbiamo già caricato il nostro carattere dell'icona, quindi lo inseriamo nella pagina. Font Explorer X ci aiuta a mostrare il carattere HTML corretto da utilizzare per la lente di ingrandimento.
Aggiungiamo il markup al nostro file include di intestazione e iniziamo un nuovo file Sass (_search.scss) per scrivere il CSS per questa nuova area. Ci assicuriamo che CodeKit conosca questo nuovo file. Sfortunatamente in questi primi screencast CodeKit a volte impiega un po 'di tempo per aggiornarsi, cosa che in seguito scopro è solo perché ho un progetto particolare con troppi file al suo interno. Puoi risolverlo restringendo la directory in cui hai CodeKit watch.
Posizioniamo assolutamente l'area di ricerca all'interno dell'intestazione in modo che sia posizionata a destra e in alto dell'area del contenuto principale. Regoliamo le dimensioni e il posizionamento della lente di ingrandimento mirando specificamente all'icona. Posizioniamo le cose con le percentuali in modo che si adattino perfettamente al nostro design reattivo. Aggiungiamo anche :hovere :focus, quindi è ovvio che puoi fare clic su di esso.
Concludiamo scrivendo un po 'di JavaScript che aprirà e chiuderà l'area di ricerca. Avremmo potuto avere le animazioni direttamente in JavaScript (dato che stiamo usando jQuery), ma invece tutto ciò che facciamo è cambiare i nomi delle classi sul CSS. Questo è ciò che mi piace pensare come "CSS basato sullo stato" in cui JavaScript controlla solo i nomi delle classi che dichiarano in quale stato si trova la pagina (o area) e CSS controlla l'aspetto della pagina in quello stato (e come ci arriva ). Ciò significa che stiamo facendo cose come le transizioni in CSS, che è secondo me a cui appartengono e sarà molto meglio a lungo termine (cioè le transizioni CSS sono accelerate dall'hardware mentre le transizioni JavaScript non lo sono, sono solo rapide iterazioni di stili inline).