CSS

CSS: non si finisce mai di imparare

Un paio di mesi fa ho comprato il libro CSS – Guida completa scritto da Gianluca Troiani. Un libro molto interessante che spiega con l’uso di semplici esempi come usare al meglio i CSS.
Ero convinto di avere tutte le conoscenze necessarie nell’uso dei CSS 2.1, ma durante la lettura ho avuto conferma di quanto sbagliavo e di come alcune cose, anche le più banali, le conoscevo solo in maniera superficiale.

Oggi ho ripreso in mano il libro per ripassare le tecniche per realizzare un menù verticale con dei sottomenù a tendina (sempre verticali) che si aprono al passaggio del mouse.
Utilizzo da tempo alcune di queste tecniche, però dovevo realizzare una versione di menù un pò differente dall’originale e ho preferito partire dalla “base”.

Riporto l’esempio presentato da Gianluca, e scaricabile anche dal sito del libro.

Nel mio caso, dovevo realizzare un menù a tendina verticale di larghezza fissa (in pixel, mentre la versione di partenza è in em) creando un effetto spaziatura sia tra le singole voci del menù, che tra il menù e il sottomenù.
Fare uso dei margin compromette il funzionamento del javascript che gestisce l’apertura/chiusura dei sottomenù.

Alla fine ho realizzato questa versione che ovviamente ha il codice html identico, quello che cambia è il CSS:
per creare la spaziatura tra i menù ho assegnato il padding sinistro (di 10px) al tag ul e background: transparent per non compromettere il funzionamento del javascript.
Assegnando le dimensioni in pixel del tag li e del tag a interno a li si risolve il problema di compatibilità con IE e si può semplificare il CSS.

Ricordo che lavorando in pixel, la mia versione ha perso molte delle qualità presenti nella versione originale, prima fra tutte l’adattamento delle dimensioni in base al ridimensionamento dei caratteri del browser.

Per il resto rispecchia le mie necessità

I prossimi giorni presenterò una rivisitazione del javascript che gestisce l’apertura/chiusura, fatta attraverso l’uso di jquery per creare degli effetti di transizione.

Tags: CSS