Liste

Oltre alle tabelle, anche le liste sono elementi HTML molto usati, talvolta anche per la definizione di layout. In questa lezione vediamo come w3.css permette di gestirle, personalizzarle e stilizzarle.

Per produrre una lista e gestirla mediante w3.css, occorre semplicemente utilizzare la classe w3-ul, applicata all'elemento che identifica una lista non ordinata (ul), oppure a quello che identifica una lista ordinata (ol):

<ul class="w3-ul">
  <li>Jill</li>
  <li>Eve</li>
  <li>Adam</li>
</ul>
<ol class="w3-ul">
  <li>Jill</li>
  <li>Eve</li>
  <li>Adam</li>
</ol>

L'estetica di questo markup sarà una lista pulita, senza identificatori di voce e con bordo inferiore di colore grigio pallido.

A questo punto, possiamo personalizzare lo stile standard offerto da w3.css attraverso la moltitudine di classi che abbiamo analizzato, come ad esempio quella appena vista per le tabelle, w3-hoverable, per produrre un effetto hovering globale sulle voci della lista:

<ul class="w3-ul w3-hoverable">
  <li>Jill</li>
  <li>Eve</li>
  <li>Adam</li>
</ul>

Se invece vogliamo un hover specifico per le singole voci, utilizzeremo le classi w3-hover-[color-name]:

<ul class="w3-ul">
  <li class="w3-hover-red">Jill</li>
  <li class="w3-hover-blue">Eve</li>
  <li class="w3-hover-green">Adam</li>
</ul>

Vediamo un esempio leggermente più complesso: la realizzazione di una lista le cui voci sono eliminabili cliccando sul pulsante di chiusura, identificato da una x collocata sul lato destro delle stesse voci:

<div class="w3-container">
  <h2>Voci richiudibili</h2>
  <p>Per chiudere le voci premere "x":</p>
  <ul class="w3-ul w3-card-4">
    <li class="w3-display-container">Jill <span onclick="this.parentElement.style.display='none'" class="w3-button w3-transparent w3-display-right">&times;</span></li>
    <li class="w3-display-container">Adam <span onclick="this.parentElement.style.display='none'" class="w3-button w3-transparent w3-display-right">&times;</span></li>
    <li class="w3-display-container">Eve <span onclick="this.parentElement.style.display='none'" class="w3-button w3-transparent w3-display-right">&times;</span></li>
  </ul>
</div>

Un ottimo esercizio consiste nel provare ad eseguire questo codice su una pagina di esempio, per comprenderne meglio il funzionamento.