L'articolo presentato oggi riguarda la realizzazione di un layout responsive il quale prevede nella versione desktop la navigazione fissa, posta sul lato sinistro dello schermo ed accanto il contenitore dei testi, scrollabile.
Nella versione per smartphone, invece, il menu viene posizionato nella parte alta della pagina, sempre in primo piano ed accessibile in qualsiasi momento.
Non verrà implementato alcun codice particolare se non l'HTML5, CSS3 e poche righe di codice Javascript.
Vediamo come fare.
Per creare il menu di navigazione fisso, si necessita di tre passaggi:
- scrittura del codice HTML
- scrittura del codice CSS
- implementare il codice Javascript che azzionerà il menu, per media con piccole dimensioni di schermo
Scrivere il codice HTML e creare il relativo file
Il risultato che otterremo è uguale all'immagine posta all'inizio dell'articolo. Nel dettaglio:
- il contenitore generale: wrapper
- il contenitore per la navigazione: navigation
- il contenitore per i testi, immagini e video: content
Si crei un file .html e lo si salvi con il nome navigation.html.
Siccome creeremo il layout responsive, per l'esempio in oggetto è stato impostato un solo breakpoint. Vale a dire che fino ad una dimensione di schermo, pari a 767px, avremo il menu in alto ed i contenuti al di sotto di esso.
Da 768px in poi, avremo la navigazione a sinistra ed i contenuti alla sua destra.
Ovviamente è possibile introdurre quanti breakpoint si vogliono ma, andando al di sotto dei 767px, potrebbe risultare molto stretta la colonna sinistra.
Il div class = wrapper non necessita di alcun codice CSS. Infatti non è stato scritto nulla per esso. Va inserito semplicemente nel file navigation.html.
<div class="wrapper"> </div>
Immediatamente dopo il tag <div class="wrapper"> di apertura, inserire il titolo del sito ed il menu.
<div class="navigation" id="myTopnav"> <h1 id="sitename">Sito.it</h1> <a href="javascript:void(0);" class="icon" onclick="myFunction()">☰</a> <ul> Voci di menu </ul> </div>
Notare la presenza del link a href="javascript:void(0);".... Esso serve per la versione mobile. Al click sull'icona dell'hamburger menu, si aprirà il div class="navigation" mostrando le sue voci.
Dopo la chiusura del div class="navigation", abbiamo il div class="content". Al suo interno andranno testi, immagini, video ecc.
Ricapitolando, il nostro codice HTML è così composto:
<div class="wrapper"> <div class="navigation" id="myTopnav"> <h1 id="sitename">Sito.it</h1> <a href="javascript:void(0);" class="icon" onclick="myFunction()">☰</a> <ul> Voci di menu </ul> </div> <div class="content"> Contenuti </div> </div>
Scrittura del codice CSS
Il codice CSS possiamo inserirlo direttamente nella pagina oppure si crei un file ad esso dedicato. Entrambi i modi sono corretti. Si crei un file navigation.css e lo si richiami nel file navigation.html, inserito nella head.
<link rel="stylesheet" type="text/css" href="/navigation.css">
Il codice CSS in comune, per mobile e desktop, lo scriviamo prima delle Mediaqueries. Esso è:
.navigation{background:#333;}
.navigation ul {margin:0;padding:0;list-style-type:none;}
.navigation li{text-align:left;}
.navigation li a{
color: #f2f2f2;
height:50px;
line-height:50px;
display:block;
text-decoration:none;
font-size:18px;
border-bottom:1px solid #424242;
padding:0 0 0 30px;
}
.navigation li a:hover { color:#ddd;}
.navigation .icon { display: none;}
Notare la dichiarazione .navigation .icon { display: none;}.
Indica che l'icona dell'hamburger menu non deve apparire se si apre la pagina da desktop.
Proseguiamo con il codice.
#sitename {color: #fff; font-size:38px; font-weight:300;}
a.icon {
font-size:30px;
margin:.5em;
color:#fff;
text-decoration:none!important;
border-bottom:1px solid #333;
}
#sitenameè l'ID associato al titolo del sitoa.iconè la classe dell'icona che ha la funzione di mostrare e chiudere il menu nella versione mobile
Il codice CSS per il mobile
Arrivati a questo punto, passiamo a dichiarare il codice per i device con dimensione di schermo fino a 767px.
@media screen and (max-width:767px) {
Codice CSS....
}
Il logo del sito, nel mio esempio il tag <h1>, è in posizione assoluta. Il menu non deve essere "aperto" quando si richiama la pagina. Pertanto abbiamo:
#sitename {position:absolute; top:.5em; left:30px;}
.navigation li a {display:none;}
L'icona dell'hamburger menu anch'essa in posizione assoluta, sul lato destro (ma può essere tranquillamente scambiata la posizione).
.navigation.responsive a.icon {
position: absolute;
right: 0;
top: 0;
}
Si presti attenzione alla dichiarazione .navigation.responsive.
Fino ad ora non ce ne siamo occupati perchè entra in azione solo con dimensioni di schermo fino a 767px, cioè la dimensione della nostra mediaquerie.
Perchè una doppia classe? Se ricordiamo bene, all'inizio dell'articolo ho scritto che inseriremo qualche rigo di codice javascript affinchè nella versione mobile avremo il menu posto in alto.
Quale funzione ha il codice javascript?
Esso controlla la dimensione del monitor. Se siamo al di sotto della dimensione da noi impostata, @media screen and (max-width:767px), allora "aggiunge" la classe .responsive.
Diversamente, se la pagina viene visualizzata in un monitor con dimensioni superiori a 767px, allora avremo solo la classe .navigation.
Adesso sarà molto più semplice comprendere il resto del codice CSS.
.navigation.responsive {position: relative;}
.navigation.responsive a {
display: block;
text-align: left;
}
.navigation a.icon {
float:right;
display:block;
}
.content {padding: 50px 30px 0; }
Il codice CSS per desktop
Passiamo adesso al codice CSS per il desktop. Innanzitutto la dichiarazione della mediaquerie.
@media screen and (min-width:768px) {
Codice CSS...
}
All'interno del codice appena riportato avremo:
#sitename {margin-bottom:30px;}
.navigation {
width:30%;
float:left;
height:100vh;
position:fixed;
top:0;
left:0;
}
.content{
float:left;
margin-left:30%;
width:70%;
}
Tutto molto chiaro, e spero semplice, per quanto scritto.
Nella versione desktop parliamo di "colonna", per la navigazione, e non più di menu posto nella parte alta della pagina. Di conseguenza abbiamo:
- largherzza in percentuale
- elemento flottante a sinistra
- in posizione fissa
- con un'altezza pari a tutta la dimensione del monitor
Per il contenitore dei testi .content:
- elemento flottante a sinistra
- margine sinitro pari alla dimenssione del
div.navigation - dimensione pari alla differenza di tutta l'area a disposizione meno la larghezza del menu (100% - 30% = 70%)
Questo è tutto quello che serve per quanto riguarda la parte HTML e CSS.
Il codice Javascript per la versione mobile
Eccoci giunti al codice da inserire per far funzionare il menu nella versione mobile.
Vediamo prima la stringa completa che va inserita all'interno del div.navigation.
<div class="navigation" id="myTopnav"> <a href="javascript:void(0);" class="icon" onclick="myFunction()">☰</a> </div>
Altro non è che un link vuoto, al quale è stata assegnata la classe .icon e che richiama la funzione myFunction.
Nella sezione head della pagina, prima del link al file .css, scrivere:
function myFunction() {
var e = document.getElementById("myTopnav");
if (e.className === "navigation") {
e.className += " responsive";
} else {
e.className = "navigation";
}
}
Dopo tutto questo disquisire di codice HTML, CSS e Javascript, possiamo vedere una pagina demo nella quale è riportato il layout responsive con menu fisso e contenuti scrollabili, oppure con menu fisso in alto, a seconda del tipo di media dal quale la si richiama.