Abbiamo ancora un po 'di lavoro da fare per completare l'area di ricerca.
Restiamo distratti solo per un secondo perché ho notato che non abbiamo ancora aggiunto l'effetto di impilamento tridimensionale al ritorno a capo della pagina, quindi lo facciamo e cambiamo il colore.
Quindi lavoriamo sull'area “Cerca in:”, che sono i piccoli link su cui puoi cliccare per restringere la ricerca in base a quale area del sito. In seguito lo faremo effettivamente funzionare, ma avremo l'interfaccia utente impostata qui. I collegamenti sono di colore azzurro, ma il collegamento "selezionato" diventa bianco e viene sottolineato, il che è un sacco di feedback su quale è selezionato.
Aggiungiamo anche un carattere ✕ (che catturiamo da CopyPasteCharacter) come un piccolo collegamento su cui puoi fare clic (o toccare) per chiudere l'area di ricerca.
Una volta che abbiamo impostato tutto il design, scopriamo che aprire e chiudere l'area di ricerca è un po 'imbarazzante. Le cose si avvolgono temporaneamente su se stesse quando l'area di ricerca aperta è temporaneamente ristretta. Per risolverlo, ci assicuriamo che nulla sia avvolto white-space: nowrap;e assicuriamo che nulla risulti strano oveflow: hidden;.
Concludo dicendo che faremo i prossimi motori di ricerca, ma in realtà non ci arriveremo dopo, che arriverà intorno al Video # 094.