Creare un rollover disgiunto con i CSS

Fino a qualche tempo fa tale evento veniva effettuato con l' interazione di linguaggi di scripting: il JavaScript. Invece pare che il codice CSS, da solo, sia sufficiente per avere lo stesso effetto e possa sopperire a tale linguaggio.

Cosa è il roll-over disgiunto

Tutti ci siamo imbattuti in questo "evento" nelle pagine che abbiamo visitato e che continuiamo a frequentare. Vi è mai capitato di passare su un collegamento e vedere, in un' altra parte della pagina, accadere "qualcosa"? Questo "qualcosa" potrebbe essere una descrizione dettagliata di quello che si andrà a visitare. Oppure una barra di navigazione che, al passaggio del mouse su un suo link, mostra un sottomenu ecc... Questo è il rollover disgiunto: cliccare in una zona A della pagina ed in un' altra, che possiamo chiamare zona B, appare un evento "collegato" a quanto avvenuto prima. L' esempio che ho fatto del menu, con sottomenu, lo si può ottenere si con i CSS, ma meriterebbe un articolo a se stante, che realizzerò in futuro. L' ho solo citato per rendere l' idea.

Descrizione del tutorial

Spero che a questo punto siate ancora qui a leggere il seguito dell' articolo e che non abbiate abbandonato il sito. Adesso viene il bello, non abbiate fretta! :))) Cosa realizzeremo? Una struttura con: testata, colonna sinistra (nella quale metteremo un elenco linkabile) ed una parte destra nella quale apparirà un testo corrispondente al link sul quale si è passati.

Il codice della struttura

Cominciamo a definire il codice per il contenitore generale, che ho nominato, #container:

#container{ 
margin:20px auto; 
padding:0; 
width:698px; 
height:400px; 
border:1px solid #f00; 
text-align:center; 
} 

Da notare la larghezza (width) di 698 px. Visto che ci siamo, questa potrebbe essere una seconda implementazione per ovviare al problema del box-model. Siccome margini, bordi e padding sono elementi che vanno a "sommare" il loro valore per il calcolo della larghezza totale di un #div, in questa dichiarazione ho settato la larghezza del contenuto "netto" ( 698 px).

Lo spessore del bordo (1px solid) andrà a "completare" la misura che mi sono prefisso inizialmente, vale a dire 700px per il nostro #container. Ultimo accenno: 1px (bordo sinistro) + 698px (contenuto) + 1px (bordo destro) = 700px. Questo ci permette di avere una corretta visualizzazione sia su IE, che non implementa correttamente il box model, sia su tutti gli altri browser standard-compliant. Proseguiamo. Adesso scriveremo il codice per il div #testata:

#testata{
margin:0;
padding:0; 
height:40px; 
line-height:40px; 
background-color:#aaa;
}  

height e line-height sono uguali per avere il testo centrato verticalmente. Anche questo è stato un argomento che ho trattato qualche articolo fa, in questa sezione. Per il div #testata non c' è altro di importante da dire. Passiamo, adesso, a vedere un elemento #div "nascosto" nella struttura; l' ho nominato #corpo. Esso si trova immediatamente sotto la testata, con un posizionamento relativo in quanto al suo interno metteremo altri elementi #div con posizionamento assoluto. Il suo codice è:

#corpo{ 
margin:0; 
padding:0; 
background-color:#ddd; 
height:360px; 
text-align:left;
position:relative;
}  

Anche per questo elemento, nulla di particolare nella stesura del suo codice. Ora tocca al #menu, che posizioneremo nella parte sinistra:

#menu{
float:left; 
margin:0; 
padding:0;
width:200px; 
height:100%; 
background-color:#fff; 
text-align:left; 
}  

Il #menu lo posizioniamo con la proprietà float:left; la sua altezza è pari al 100% in modo tale da "riempire" tutta la colonna "sovrapponendosi" al colore di sfondo che si trova immediatamente sotto, vale a dire quello del div #corpo. Ecco il file di esempio in cui si vede la struttura della pagina.
Nel div #menu inseriremo un elenco verticale ottenuto con una semplice lista <ul>.

Creazione dell' elenco

Per la costruzione dell' elenco, come ho anticipato più su, ci avvarremo di una semplice lista con i tag <ul> (unordered list). Il codice è il seguente:

#menu ul{
margin:0;
padding:0;
list-style-type:none;
list-style-position:outside;
line-height:1.6em; 
} 

Eliminiamo margini e padding all' elenco, oltre al marcatore di default. Impostiamo una posizione "esterna" e dichiariamo una interlinea pari a 1.6em. In questo modo avremo ben distanziate le voci dell' elenco. Il passaggio successivo prevede la dichiarazione degli elementi <li>, quando ad essi viene associato un link:

#menu li a{
margin:4px 0 0 10px;
padding:0; 
width:170px;
display:block;
font-weight:bold;
font-size:76%; 
text-decoration:none; 
color:#09d; 
border:1px solid #fff;
} 
#menu li a:visited{   
margin:4px 0 0 10px;   
padding:0;   
font-weight:bold;   
text-decoration:underline;   
color:#f60;   
border:1px solid #fff;   
background-color:#ddd;   
}
#menu li a:hover{   
margin:4px 0 0 10px;   
padding:0;   
text-decoration:none;   
border:1px dashed #666;   
color:#000;   
background-color:#ddd;   
} 

Oltre alle diverse formattazioni che ho creato per i tre stati (:link, :visited ed :hover), non ho inserito codice complesso che abbia bisogno di una spiegazione particolare. Una cosa da notare: nello stato a e :visited del menu ho dichiarato border:1px solid #fff; mentre nello stato :hover ho scritto: border:1px dashed #666; Perchè questo? Vi è mai capitato di passare su una serie di link ed assistere ad un "tremolio"? A me si e sarebbe successa la stessa cosa se avessi impostato un bordo solo per lo stato :hover. Ho semplicemente "occupato" lo stesso spazio nei tre stati camuffando il bordo, nei primi due, con lo stesso colore di sfondo del laterale sinistro. Così facendo non avremo nessun "movimento" del menu e la cosa sembra più ordinata. La pagina di esempio comincia a prendere "forma".

Gli elementi strong

Eccoci giunti al nocciolo del roll-over disgiunto: gli elementi strong associati uno allo stato "link" delle voci elenco e l' altro allo stato ":hover". Andiamo con ordine.

#menu li a strong{
display: none; 
} 

#menu li a:hover strong{
width: 400px; 
margin: 0; 
padding:10px; 
position: absolute; 
left:245px; 
top: 60px;  
display: block;  
z-index: 100; 
font-weight:normal; 
text-align: left; 
border: 2px outset #000; 
text-align:justify; 
background:#fff; 
} 

Il primo elemento strong non permette di visualizzare nulla (display: none) nello stato a:link. È al secondo elemento che dobbiamo prestare molta attenzione.

#menu li a:hover strong 

Leggendolo da destra a sinistra possiamo interpretarlo in questo modo:
applica la formattazione dichiarata nell' elemento strong alla voce di elenco li, quando questa si trova nello stato :hover. In altri termini: quando passiamo nella colonna sinistra su una voce di elenco, deve succedere "qualcosa" in un' altra parte della pagina. Quando, invece, le voci dell' elenco sono nello stato :link, non deve succedere nulla. È proprio quello che volevamo no? La formattazione che ho assegnato attraverso l' elemento strong non è nulla di particolare; è semplicemente un livello posizionato in maniera assoluta (ecco perchè la presenza di un box con posizione relativa [#corpo]) con delle caratteristiche ben precise: larghezza, colore di sfondo, bordi ecc... Un ultimo div che dobbiamo implementare è #content. È qui dentro che sarà visualizzato il livello contenente la descrizione dei link. Il suo codice è:

#content{
margin:0; 
padding:0;
height:100%;
width:498px;
background-color:transparent;  
float:right; 
text-align:left;
} 

Anche questo elemento è stato posizionato con la proprietà float. Il suo colore di sfondo è impostato su "transparent" in modo tale da assumere, come colore, quello che si trova al di sotto di esso, cioè quello del div #corpo. Adesso siamo giunti davvero alla fine del nostro articolo.

Il codice XHTML

Abbiamo visto tutto il codice CSS; vediamo come scrivere il codice XHTML:

<div id="menu"> 
<ul>
<li><a href="#" title="Descrizione del link 1">Link 1<strong> 
Descrizione del link 1<br />
Descrizione del link 1.... </strong></a></li> 
</ul>
</div> 

La parte di codice che ho riportato qui su, si riferisce ad una sola voce di menu con link. Il file di esempio finale contiene codice di presentazione e codice strutturale. Sta a voi studiarlo e modificarlo per i vostri progetti.

© www.extrowebsite.com - Grafica, layout, articoli e guide sono di esclusiva proprietà del webmaster - Tutti i diritti riservati