A mio parere l’ausilio dei CSS da parte dei web designer ha permesso effetti grafici molto tempo fa impossibili, basti dare un’occhiata a ciò che CSS Zen Garden contiene per capire quanto questi strumenti riescano a dare il meglio di loro.

Però anche i fogli di stile presentano i loro limiti, come quello legato all’import dei font; infatti a volte si vorrebbe adoperare un font particolare all’interno di un sito per ottenere una coerenza stilistica, e questo non può essere sempre ottenuto per tutte le piattaforme. Per ovviare a questo inconveniente, in passato, si decideva di creare un layout del sito web con l’ausilio di software di grafica e delle tabelle, poi si decideva di apporre l’effetto rollover al menu di navigazione adoperando JavaScript appositi.

Oggi sappiamo che questa “soluzione” non è la maniera corretta per aver un giusto web semantico, in quanto una tabella deve essere utilizzata solo per presentare dati tabulari e non per l’impaginazione o la presentazione; inoltre un elenco di link, come quello di un menu di navigazione, dovrebbe essere racchiuso all’interno di <ul> o <ol>, e dovrebbe essere solo testo, senza elementi grafici.

Quindi la domanda è:

Bisogna abbandonare il web semantico perché troppo restrittivo, oppure esiste un’alternativa?

L’alternativa ovviamente esiste, e come tutte le alternative richiede un po’ più di pazienza e sacrificio, però, poi si potrà ottenere un menu con effetto rollover, senza Javascript e mantenendo intatta la filosofia del web semantico.

Il tutorial

Questo tutorial è destinato a tutti coloro i quali si stanno avvicinando allo studio e utilizzo dei CSS ed è suddiviso in cinque passaggi, e per ottenere il nostro menu partiremo dalla grafica con Photoshop e, successivamente, andremo ad utilizzare metodi CSS molto noti quali “image replacement” e “sliding door”.

Qui si può visionare un esempio del menu completo.

1. Primo passo: creiamo un nuovo documento Photoshop

Passo 1 Creare un menu di navigazione con effetto rollover con i CSS partendo dalla grafica Creare un menu di navigazione con effetto rollover con i CSS partendo dalla grafica 1

Stiamo per creare una semplice barra di navigazione che avrà quattro sezioni: Home, Chi siamo, Servizi e Contatti. Per fare questo avviare Photoshop e dal menu principale selezionare File > Nuovo per aprire la finestra di dialogo Nuovo documento. Inserisci le seguenti informazioni:

  • Nome: menu-navigazione
  • Larghezza: 500 pixel
  • Altezza: 72 pixel
  • Risoluzione: 72 pixel/pollice
  • Metodo colore: RGB
  • Contenuto sfondo: Trasparente

Sappiamo sin da ora che abbiamo bisogno di quattro spazi e perciò vogliamo assicurarci che i nostri pulsanti siano correttamente distanziati uno dall’altro, per fare questo bisogna impostare, nel caso non l’abbiate mai fatto precedentemente, i righelli ai lati dell’immagine con l’unita di misura in pixel; si ottiene questa possibilità cliccando con il tasto destro del mouse sul righello e qui viene chiesto quale unità di misura adoperare.

Adesso che abbiamo impostato la corretta unità di misura, dobbiamo fare due conti: 500 pixel / 4 = 125 pixel; quindi ogni nostro spazio avrà questa dimensione in larghezza, mentre in altezza si dovrà fare 72 pixel / 2 = 36 pixel.

Quindi adesso utilizziamo lo strumento guida, e partendo dal righello portiamo la guida per l’orientamento verticale ogni 125 pixel, mentre per l’orientamento orizzontale basta un unica linea a 36 pixel. Per avere una maggiore precisione durate questa fase si può pensare ad zoomare di parecchie volte nelle vicinanze del punto in cui rilasciare la guida. Fatto questo si può decidere di riempire il primo livello di lavoro del colore che si vuole utilizzare.

Passo 2 Creare un menu di navigazione con effetto rollover con i CSS partendo dalla grafica Creare un menu di navigazione con effetto rollover con i CSS partendo dalla grafica 2

Se avete seguito le indicazioni il vostro documento dovrebbe apparire come l’immagine qui sopra.

2. Secondo passo: mettiamo il testo

A questo punto dobbiamo solamente aggiungere il testo per i pulsanti, sia nel loro stato statico che con l’effetto rollover.

Uno degli svantaggi di usare i CSS richiamando le immagini al passaggio del mouse è che si potrebbe verificare un leggero sfarfallio quando l’utente vi si sposta sopra; questo è dovuto al fatto che il browser ha necessità di un po’ di tempo per richiamare la seconda immagine, una volta che questa è stata caricata viene salvata nella cache del browser e allora non sarà piú presente il tremolio.

Ma noi non vogliamo nessun tremolio e per raggiungere questo obiettivo adopereremo la proprietà CSS background-position abbinata all’hover del link, comunque questo è un discorso che vedremo più avanti.

Scegliete il font che più preferite e che più vi convince e, sfruttando le guide create precedentemente, posizionate prima il testo che dovrebbe risultare statico, quindi quello nella parte inferiore del menu; controllate che dimensioni e distanze siano giuste e corrette, di modo da avere un menu bilanciato esteticamente.

Passo 3 Creare un menu di navigazione con effetto rollover con i CSS partendo dalla grafica Creare un menu di navigazione con effetto rollover con i CSS partendo dalla grafica 3

Ora andiamo a lavorare sulle immagini. Per creare l’effetto rollover, infatti, adopereremo il famoso metodo CSS “Sliding Doors”, che funziona facendo slittare un’immagine da una posizione all’altra; quindi avremo una sola immagine che conterrà sia lo stato statico che attivo del link.

Per creare velocemente i livelli rollover con Photoshop basta selezionare il livello che si vuole duplicare e senza rilasciare il pulsante del mouse, trascinare il livello verso l’icona Creare un nuovo livello, situata nella parte inferiore della finestra Livelli. Questo creerà una copia esatta del vostro livello, ma con il nome “livello copia”.

Adesso con il tool Sposta bisogna posizionare i “livelli copia”; tenendo premuto il tasto SHIFT trascina il testo nella parte superiore del menu. Tenendo premuto il tasto Shift vi é consentito solo di trascinare il testo in alto o in basso, a destra o a sinistra, oppure in un angolo rettilineo. Occhio alla corretta impostazione delle distanze.

A questo punto basta cambiare il colore per creare l’effetto rollover al passaggio del mouse e ripetere lo stesso lavoro per ogni livello.

3. Passo terzo: taglio delle immagini e salvataggio per il web

Arrivati a questo punto l’ultimo passaggio da svolgere è quello relativo al taglio delle immagini; le linee guide create in precedenza ci servono anche e sopratutto per questo scopo. Basta selezionare l’immagine del menu sia nello stato statico che attivo per avere i nostri quattro singoli bottoni del menu.

Ricordati che al momento della copia devi selezionare Copia elementi uniti, di modo da copiare entrambi i livelli; successivamente puoi incollare su un nuovo progetto e da qui Salvare per il web.

4. Passo quattro: scriviamo il codice XHTML

Abbiamo realizzato le nostre immagini, le abbiamo ritagliate e salvate per il web, adesso è il momento di creare il codice XHTML che permetterà il funzionamento del menu, quindi armatevi di editor e scriviamo:

<div id="wrap">
	<ul id="nav">
        <li><a class="home" href="#" title="Home">Home</a></li>
        <li><a class="about" href="#" title="Chi siamo">Chi Siamo</a></li>
        <li><a class="servizi" href="#" title="Servizi">Servizi</a></li>
        <li><a class="contatti" href="#" title="Contatti">Contatti</a></li>
        </ul><!-- end #nav -->
</div><!-- end #wrap -->

Una volta fatto questo salvate la pagina con il nome che preferite ed ovviamente con l’estensione .html; si puó notare che il codice immesso in questa fase non è comprensivo delle immagini, infatti il nostro menu di navigazione è una lista non ordinata di link racchiusi all’interno del tag <ul>. Si noti anche che abbiamo identificato l’elemento ul con un ID denominato “nav” e abbiamo anche dato a ciascuno dei collegamenti un’unica classe di nomi: “home”, “about”, “servizi” e “contatti”. Tutto questo è fatto per riuscire a discriminare solo quei particolari elementi con gli stili personalizzati, e non tutti gli elementi <ul> e <a> della pagina.

5. Passo cinque: il foglio di stile

Questo è l’ultimo passaggio del tutorial, ed è quello che permetterà il vero e proprio effetto rollover, solamente adoperando le potenzialità dei CSS. Se decidete di creare un sito web ricordatevi sempre di generare CSS esterni e richiamarli successivamente nel codice delle pagine web, qui un’ottima guida su come fare.

body {
    margin:0;
    padding:0;
    background-color:#eee;
}
a {outline:none;}

#wrap {
    width:500px;
    margin:0 auto;
}
#nav {
    margin-top:36px;
    padding:0;
    list-style:none;
    width:500px;
    height:36px;
}
#nav li {float:left;}

#nav li a.home {
    display:block;
    width:125px;
    height:36px;
    background:url("home.gif") no-repeat 0 -36px;
    text-indent: -9999px;
}
#nav li a.home:hover {background-position: 0 0;}

#nav li a.about {
    display:block;
    width:125px;
    height:36px;
    background:url("about.gif") no-repeat 0 -36px;
    text-indent: -9999px;
}
#nav li a.about:hover {background-position: 0 0;}

ul#nav li a.servizi {
    display:block;
    width:125px;
    height:36px;
    background:url("servizi.gif") no-repeat 0 -36px;
    text-indent: -9999px;
}
#nav li a.servizi:hover {background-position: 0 0;}

ul#nav li a.contatti {
    display:block;
    width:125px;
    height:36px;
    background:url("contatti.gif") no-repeat 0 -36px;
    text-indent: -9999px;
}
#nav li a.contatti:hover {background-position: 0 0;}

Permettetemi di spiegare rapidamente il codice scritto:

Per prima cosa ricordate quando abbiamo creato il menu con Photoshop? Abbiamo impostato la larghezza e l’altezza del nostro menu, e questo viene ricalcato nel modo con cui il CSS funziona; infatti abbiamo impostato una larghezza di 500 pixel al’ID wrap, che contiene il nostro menu, e lo stile del tag <ul> è legato all’ID denominato nav con un’altezza di 36 pixel. Poi, sempre sul nav, poichè sappiamo che la lista non ordinata viene interpretata dal browser con la generazione di un punto, abbiamo rimosso questa caratteristica impostando un list-style:none;.

Inoltre sappiamo che creando un menu di navigazione orizzontale con una lista non ordinata questa, per impostazione predefinita, visualizza un elenco verticale; per evitare l’allineamento predefinito abbiamo semplicemente impostato come “floattanti” a sinistra i link con float:left;.

Abbiamo anche fatto si che ogni link avesse una classe univoca, ed in questo modo, siamo in grado di controllare ogni classe, dare una larghezza, altezza e non far ripetere l’immagine di sfondo. Inoltre grazie a questa scelta possiamo sfruttare il metodo del “Sliding Doors”, che consente di cambiare la posizione dello sfondo in merito alla pseudo classe :hover, ottenendo cosí in nostro effetto rollover. Come tocco finale, abbiamo rimosso il testo mediante il metodo dell’image replacement, impostando un testo negativo di -9999px, e facendo virtualmente sparire il testo prodotto dal link.

0saves
Se ti è piaciuto questo articolo puoi commentare oppure condividerlo online tramite i social network.
Se invece mi adori e non vuoi perderti nemmeno uno dei miei post puoi iscriverti al Feed RSS.