Menu di navigazione:
Scarica il codice HTML e CSS

Menu Sliding Doors

Inizia il tutorial

In questo esempio mostreremo come realizzare, a partire da una semplice lista in (X)HTML, un menu di navigazione "tab" (costituito da "linguette") facendo uso esclusivo dei CSS2. Grazie alla tecnica "Sliding Doors" sfrutteremo uno dei vantaggi principali dei CSS2, ovvero, la capacità di disporre le immagini come sfondo di elementi (X)HTML, permettendo loro di scivolare l'una sull'altra per creare determinati effetti.
Per garantire l'allargamento delle voci del menu in relazione alla dimensione della finestra del browser e della grandezza dei caratteri (non conosciamo a priori la distanza che intercorre tra i bordi arrotondati) utilizzeremo 4 immagini separate e indipendenti che ci serviranno a creare l'effetto arrotondato dei bordi.
Di queste 4 immagini, due ci serviranno per realizzare il bordo superiore sinistro e il bordo superiore destro delle voci dei link non attivi e le altre due ci serviranno per realizzare il bordo superiore sinistro e il bordo superiore destro della voce attiva del link. Una quinta immagine verrà utilizzata (ininfluente per la realizzazione dei "tab") per dare una sfumatura allo sfondo del menu.

In questa pagina viene fornito l'esempio finito, già realizzato, del quale è possibile scaricare il codice (X)HTML e il relativo CSS utilizzato (scaricabili in formato zip).
Nelle pagine successive, invece, seguiremo passo dopo passo le fasi di realizzazione.

HTML:

<div id="header">
 <ul>
  <li><a href="#">Home</a></li>
  <li id="active"><a href="#">Accessibilit&agrave;</a></li>
  <li><a href="#">Usabilit&agrave;</a></li>
  <li><a href="#">CSS</a></li>
  <li><a href="#">XHTML</a></li>
 </ul>
</div>

Inizia il tutorial

Riferimenti

Sliding Doors of CSS [link esterno]
su alistapart.com

Sliding Doors of CSS (traduzione italiana da alistapart) [link esterno]
su gdesign.it

Sliding Doors Tabs Menu [link esterno]
su dynamicdrive.com

Sliding doors with a drop line [link esterno]
su cssplay.co.uk

torna su

torna su