Web Design Trails - Sulla scia del web design

In questo tutorial vedremo come realizzare un sottomenu che sembra scorrere da sotto l’header utilizzando il CSS e un pizzico di jQuery. Come si vede nell’immagine, l’header che ho pensato ha un lato obliquo ed è a un livello superiore rispetto al contenuto. Il sottomenu tuttavia sta nel mezzo, fra l’header e il corpo.

Creiamo la struttura HTML dell’header

L’header avrà il logo a sinistra e il menu di navigazione a destra. Il nostro codice HTML sarà dunque:

 <div class="header">
    <!-- LOGO -->
    <h1><a href="#">Relax</a></h1>

    <!-- QUI INSERIREMO IL MENU -->
</div>

Adesso definiamo lo stile dell’header e del logo:

 .header{
    background-image: url(../images/header.png);
    background-repeat: no-repeat;
    width: 960px;
    height: 133px;
    margin: 0 auto;
    position: relative;
}

 h1{
    margin: 0;
    position: absolute;
    top: 40px;
    left: 65px;
 }

 h1 a{
    background-image: url(../images/logo.png);
    background-repeat: no-repeat;
    width: 157px;
    height: 42px;
    display: block;
    text-indent: -1000em;
    direction: ltr;
 }

Fin qui niente di nuovo.

La classe .header definisce l’immagine di sfondo, le dimensioni e la posizione della testata. Siccome l’header ha un lato inclinato, l’immagine di sfondo contiene anche l’ombra e per questo motivo deve essere una PNG con sfondo trasparente. Completiamo inserendo il logo a sinistra con una classica tecnica di sostituzione dell’immagine.

Inseriamo il menu

Per il codice del menu usiamo una lista non ordinata:

 <ul class="menu">
    <li class="voce_1"><a class="selezionato" href="#">Home</a></li>
    <li class="voce_2"><a href="#">About</a></li>
    <li class="voce_3"><a class="triangolo" href="#">Portfolio</a></li>
    <li class="voce_4"><a class="triangolo" href="#">Servizi</a></li>
    <li class="voce_5"><a href="#">Contatti</a></li>
 </ul>

Ad ogni li diamo un classe. Questo ci servirà più avanti per posizionare in modo corretto lo sfondo del sottomenu di ogni voce. A questo punto siamo pronti per dargli uno stile.

 .menu{
    margin: 0;
    padding: 0;
    list-style-type: none;
    position: absolute;
    top: 50px;
    right: 15px;
 }

 .menu > li{
    float: left;
    position: relative;
    margin-right: 60px;
 }

 .menu li a{
    color: #FFF;
    text-decoration: none;
    font-variant: small-caps;
    display: block;
    font-size: 17px;
    height: 20px;
 }

 .menu li a.selezionato{
    color: #ac6d00;
 }

 .menu li a.triangolo{
    background-image: url(../images/triangolo.png);
    background-repeat: no-repeat;
    background-position: center bottom;
    padding-bottom: 12px;
    margin-bottom: 8px;
 }

 .menu li a:hover{
    color: #ac6d00;
 }

Abbiamo posizionato la classe .menu in posizione assoluta rispetto all’header e utilizzato la regola .menu li a.triangolo per segnalare la presenza del sottomenu. E’ importante notare l’utilizzo del selettore discendente diretto nella regola .menu > li per evitare che anche i li del sottomenu ereditino il float e il posizionamento.

Il sottomenu

Adesso siamo pronti ad inserire il codice HTML del sottomenu. Modifichiamo il codice della voce portfolio per inserire la lista delle voci figlie:

 <li class="voce_3"><a class="triangolo" href="#">Portfolio</a>
    <ul class="sottomenu">
        <li><a href="#">Illustrazioni</a></li>
        <li><a href="#">Grafica</a></li>
        <li><a href="#">Web</a></li>
    </ul>
 </li>

Ora vediamo come dare lo stile per farlo sembrare a un livello inferiore rispetto all’header:

 .sottomenu{
    background-image: url(../images/header.png);
    background-repeat: no-repeat;
    background-color: #cccccc;
    list-style-type: none;
    position: absolute;
    width: 126px;
    padding: 0;
    margin: 0 0 0 -63px;
    left: 50%;
    z-index: 5;
    display: none;
    border-radius: 0 0 5% 5%;
    top: 40px;
 }

Ecco il trucco! Inserisco per la seconda volta l’immagine di sfondo dell’header. Il margine negativo serve a centrare il sottomenu rispetto alla voce padre a cui appartiene. Perché il trucco funzioni è necessario posizionare in maniera corretta l’immagine duplicata:

 .voce_3 ul.sottomenu{
    background-position: -537px -91px;
 }

Questo fa in modo che lo sfondo del sottomenu coincida perfettamente con lo sfondo dell’header. La posizione l’ho ricavata utilizzando FireBug e facendo alcuni conti; per essere più precisi occorerebbe fissare le altezze e le larghezze delle voci del menu. Ora per fare in modo che la prima voce non inizi sopra l’ombra diamo del padding-top:

 .voce_3 ul.sottomenu li:first-child{
    padding-top: 20px;
 }

Tutto è posizionato come vogliamo, ovviamente il background-position di ogni sottomenu dovrà essere sistemanto in maniera indipendente. Adesso completiamo il tutto con gli ultimi ritocchi:

 .sottomenu > li{
    text-align: left;
    padding: 5px;
 }

 .sottomenu li a {
    color: #373637;
    font-size: 14px;
    font-variant: normal;
 }

 .menu > li:hover > ul.sottomenu {
    display: block;
 }

Ottimo, abbiamo completato la parte di CSS, adesso possiamo concentrarci sull’animazione jQuery.

Animiamo il menu con jQuery

Per prima cosa dobbiamo rimuovere l’hover fatto da CSS che fa conflitto con l’animazione che andremo a realizzare. Per consentire la navigazione anche a chi non ha javascript, utilizziamo una tecnica di graceful degradation. Assegniamo la classe .no-js al tag html che rimuoveremo poi da jQuery. Modifichiamo ora la regola scritta in precedenza per visualizzare il sottomenu aggiungendo la nuova classe:

 .no-js .menu > li:hover > ul.sottomenu {
    display: block;
 }

In questo modo l’hover fatto da CSS si attiverà solo quando non è presente javascript. Realizziamo l’animazione da jQuery:

$(document).ready(function() {
	$('html').removeClass('no-js');
	$('.menu > li').hover (function() {
		$(this).children('ul.sottomenu').slideDown('slow');
	}, function() {
		$(this).children('ul.sottomenu').slideUp();
	});
});

L’azione removeClass() serve come abbiamo detto per disattivare l’hover CSS. Dopo di che occorre gestire l’evento hover sulle voci del menu; utilizzando il riferimento this estraiamo il sottomenu figlio e lo facciamo apparire con un’animazione di slide.

Conclusioni

Con questo il nostro menu è completo e funzionante su tutti i browser moderni a partire da IE 7+ con e senza javascript. Uno dei possibili limiti di questo approccio è che avendo duplicato l’immagine dell’header nel sottomenu non possiamo dare un maggior dettaglio grafico al popup. Una possibile soluzione è quella di utilizzare i background multipli di CSS3.