Le schede CSS sono davvero ottime per visualizzare le informazioni associate in un’unica posizione di facile navigazione. Essenzialmente sembrano divisori a schede che vedresti in una scatola di ricette o in un raccoglitore. Ecco alcuni esempi di siti Web che utilizzano la navigazione a schede:
Mentre osservi questi due siti, pensa ai vantaggi dell’utilizzo di un tale componente dell’interfaccia utente sui siti. Quali problemi risolve? Per quale tipo di informazioni la navigazione a schede sarebbe una buona implementazione?
Quando è necessario raggiungere una struttura dell’interfaccia utente che organizza testo o informazioni in componenti significativi e li visualizza sullo schermo senza prendere troppo spazio, la navigazione a schede è una scelta saggia. Parleremo della navigazione a schede in modo più approfondito man mano che inizieremo a usare JavaScript, jQuery e/o Bootstrap, ma c’è anche un’implementazione che potremmo usare che richiede solo HTML e CSS puro. Diamo un’occhiata alla configurazione:
Imposta il tuo HTML:
Vai avanti e imposta il tuo codice HTML standard con un contenitore all’interno del corpo che fungerà da contenitore principale per il progetto. Puoi chiamarlo come preferisci nell’attributo class, ma io lo chiamerò class="tabs"
. Finora, il tuo codice HTML dovrebbe essere simile a questo: