[CSS3] Tabbed section senza JS.. si può!

[Al_katraz984]

Buongiorno,

visto che ormai tutti sono guru di javascript e tutti metterebbero js sulla minestra per mangiarlo, io vado contro a tutti e vi vorrei presentare alcune soluzioni che si possono benissimo fare senza l'aiuto di js.

il primo esempio che vi porto è un menù a tabs che non prevede l'uso di js

L'idea funziona in questo modo:

<contenitore>
  <pulsante-1>  <pulsante-2>

  <contenuto-1>
  <contenuto-2>
</contenitore> 

questa struttura si può applicare a qualsiasi tipo di contenuto.. Noi lo applichiamo ad un form di modifica ma si può benissimo applicare a qualsiasi tipo di sezione basta mantenere la struttura inalterata.

Alcuni appunti importanti:
i pulsanti e i contenuti devono condividere la stessa root


le classi che useremo:

.tab-form {} // contenitore principale
.tabs {} // classe generica
.tab-label {} // classe specifica per le label
.tab-selector-x {} // selettore di contenuto
.content-x {} // identificatore di contenuto 

ora vado a pranzo e nel pomeriggio esemplifico il tutto..

[Al_katraz984]

Passiamo al lato pratico dell'esercizio..

il progetto verte a realizzare un form di modifica dati utente con una visualizzazione tabulare, potete adattare l'esempio anche ad altre sezioni del vostro progetto.

Per fare questo solamente tramite CSS useremo dei radio-button e la funzionalità :checked nonchè alcune animazioni per abbellire un po' la cosa..

la struttura html del nostro form è la seguente:

<form>
 <input type="radio" />
 <label></label>
 <input type="radio" />
 <label></label>
 <input type="radio" />
 <label></label>

 <fieldset>
  <legend>Dati utente</legend>
 </fieldset>

 <fieldset>
  <legend>Indirizzo</legend>
 </fieldset>

 <fieldset>
  <legend>Altro</legend>
 </fieldset>
</form> 

come potete vedere la struttura ricalca quella indicata nel primo post.. il form sarà il nostro contenitore, i radio i nostri pulsanti e i fieldset i contenuti

nel prossimo post aggiungiamo un po' di dati e associamo le classi per intervenire con il foglio di stile
keep UP!

[Al_katraz984]

Proviamo ad aggiungere qualche dato e le classi alla nostra struttura.

Per lavorare bene con i CSS bisogna sempre partire da una struttura il più efficente possibile. E' meglio perdere 10 minuti in più e scrivere una struttura (html) efficace e semanticamente corretta piuttosto che lavorare su strutture caotiche e a volte non semanticamente corrette.

!!IMPORTANT!! La struttura di una pagina web è data dalla parte HTML

Bando alle chiacchere:

<form class="tab-form">
 <input type="radio" name="radio-set" id="tab-1" class="tabs tab-selector-1" />
 <label for="tab-1" class="tab-label">Dati utente</label>
 <input type="radio" name="radio-set" id="tab-2" class="tabs tab-selector-2" />
 <label for="tab-2" class="tab-label">Indirizzo</label>
 <input type="radio" name="radio-set" id="tab-3" class="tabs tab-selector-3" />
 <label for="tab-3" class="tab-label">Altro</label>

 <fieldset class="content-1">
  <legend>Dati utente</legend>
  <p><label for="name">Nome</label><input type="text" name="name" maxlength="32" value="Valore recuperato da db" required /></p>
 </fieldset>

 <fieldset class="content-2">
  <legend>Indirizzo</legend>
  <p><label for="address">Via</label><input type="text" name="address" value="Valore recuperato da db" /></p>
  <p><label for="town">Paese</label><input type="text" name="town" value="Valore recuperato da db" /></p>
  <p><label for="cap">CAP</label><input type="text" name="cap" value="Valore recuperato da db" /></p>
 </fieldset>

 <fieldset class="content-3">
  <legend>Altro</legend>
  <p><label for="details" class="block">Dettagli</label><textarea name="details">Testo recuperato da db</textarea></p>
 </fieldset>
</form> 

l'unico appunto da fare qui è che il nome dei nostri radio-button deve essere univoco

Ok semplice no? ora che abbiamo un po' di contenuti e abbiamo impostato le etichette e le classi possiamo passare alla parte css.
Riporto il minimo indispensabile per capire l'esempio, i dati mancanti dovete includerli voi

[Al_katraz984]

Eccoci nel cuore del nostro esempio, la parte CSS

partiamo dalla root e giu fino a vedere tutte le classi proposte nell'esempio:

form.tab-form {
  overflow: hidden;
} 

forziamo il contenuto del nostro form all'interno della dimensione stessa del form

.tab-form {
  box-shadow: 0 -2px 3px -2px rgba(0,0,0,0.2), 0 2px 2px rgba(0,0,0,0.1);
  border-radius: 0 3px 3px 3px;
} 

semplicemente diamo un bordo al nostro contenitore

.tab-form fieldset {
  border: 1px solid #eee;
  width: 100%;
  display: none;
} 

!!molto importante!! nascondiamo i contenuti (fieldset) del form che prevede l'uso delle tabs, questi contenuti verranno visualizzati a seconda del radio-button selezionato

.tabs  {
  height: 40px;
  padding: 0 1%;
  float: left;
  display: none;
  width: 30%;
  cursor: pointer;
} 

classe generica che identifica i nostri pulsantini (radio-button). Nella visualizzazione finale questi non sono visibili e sono coperti dalle relative etichette (label) ma ci sono.

input.tabs:hover + label {
    background-color: #ccc;
} 

un po' di stile al nostro menù, cambiamo il background delle etichette al :hover del mouse. Il simbolo "+" seleziona l'etichetta più vicina all'input. Quindi: "Cambia il background della label direttamente a fianco all'input con la classe .tabs".. Approfondisci

input.tabs:checked  + label {
    background-color: #f0f0f0;
} 

ancora un po' di stile, distinguiamo i pulsanti "cliccati" da quelli non cliccati.. emuliamo il corrispettivo di :active per i link

.tab-label {
  background: linear-gradient(top, #5ba4a4 0%,#4e8c8a 100%);
  line-height: 40px;
  height: 40px;
  padding: 0 1%;
  float: left;
  display: block;
  width: 30%;
  color: #385c5b;
  letter-spacing: 1px;
  text-transform: uppercase;
  font-weight: bold;
  text-align: center;
  text-shadow: 1px 1px 1px rgba(255,255,255,0.3);
  border-radius: 3px 3px 0 0;
  cursor: pointer;
} 

un po' di stile per le nostre etichette. Da notare che le dimensioni delle label sono identiche alle dimensioni dei radio-button, la label deve coprire il radio button

input.tab-selector-1:checked ~ fieldset.content-1,
input.tab-selector-2:checked ~ fieldset.content-2,
input.tab-selector-3:checked ~ fieldset.content-3 {
  display: block;
} 

ed ecco la magia....
Sfruttiamo il selettore ~ per riferirci a "tutti i fieldset con classe content-1 che sono preceduti da un input con classe tab-selector-1 il quale deve essere selezionato (:checked)"
Il selettore ~ funziona solamente con tags che condividono la stessa root quindi fate molta attenzione alla vostra struttura

[Al_katraz984]

Molto bene... qui trovate l'esempio base funzionante per darci un occhio http://jsfiddle.net/UtxPE/

Facciamo un po' i fighi e aggiungiamo un po' di animazione cosi facciamo invidia a chi si sta scervellando con javascript

Per fare questo possiamo definire un'animazione:

@keyframes fromBack {
  0% { 
    trasform: scale(0);
    opacity: 0;
  }
  100% {
    trasform: scale(1);
    opacity: 1;
  }
} 

piccolo esempio di animazione, fromBack come dice la parola, da dietro (porcellini )

e la associamo alla visualizzazione:

input.tab-selector-1:checked ~ fieldset.content-1,
input.tab-selector-2:checked ~ fieldset.content-2,
input.tab-selector-3:checked ~ fieldset.content-3 {
  animation: fromBack 0.7s ease-in-out 0.2s backwards;
  display: block;
} 

Qui l'esempio funzionante: http://jsfiddle.net/kdTKG/

La mia è solo una delle millemila animazioni possibili, quindi sbizzarritevi e spero possa essere utile a qualcuno
Andrea