Come sicuramente avrai capito leggendo i miei post, ho un vero e proprio debole per le mobile web app e per l’impiego dei CSS3 al fine di rendere più piacevole la user-experience delle mie interfacce.

Con il miglioramento costante delle caratteristiche hardware dei dispositivi mobili è possibile avvicinarsi sempre di più alle prestazioni di applicazioni native, realizzando effetti come animazioni e transizioni puramente in CSS3.

Inserire nelle web app elementi come touch sliders, slide menu, pull-to-refresh scroll, e molti altri componenti che siamo ormai abituati a vedere nelle applicazioni native, diventa quindi meno complicato.

L’impiego nei siti web

Effetti del genere ovviamente non sono limitati soltanto a smartphone o tablet, ma si possono implementare anche nei “classici” dispositivi desktop. Numerosi web designer e developer li inseriscono per esempio nei propri progetti per renderli più piacevoli e per stupire in modo originale il visitatore.

In questo articolo ti voglio parlare proprio di come realizzare un CSS3 slide panel menu, effetto che ho trovato ultimamente in molti siti web, e che può essere utilizzato in tutti i dispositivi.

Quello che realizzeremo in questo tutorial è quindi un menu CSS3 slide panel, che appare o scompare al click su uno specifico pulsante.

Squarespace usa la tecnica dello slide menu nel proprio sito

Uno degli aspetti fondamentali che caratterizzerà il risultato finale è l’introduzione, se pur a livello base, di un concetto molto importante nell’ambito della compatibilità: il miglioramento progressivo tramite CSS3 (o CSS3 Progressive Enhancement).

Il Progressive enhancement è una strategia impiegata nel web design che utilizza le tecnologie web a più livelli, per permettere a chiunque di accedere a contenuti e funzionalità di base del sito (o della web app) indipendentemente dal browser o dalla connessione utilizzata, fornendo anche una versione migliorata della pagina per coloro che dispongono di un browser più avanzato o maggiore larghezza di banda.

Fonte: Wikipedia

Per quanto riguarda il nostro esperimento, la tecnica di base consisterà nel basare l’animazione dello sliding panel sulla proprietà left per i browser che non supportano le css transform, mentre sulla proprietà translate3d per quelli che la supportano.

Così facendo potremo guadagnare in termini di fluidità e le prestazioni (per capire quali sono gli attributi sui quali agire per migliorare fluidità e prestazioni ti consiglio di leggere: Performance CSS3: consigli per ottimizzare le animazioni).

Ma veniamo al punto.

Il markup HTML

<!-- Menu -->
<nav class="menu">

	<!-- Menu Wrapper -->
	<div class="menu-wrap">
		<span id="menu-close">x</span>
		<a href="index.html">Home</a>
		<a href="services.html">Services</a>
		<a href="portfolio.html">Portfolio</a>
		<a href="about.html">About</a>
		<a href="#contact">Contact</a>
	</div>

	<!-- Menu button -->
	<button id="toggle" title="Menu Toggle">Toggle</button>
</nav>

<!-- contenuto pagina -->

<div class="main-wrapper">			
	<!-- contenuto della pagina -->	
</div>

Dal codice puoi vedere che il menu (class = “menu-wrap”) ed il pulsante di toggle (id=”toggle”) sono stati inseriti all’interno di un wrapper principale con class=”menu”, che sarà poi quello su cui effettueremo l’animazione, assieme al body stesso della pagina

Gli stili CSS

Vediamo gli stili per il wrapper principale del menu:

/* 
	stili del menu
	impostiamo la position a fixed con un right di -200px (il menu "a riposo" 
	esce dalla pagina a destra per un numero di pixel pari alla sua larghezza)
*/
.menu {
    position: fixed;
    right: -200px;
    width: 260px;
    height: 100%;
    top: 0;
    z-index: 10;
    text-align: left
}
/*
	serve per far muovere anche il body nel caso in cui il browser non supporta le CSS transform
*/
body {
    overflow-x: hidden;
    position: relative;
    left: 0;
}

Ora impostiamo gli stili del menu-wrapper che è contenuto all’interno del panel menu principale, quelli del pulsante di chiusura (id=”menu-close”), e quelli del pulsante “toggle”:

/* 
	impostiamo gli stili dell'elemento wrapper che contiene il menu 
*/
.menu-wrap {
    position: absolute;
    top: 0;
    /* impostiamo un left di 60px per dare 'spazio' al pulsante '#toggle' */
    left: 60px;
    background: #1a1a1a;
    width: 200px;
    height: 100%;
    padding-top: 20px;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

/*
	impostiamo gli stili dei link del menu	
*/
.menu a {
    margin-left: 20px;
    color: gray;
    display: block;
    font-size: 12px;
    font-weight: 700;
    line-height: 40px;
    letter-spacing: .1em;
    text-transform: uppercase;
}
.menu a:hover {
    color: #fff
}
.menu a:active {
    color: #fff
}
.menu a>i {
    float: left;
    display: inline-block;
    vertical-align: middle;
    text-align: left;
    width: 25px;
    font-size: 14px;
    line-height: 40px;
    margin: 25px 2px
}

/*
	impostiamo gli stili e posizioniamo il pulsante di chiusura che si trova all'interno del paneò
*/

#menu-close {
    cursor: pointer;
    display: block;
    position: absolute;
    font-size: 18px;
    font-weight: bold;
    color: gray;
    width: 40px;
    height: 40px;
    line-height: 40px;
    top: 18px;
    right: 5px;
    -webkit-transition: all .1s ease-in-out;
    -moz-transition: all .1s ease-in-out;
    -ms-transition: all .1s ease-in-out;
    -o-transition: all .1s ease-in-out;
    transition: all .1s ease-in-out
}
#menu-close:hover {
    color: #fff;
}

/*
     posizioniamo il pulsante toggle
*/
#toggle{
    position: absolute;	
    top: 25px;
    right: 265px;
    display: block;
    min-width: 110px;
    text-align: right;
    z-index: 11;
    font-size: 18px;
    font-weight: 700;
    color: #FFF;
    text-transform: uppercase;

    padding:0;
    background: none;
    margin:0;
    border:0;
}

Ora impostiamo gli stili del contenuto principale della pagina:

/* stili del contenuto della pagina */

.main-wrapper {
    background: url(../img/header-bg1.jpg) no-repeat center top;
    margin-top: 0px;
    padding-top: 130px;
    text-align: center;
    background-attachment: relative;
    background-position: center center;
    height: 100%;
    width: 100%;
    -webkit-background-size: 100%;
    -moz-background-size: 100%;
    -o-background-size: 100%;
    background-size: 100%;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover    
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

Infine, ecco il punto focale del nostro esperimento, dove avviene “la magia”, ovvero il momento in cui scegliamo quale proprietà modificare oper effettuare l’animazione in base alla compatibilità del browser:

/*
	in questa situazione, quindi quando il browser NON supporta le CSS3 transform, 
	muoviamo la reale posizione del menu da fuori dallo schermo al suo interno, agendo sulla 
	proprietà "left"
*/
body:not(.with-translate).open {
    left: -200px;
}

/*
	in questa situazione, quindi quando il browser supporta le CSS3 transform, 
	lasciamo la reale posizione del menu fuori dallo schermo, mentre la trasliamo 
	al suo interno di 200px;
*/
body.with-translate.open {
    left: 0;    
    -webkit-transform: translate3d(-200px , 0 , 0);
    -moz-transform: translate3d(-200px,0,0);
    -ms-transform: translate3d(-200px,0,0);
    -o-transform: translate3d(-200px,0,0);    
    transform: translate3d(-200px,0,0);    
}

/* 
	impostiamo infine la transition ad all	per comprendere sia quella sulla proprietà "translate3d" che sulla proprietà "right"
*/

/* 
	se il browser non supporta le CSS3 transform, utilizziamo 
	la proprietà "right" per creare il nostro effetto 
        sull'elemento del menu
*/
body:not(.with-translate) .menu.open {
    right: 0
}

/* 
	altrimenti la proprietà right dovrà avere lo stesso valore negativo 
	in quanto useremo la proprietà translate per l'animazione 
*/

body.with-translate .menu.open{
	right:-200px;
}

/*
	nel caso in cui si tratta di ie10 attribuiamo la translate anche al menu, 
	che in questa versione non si sposta insieme al body (maledetto IE!)
*/
body.ie10.with-translate .menu.open {
    -webkit-transform: translate3d(-200px , 0 , 0);
    -moz-transform: translate3d(-200px,0,0);
    -ms-transform: translate3d(-200px,0,0);
    -o-transform: translate3d(-200px,0,0);    
    transform: translate3d(-200px,0,0);    
}

/*
       impostiamo la durata delle animazioni per il menu ed il body con 'all'
       in modo da agire sia sulla proprietà 'transform' che sulla proprietà 'right'
*/
.menu, body{
    -webkit-transition: all .3s ease;
    -moz-transition: all .3s ease;
    -ms-transition: all .3s ease;
    -o-transition: all .3s ease;
    transition: all .3s ease
}

Qui vengono definite le due differenti tecniche di animazione distinte in base alla classe del body: se esso ha la classe “with-translate” (significa che il browser supporta la proprietà CSS transform), allora animeremo body e menu traslandoli con la l’attributo “transform: translate3D“, altrimenti lo faremo agendo sulla proprietà “right”.

Il file Javascript

Infine qualche riga di codice per aggiungere o togliere la classe “open” dal body e dal menu, all’evento “click” dei pulsanti desiderati. Controlliamo inoltre, sfruttando modernirz ( che ho incluso nel documento, puoi verificarlo scaricando il codice sorgente), se il browser supporta le CSS transform oppure no (in caso positivo aggiungiamo la classe “with-translate” al body).

$(function(){

	/* 
		grazie a modernizr, controllando le classi del tag HTML 
		possiamo sapere se il browser supporta la transition3d		
	*/
	var supportCssTransforms = $("html").hasClass("csstransforms3d");

    /*
	    se la supporta aggiungiamo la classe 'with-translate' al body, 
	    in modo da poter differenziare la modalità d'effetto tramite CSS
    */
	if(supportCssTransforms){
    	$("body").addClass("with-translate");
	}

        /*
		se si tratta di IE 10 aggiungiamo la classe per il workaround 
		(la condizione di controllo può essere migliorata)		
	*/
	if(navigator.userAgent.indexOf("MSIE 10.")!=-1){
		$("body").addClass("ie10");
	}

	/*
		impostiamo sugli elementi desiderati l'evento click in modo da 
		aprire o chiudere il menu aggiungendo o togliendo la classe "open"	
		al body e al menu stesso	
	*/
	$("#toggle, #menu-close").on("click", function(){
		$("body, .menu").toggleClass("open");		
	});

});

Ecco fatto: ora possiamo visualizzare un vero e proprio CSS3 slide panel menu con tanto di Progressive Enhancement per i dispositivi che non supportano le funzionalità CSS3 più recenti!

Se ti è piaciuto l’articolo, perché non lo condividi?